body {
    background-color: #FECCCC;
    animation: fadeIn 0.5s ease-in;
    cursor: url(assets/cursor.png), auto;
    margin: 0;
    background-image: url(assets/main-bg-01.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    background-position:center;
}

html, body {
    margin: 0;
    height: 100%;
}

.cover {
    background-color: black;
    z-index: 100;
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    opacity: 0.5;
}
/* main grid */

.grid {
    max-width: 95%;
    margin: auto;
    height:90vh;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 28% 37% 20% 19%;
    gap: 2vh;
}

.title {
    grid-column: 2 / 6;
    grid-row: 1;
    padding-top: 3vh;
}

.cone {
    grid-column: 3 / 5;
    grid-row: 3;
    align-self: end;
    justify-self: center;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: 20% 40%;
    z-index: 300;
}

.base-cone {
    grid-column: 1 / 3;
    grid-row: 2;
    place-self: center;
    animation: fadeIn 0.2s ease-in;
}

.base-cone img{
    width: 23vh;
    animation: fadeIn 0.2s ease-in;
    /* position: absolute; */
    /* width: 100%; */
}

.flavor-container {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    place-self: center;
    z-index: 300;
}

.flavor-container img {
    width: 30vh;
    animation: fadeIn 0.2s ease-in;
}

.cherry-container {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    place-self: center;
    z-index: 300;
}

.cherry-container img {
    width: 30vh;
    animation: fadeIn 0.2s ease-in;
}

.toppings-container {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    place-self: center;
    z-index: 300;
}

.toppings-container img {
    width: 30vh;
    animation: fadeIn 0.2s ease-in;
}

.menu-right-1 {
    grid-column: 5;
    grid-row: 2 / 3;
}

.menu-right-2 {
    grid-column: 5;
    grid-row: 3;
    align-self: end;
}

.back-btn {
    grid-column: 3;
    grid-row: 4;
    justify-self: center;
    cursor: url(assets/cursor-hover.png), auto;
}

.clear-btn {
    grid-column: 4;
    grid-row: 4;
    justify-self: center;
    cursor: url(assets/cursor-hover.png), auto;
}


.finish-btn {
    grid-column: 5;
    grid-row: 4;
    cursor: url(assets/cursor-hover.png), auto;

}

.title img {
    width: 100%;
    /* object-fit: cover; */
}

.menu-right-1 img, .menu-right-2 img, .finish-btn img, .clear-btn img, .back-btn img{
    width: 28vh;

    
}

a {
    cursor: url(assets/cursor-hover.png), auto;
}

/* flavor grid */

.menu-left {
    grid-column: 2;
    grid-row: 2 / 5;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1.1fr 1fr 1fr 1fr 1fr 1.1fr;
    /* gap: 2vh; */
    /* grid-template-columns: auto auto; */
}
/* 
.flavors {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1.5fr 1fr 1fr 1fr 1fr;
} */

/* .flavors img {
    width: calc(100% - 5vh);
    width: 100%;
    margin-left:2.5vh;
} */

/* .menu-left img{
    width: 100%;
} */

#menu-left-bg {
    grid-row: 1 / 6;
    grid-column: 1;
    justify-self: center;
    /* align-self: center; */
    width: 28vh;
}

.vanilla-btn img, .chocolate-btn img, .strawberry-btn img, .mint-btn img {
    width: 100%;
}

.vanilla-btn {
    grid-row: 2;
    grid-column: 1;
    margin-left: 13%;
    margin-right: 13%;
    justify-self: center;
    align-self: center;
}

.chocolate-btn {
    grid-row: 3;
    grid-column: 1;
    margin-left: 13%;
    margin-right: 13%;
    justify-content: center;
    align-self: center;
}

.strawberry-btn {
    grid-row: 4;
    grid-column: 1;
    margin-left: 13%;
    margin-right: 13%;
    justify-content: center;
    align-self: center;
}

.mint-btn {
    grid-row: 5;
    grid-column: 1;
    margin-left: 13%;
    margin-right: 13%;
    justify-content: center;
    align-self: center;
}

/* topping grid */

.menu-right-1 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 1fr 1fr 1fr 1fr;
    /* gap: 2vh; */
}

/* .toppings img {
    width: calc(100% - 4vh);
    margin-left: 2.2vh;
} */

.sprinkles-btn img, .chocolate-dip-btn img, .chocolate-chunks-btn img {
    width: 100%;
}

#menu-right-bg {
    grid-row: 1 / 6;
    grid-column: 1;
    justify-self: center;
}

.sprinkles-btn {
 grid-row: 2;
 grid-column: 1;
    margin-left: 13%;
    margin-right: 13%;
    justify-self: center;
    align-self: center;
}

.chocolate-dip-btn {
 grid-row: 3;
 grid-column: 1;
    margin-left: 13%;
    margin-right: 13%;
    justify-self: center;
    align-self: center;
}

.chocolate-chunks-btn {
 grid-row: 4;
 grid-column: 1;
    margin-left: 13%;
    margin-right: 13%;
    justify-self: center;
    align-self: center;
}

/* cherry grid */

.menu-right-2 {
    grid-column: 5;
    grid-row: 3;
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: 0.5fr 1fr;
}

#menu-right-2-bg {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    justify-self: center;
}

/* .yes-no {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    padding-top: 6vh;
    margin-left: 10%;
    margin-right: 10%;
    justify-self: center;
    align-self: center;
} */

.yes-btn img {
    width: 100%;
}

.no-btn img {
    width: 100%;
}

.yes-btn {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
    align-self: center;
    margin-left: 25%;
}

.no-btn {
    grid-column: 2;
     grid-row: 2;
    justify-self: center;
    align-self: center;
    margin-right: 25%;
}

/* cone menu */

.cone-menu {
    grid-column: 6;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1.5fr 1fr 1fr 2.5fr;
}

#cone-menu-bg {
    grid-column: 1;
    grid-row: 1 / 4;
    width: 28vh;
    justify-self: center;
}

.cake-cone-btn {
    grid-column: 1;
    grid-row: 2;
    margin-left: 13%;
    margin-right: 13%;
    justify-self: center;
    align-self: center;
}

.waffle-cone-btn {
    grid-column: 1;
    grid-row: 3;
    margin-left: 13%;
    margin-right: 13%;
    justify-self: center;
    align-self: center;
}

.cake-cone-btn img, .waffle-cone-btn img {
    width: 100%;
}

/* finish window */

.finish-window {
    z-index: 200;
    padding-top: 10vh;
    transition: opacity 0.5s;
    opacity: 0;
    display: none;
}


.finish-window.appear {
    animation: fadeIn 0.5s;
    grid-column: 2 / 6;
    grid-row: 1 / 4;
    opacity: 1;
    justify-self: center;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
    grid-template-rows: 1fr;
}

.finishWindowBg {
    grid-column: 2 / 5;
    grid-row: 1;
    align-self: center;
    justify-content: center;
    width: 125vh;
}

#correctFinish {
    display: none;
}

.finishHome img, .nextLevel img, .again img {
    width: 100%;
}

.finishHome {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-content: center;
    margin-left: 30%;
    /* margin-right: 15%; */
    margin-bottom: 10%;
}

.again {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    justify-content: center;
    margin-left: 15%;
    margin-right: 15%;
    margin-bottom: 10%;
}

.nextLevel {
    grid-column: 4;
    grid-row: 1;
    align-self: end;
    justify-content: center;
    /* margin-left: 15%; */
    margin-right: 30%;
    margin-bottom: 10%;
    display: none;
}


.home-btn {
    z-index: 2;
    transition: opacity 0.5s;
    opacity: 0;
    z-index: 300;
}

.make-another-btn {
    z-index: 2;
    transition: opacity 0.7s;
    opacity: 0;
    z-index: 300;
}

.home-btn img {
    width: 0;
}

.make-another-btn img {
    width: 0;
}

.home-btn.appear {
    grid-column: 3;
    grid-row: 4;
    justify-self: center;
    opacity: 1;
}

.home-btn.appear img{
    width: 100%;
}

.make-another-btn.appear {
    grid-column: 4;
    grid-row: 4;
    justify-self: center;
    opacity: 1;
}

.make-another-btn.appear img {
    width: 100%;
}

/* timer */
.timer {
    font-family: "Baloo Bhai 2", sans-serif;
    font-weight: bold;
    color: #E85656;
    font-size: 5vh;
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    justify-self: center;
    align-self: center;
    margin-top: 1em;
}

.timer-container img {
    width: 28vh;
    grid-row: 1;
    grid-column: 1;
}

.timer-container {
    grid-column: 1;
    justify-self: center;
    align-self: center;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
/* pause menu */


.pause img {
   width: 28vh;
    cursor: url(assets/cursor-hover.png), auto;
}

.seeOrderBtn img {
    width: 28vh;
    cursor: url(assets/cursor-hover.png), auto;
}
.side-btns {
    grid-column: 6;
    grid-row: 1;
    margin-top: 1em;
   justify-self: center;
    align-self: center;
}


.unpause {
    grid-row: 2;
    grid-column: 1;
    z-index: 300;
    align-self: baseline;
    justify-content: center;
    margin-left: 20%;
    margin-right: 20%;
    cursor: url(assets/cursor-hover.png), auto;
}

.unpause img {
    width: 100%;
}

.pause-home-btn {
    grid-row: 3;
    grid-column: 1;
    z-index: 400;
    align-self: baseline;
    margin-left: 20%;
    margin-right: 20%;
}

.pause-home-btn img {
    width: 100%;
}

.tutorial-btn {
    grid-row: 4;
    grid-column: 1;
    z-index: 300;
    align-self: baseline;
    margin-left: 20%;
    margin-right: 20%;
}

.tutorial-btn img {
    width: 100%;
    cursor: url(assets/cursor-hover.png), auto;
}

.pause-menu {
    grid-column: 2 / 6;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    z-index: 400;
    display: none;
}

.pause-menu.appear {
    display: grid;
    grid-template-rows: 2.5fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr;
    place-items: center;
    row-gap: 5px;
}

.pause-menu-bg {
    width: 50vh;
    grid-row: 1 / 8;
    grid-column: 1;
    align-self: center;
    justify-self: center;
}

/* tutorial */

.tutorial {
    display: none;
}

.tutorial.appear {
    grid-column: 2 / 6;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    z-index: 450;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}


.tutorial-bg {
    width: 50vh;
    grid-row: 1 / 6;
    grid-column: 1;
    align-self: center;
    justify-self: center;
}

.beginBtn {
    grid-row: 4 / 6;
    grid-column: 1;
    width: 55%;
    padding-top: 2em;
    align-self: center;
    justify-self: center;
    cursor: url(assets/cursor-hover.png), auto;
}

.tutBack {
    grid-row: 4 / 6;
    grid-column: 1;
    width: 55%;
    padding-top: 1em;
    align-self: center;
    justify-self: center;
    cursor: url(assets/cursor-hover.png), auto;
}

/* order popup */
.order {
    display: none;
}

.order.appear {
    grid-column: 2 / 6;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    z-index: 400;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.order-bg {
    width: 50vh;
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    justify-self: center;
}

.order-list {
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    justify-self: center;
    padding-top: 15%;
}

.order-list ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.order-list li {
    font-family: "Baloo Bhai 2", sans-serif;
    font-weight: bold;
    font-size: 4vh;
    margin: 0;
    margin-bottom: 1em;
    color:#f1a5a5;
    line-height: 1em;
}

.order-list li em {
    color:#E85656;
    font-style: normal;
}

/* coming soon */

.nextLevelPopup {
    display: none;
}
.nextLevelPopup.appear {
    grid-column: 2 / 6;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    z-index: 1000;
    display:block;
}

.nextLevelPopup img {
    width: 50vh;
    grid-row: 1;
    grid-column: 1;
    align-self: center;
    justify-self: center;
    z-index: 1000;
}

/* animations */

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes entrance {
    0% {
              transform: scale(0.7);
      opacity: 1;
    }
    60% {
        transform: scale(1.1);
    opacity: 1;
    }
    100% {
              transform: scale(1);
      opacity: 1;
    }
}