@font-face {
    font-family: font;
    src: url(../../resources/fonts/darkforest.woff2);
}

:root {
    background-color: black;
    color: white;
    font-family: font;
}

.modal {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 10%;
    overflow: hidden;

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

    position: absolute;
    top: 0;
    left: 0;

    background-color: black;
    color: red;
    font-family: font;
}

.error-modal {
    font-size: min(10vh, 4vw);
    display: none;
}

.content{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: 3fr 1fr;
    grid-template-columns: 1fr;
    justify-content: center;
    align-items: center;
}

.card-display {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-display > * {
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    border: 3px solid red;
    border-radius: 30px;
}

.card-display-front{
    position:relative;
    padding: 50px;
    transition: all 200ms;
    transform:  rotateY(var(--rotateY,0deg));
    outline: 1px solid transparent;/*  Horrible hack to make it anti-aliased on chrome please dont delete*/
}
.card-display-front > img {
    width: auto;
    height: 624px;
}
.card-display-back {
    position:absolute;
    padding: 50px;
    transition: all 200ms;
    transform: rotateY(var(--rotateYInverse,180deg));
}
.card-display-back > img {
    width: auto;
    height: 65vh;
}
.flipped{
    --rotateY : 180deg;
    --rotateYInverse : 0deg;
}

.button-display {
    height: 100%;
    width: 100%;

    display:flex;
    justify-content: center;
    align-items: center;
    gap: 20%;

}

.circle{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    
}
.score{
    font-size: 40px;
    user-select: none;
 
}
.tick {
    background-color: green;
}
.cross {
    background-color: red;
}

.popup {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 30px;
    color: green;
    opacity: 1;
    transition: all 2000ms cubic-bezier(0.335, 0.010, 0.030, 1.360);

}
.popup-anim{
    opacity : 0;
    transform: translateY(-75px);
}

.screen{
    z-index: 999;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    color: black;
    height: 100%;
    width: 100%;
    opacity: 1;
    transition: all 500ms cubic-bezier(0.335, 0.010, 0.030, 1.360);
}
.disappear{
    opacity : 0;
}