*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    
}

@font-face {
    font-family: "Creepy";
    src: url("/Assets/fonts/Creepy.woff") format("woff"), url("/Assets//fonts/Creepy.woff2") format("woff2")
}

@font-face {
    font-family: "Lunacy";
    src: url("/Assets/fonts/Lunacy.woff") format("woff"), url("/Assets//fonts/Lunacy.woff2") format("woff2")
}

html{
    
    min-height: 100vh;
    font-size: 16px;
    cursor:url("./Assets/cursors/Ghost.cur"), auto;
}

body{
    background: radial-gradient(#8a4f01,#3d2200);
   
}


.title{
    margin-top: 2rem;
    
    color:#FF6D00;
    font-family: Creepy, serif;
    font-weight: normal;
    text-align: center;
    font-size: 6rem;
}

.game-info{
    font-family: Lunacy,serif;
    color: #FFBB89;
    font-size: 4rem;
}
.game-container{
  
    display: grid;
    grid-template-columns: repeat(8, auto);
    gap: 10px;
    justify-content: center
    ;
}

.game-info-container{
    
    grid-column: 1  / -1;
    display: flex;
    justify-content: space-evenly;
}
.card{
    position: relative;   
    width: 125px;
    height: 175px;

}

.card:hover{
    cursor:url("./Assets/cursors/GhostHover.cur"), auto;
}

.card-face{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    backface-visibility: hidden;
    border-radius:12px ;
    border-width: 1px;
    border-style: solid;
    transition: transform 500ms ease-in-out;
    
}

.card.visible .card-back{
    transform:rotateY(-180deg)

}

.card.visible .card-front{
    transform: rotateY(0);
}

.card.matched .card-value{
    animation: dance 1s linear infinite 500ms;
}

.overlay-text{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
    z-index: 100;
    color: #FF6D00;
    font-family: Creepy,serif;

}

.overlay-text-small{
    font-size: 2rem;
    
    
}

.overlay-text.visible{
    display: flex;
    flex-direction: column;
    animation:extender 500ms forwards ;
}

@keyframes extender {
    from{
        background-color: rgba(0,0,0,0);
        font-size: 0;
    }
    to{
        background-color: rgba(0,0,0,0.8);
        font-size: 10rem;
    }
    
}

@keyframes dance {
0%,100%{
    transform: rotate0;
}    
25%{
    transform: rotate(-30deg);
}
75%{
    transform: rotate(30deg);
}
}

.card-back{
    background-color: black;
    border-color: #FF6D00;
}

.card-front{
    transform: rotateY(180deg);
    background-color: #FFBB89;
    border-color: #333;
    
}

.card-value{
    transform: scale(.9);
    transition: transform 100ms ease-in-out;
    /* animation: dance 1s infinite 500ms forwards ; */
}

.card-front:hover .card-value{
    transform: scale(1);
}

.web{
    position: absolute;
    width: 47px;
    height: 47px;
    transition: width 100ms ease-in-out, height 100ms ease-in-out ;
}

.card-face:hover .web{
    width: 52px;
    height: 52px;
}

.web-top-left{
    transform: rotate(270deg);
    top:0;
    left: 0;
}

.web-top-right{
    top:0;
    right: 0;

}

.web-bottom-left{
    transform: rotate(180deg);
    bottom: 0;
    left: 0;
}

.web-bottom-right{
    transform: rotate(90deg);
    bottom: 0;
    right: 0;
}

.spider{
    align-self: flex-start;
    transform: translateY(-10px);
    transition: transform 100ms ease-in-out

}

.card-back:hover .spider{
    transform:translateY(0);
}


@media (max-width:600px){
    .game-container{
        grid-template-columns: repeat(2,auto);
    }

    .game-info-container{
        flex-direction: column;
        align-items: center;
    }
}

@media (min-width:601px){
    .game-container{
        grid-template-columns: repeat(4,auto);
    }
}

@media(min-width:900px){
    .game-container{
        grid-template-columns: repeat(8,auto);
    }
}