* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    background-color: #F6DED8;
    text-align: center;
}

#message {
    font-family: wasted-vindey;
    color: white;
    font-size: 7vh;
}

/* #sticker {
    font-family: cupid-sticker;
    font-size: 7vh;
} */
body{
    width: 100%;
}
main {
    /* overflow-x: hidden; */
    width: 100%;
}
#button {
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

#message img {
    max-width: 30vmin;
}

@font-face {
  font-family: 'cupid-regular';
  src: url('/web3/project1/assets/Cupidon.ttf') format('truetype');
}

@font-face {
  font-family: 'cupid-sticker';
  src: url('/web3/project1/assets/Cupids.ttf') format('truetype');
}

@font-face {
  font-family: 'wasted-vindey';
  src: url('/web3/project1/assets/wasted-vindey.ttf') format('truetype');
}

.container {
            display: grid;
            color: white;
            background-color: #D2665A;
            width: 70vh;
            height: 70vh;
            margin: 120px auto;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
        }

.cell {
    display: grid;
    place-items: center;
    border: 20px solid #F6DED8;
    background-size: contain;
}

.options {
    display: grid;
    justify-content: end;
}

button {
    display: none;
    position: absolute;
    z-index: 10;
    color:#D2665A;
    background-color: #F6DED8;
    padding: 1%;
    border: 5px solid white;
    font-size: 2vh;
    margin: 5%;
}


#curt {
   width: 100%;
}

.imgs {
    display: block;
    height: 100vh;
    position: absolute;
    top: 0px;
    transition: all 2s;
}

.l {
    left: 0px;
}

.r {
    right: 0px;
}

@keyframes slideLeft {

    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes slideRight {

    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.slide-left {
    animation: slideLeft 2s forwards;
}

.slide-right {
    animation: slideRight 2s forwards;
}

#panel {
    width: 100%;
    height: 100vh;
    background-color: #B82132;
    position: absolute;
    top: 0px;
    left: 0px;
    align-content: center;
    color: white;
    font-size: 5vh;
    transition: all 2s; /*ubic-bezier(0.075, 0.82, 0.165, 1);*/
    justify-items: center;
}

.slide-up {
    transform: translateY(-70vh) rotateX(70deg);
}

.slide-down {
    transform: translateY(0vh) rotateX(0deg);
}

/* .slide-left {
     transform: translateX(-70vh);
}
.slide-right {
     transform: translateX(70vh);
} */

@media only screen and (max-width: 650px) {

    .container {
            display: grid;
            color: white;
            background-color: #D2665A;
            width: 40vh;
            height: 40vh;
            margin: 120px auto;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
        }

    .cell {
        display: grid;
        place-items: center;
        border: 10px solid #F6DED8;
        background-size: contain;
    }
}