body {
    font-family: "Lalezar", system-ui;
    background-color: #a0330d;
    text-align: center;
}

/*.mshchoose {

    margin: 15px;
}

.choose {
    margin-block-start: 0em;
    margin-block-end: 0em;
}*/

p{
    margin-block-start: 0em;
    margin-block-end: 0em;
    color: #ffc400;
    font-size: xxx-large;
    height: 50px;
}

.back-link {
    color: #ffae01;
    display: inline-block;
    margin-top: 0.5rem;
    font-size: x-large;
    text-decoration: none;
}

.header-link {
    color: #ffae01;
    display: inline-block;
    margin-right: 1rem;
    margin-top: 0.5rem;
    font-size: x-large;
    text-decoration: none;
  }
.header-link:hover, .back-link:hover{
    color : #ffffff;
  }

/* flip the pane when hovered */

.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container,
.front,
.back, .ans {
    width: 250px;
    height: 250px;
}


/* flip speed */

.flipper {
    transition: 0.8s;
    transform-style: preserve-3d;
    position: relative;
}


/* hide back of pane during swap */

.front,
.back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}


/* front pane, placed above back */

.front {
    z-index: 2;
    transform: rotateY(0deg);
}


/* back, initially hidden pane */

.back {
    transform: rotateY(180deg);
}

img {
    width: 100%;
    height: 150%;
}


@media (min-width: 600px) {
    .one, .two, .three, .four, .five {
        position: absolute;
    }
}

.one {
    right: 1%;
}

.two {
    right: 21%;
}

.three {
    right: 41%;
}

.four {
    right: 61%
}

.row2 {
    top: 68%;
}

.row3 {
    top: 125%;
}

.row4 {
    top: 182%;
}

.row5 {
    top: 239%;
}

.row6 {
    top: 296%;
}

@media (max-width: 600px) {
    .cards {
        display: flex;
        position: absolute;
        flex-direction: column;
        justify-content: center;
        left: 3rem;
    }
    .one, .two, .three, .four, .five {
        margin-bottom: 10rem;
    }
    .rowone, .rowtwo, .rowthree, .rowfour, .rowfive, .rowsix {
        display: flex;
        flex-direction: column-reverse;
    }
}

#myImg {
    cursor: pointer;
}
  
  /* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 100%;
height: auto;
}

/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)} 
to {-webkit-transform:scale(1)}
}

@keyframes zoom {
from {transform:scale(0)} 
to {transform:scale(1)}
}

/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}