@font-face {
    font-family: 'Nexa-Heavy';
    src: url('assets/Nexa-Heavy.ttf');
}

html, #generate {
    font-family: 'Nexa-Heavy', sans-serif;
}

#generate {
    display: block;
    background-color: black;
    max-width: 50vw;
    scale: 1.5;
    font-size: min(1em, 5vw);
    border: none;
    padding: 1em;
    border-radius: 1em;
    color: white;
    cursor: pointer;
}

#boardContainer {
    display: grid;
    border: 3px solid black;

    width: 50vmin;
    height: 50vmin;

    touch-action: manipulation;
    transition: 1s ease-in-out;
}

@media screen and (max-width: 800px) {
    #boardContainer {
        width: min(90vw, 75vh) !important;
        height: min(90vw, 75vh) !important;
    }
}

.stateDisplay {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

#logo, #bigContainer, #sliderDiv, #generate {
    margin: auto;
}

#logo {
    width: 50vw;
    display: block;
    margin-top: 3vw;
    margin-bottom: 3vw;

    @media screen and (max-width: 800px) {
        width: 75vw !important;
    }
}

#bigContainer {
    width: fit-content;
    position: relative;
}





#victory {
    position: absolute;
    /* weird % values so it doesnt line up with grid lines */
    top: 39%;
    left: 29%;
    width: 42%;
    height: 22%;
    background-color: rgb(255, 228, 75);
    border-radius: 10px;
    box-shadow: 0 0 10px rgb(255, 234, 116);
    opacity: 0;
    z-index: -1;
    transition: 0s;
}

#playAgain {
    margin: 5% auto;
    width: fit-content;
    height: 40%;
    cursor: pointer;
}

#victoryText {
    margin: 5% auto;
    color: white;
    text-align: center;
    height: 30%;
    font-size: min(2em, 5vw);
}

#retryArrow {
    height: 50%;
    margin: auto 0;
    vertical-align: middle;
    filter: invert(100%);
}

#retryText {
    margin: auto 0;
    font-size: min(1.5em, 4vw);
    vertical-align: middle;
    color: white;
}





.cell {
    cursor: pointer;
}






#sliderDiv {
    width: fit-content;
    margin-top: 2em;
    margin-bottom: 2em;
}

.label {
    font-size: min(1.5em, 7vw);
    vertical-align: middle;
    display: inline;
}

#slider {
    accent-color: rgb(255, 58, 58);
    cursor: pointer;
    vertical-align: middle;
    max-width: 30vw;
    width: 15em;
}