body{
    /*Weihnachtlichte Schriftart*/
    font-family: 'Cinzel Decorative', cursive;
    /*Weihnachtliche Farben*/
    --text-primary: #333;
    --text-secondary: snow;
    --bg-primary: snow;
    --bg-secondary: gold;
    margin: 0px;
    padding: 0px;
}

#winter{
    background-color: var(--bg-secondary);
    background-image: url('../bilder/header.jpg');
    background-size: cover;
    color: var(--text-primary);
    padding: 10px 0;
    text-align: center;
    margin-bottom: 1em;
}

.flexcontainer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--bg-primary);
    row-gap: 1em;
}

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 300px;
    border: 1px solid var(--bg-secondary);
    perspective: 1000px; /* Remove this if you don't want the 3D effect */

}


.flip-card a, a:visited, a:hover, a:active, a:link {
    text-decoration: none;
    color: var(--text-primary);
}



/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card-inner h1{
    position: absolute;
    width: 100%;
    background-color: var(--bg-primary);
    top: 10%;
    left: 0;
    margin: 0px;
    padding: 0px;
}


/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */

}

/* Style the front side (fallback if image is missing) */
/* .flip-card-front {
    background-color: #bbb;
    color: black;
} */
  
/* Style the back side */
.flip-card-back {
background-color: var(--bg-primary);
color: var(--text-primary);
transform: rotateY(180deg);
}

footer{
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    text-align: center;
    padding: 1em;
    margin-top: 1em;
}