@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');


body,html{margin:0;padding:0;font-family: 'Open Sans', sans-serif; } *{box-sizing:border-box; position:relative;}

*{user-select: none;}
.page{width:100%;height:100vh;left:0;top:0; display:flex;align-items:center; justify-content:center; position: fixed;}
img{

    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

}

.board{display: grid; width: clamp(600px,40%,800px);aspect-ratio: 1/1; 
 gap:1rem; padding: 1rem;
}
.start{display: flex; flex-direction: column;}
.start p{width: 100%; max-width: 600px; text-align: center; font-size: 1.3rem;}
.card{--sh:0;filter: drop-shadow(0 calc(var(--sh) * 2px) calc(var(--sh) * 1px) black); }
.card,.card *{cursor: pointer;}
.front img{ width:100%;height:100%;left:0;top:0; object-fit: cover; object-position: center;}
.back{ --gr:100;background: linear-gradient(90deg,hsl(180, 25%, 25%) calc(var(--gr) * 1%), hsl(180, 25%, 55%) 100%); box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.246);}
.rotated{z-index: 1000;}
.back img {width: 80%;}
.start,.end{display:flex;align-items:center; justify-content:center; position: absolute; width:100%;height:100%;left:0;top:0; z-index: 10000000;}
.board div div{position: absolute; width:100%;height:100%;left:0;top:0;display:flex;align-items:center; justify-content:center;}
.gameTimer{color: white; position: absolute;left: 2rem;top: 2rem;}
.message{color: white; text-align: center;}
.end div{text-align: center; font-size: 1.5rem; padding-bottom: 1rem; max-width: 500px;}
.bg{position: fixed;width:100%;height:100vh;left:0;top:0; overflow: hidden; transform: translateZ(-100px);}
.bg img{width:100%;height:100%;left:0;top:0; object-fit: cover; object-position: center;}

button{all:unset; cursor: pointer; font-size: 2rem; padding: .5rem 1rem .7rem 1rem; outline: 2px solid;}


button:hover{ filter: invert(1);}