/* html, */
body {
    background: var(--default);
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    touch-action: none;
    touch-action: pan-y;
    margin: 0px;
}

* {
    touch-action: none;
    touch-action:pan-y;
}

@font-face {
    font-family: "Argentum Sans";
    src: url(../font/ArgentumSans-Regular.ttf) format("truetype");
}
@font-face {
    font-family: "Argentum Sans Bold";
    src: url(../font/ArgentumSans-Bold.ttf) format("truetype");
}
@font-face {
    font-family: "Argentum Sans Extra Bold";
    src: url(../font/ArgentumSans-Regular.ttf) format("truetype");
}

:root {
    --default: #000;
    --empty: #999;
    --wrong: #ffff64;
    --right: #00ff7b;
    --delete: #F0F;
    --enter: #007bff;
    --guess: #FFF;
}

body.light {
    --default: #FFF; 
    --empty: #CCC;
    --wrong: #ffff64;
    --right: #00ff7b;
    --delete: #F0F;
    --enter: #007bff;
    --guess: #000;
}

#ads.playing {
    pointer-events: none;
}
#ads.result {
    pointer-events: all;
}

#game-display {
    display: grid;
    place-items: center;
    width: 100%;
    padding-top: 60px;
    padding-bottom: 20px;
    /* height: 600px; */
}
#game {
    display: grid;
    place-items: center;
    width: 100%;
    padding-bottom: 100px;
    /* height: 600px; */
}
#header-container {
    display: grid;
    place-items: center;
    width: 100%;
    position: fixed;
    z-index: 1;
    position: fixed;
}
#header {
    display: grid;
    place-items: center;
    grid-template-columns: repeat(9, auto);
    /* grid-template-columns: 42x auto 42px; */
    width: 378px;
    height: 60px;
    /* position: fixed;
    top: 10px; */
}
#instructions-container {
    display: grid;
    place-items: center;
    width: 100%;
}
#result-container {
    display: grid;
    place-items: center;
    width: 100%;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    /* visibility: hidden; */
    display: grid;
    text-align: center;
    place-items: center;
    align-items:center;
    justify-items: center;
    /* opacity: 0.0; */
    background: var(--default);
    color: var(--enter);
    font-family: "Argentum Sans", Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    transition: transform 500ms;
}
#instructions-container {
    display: grid;
    place-items: center;
    width: 100%;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    /* visibility: visible; */
    display: grid;
    text-align: center;
    place-items: center;
    align-items:center;
    justify-items: center;
    /* opacity: 0.0; */
    background: var(--default);
    color: var(--enter);
    font-family: "Argentum Sans", Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    transition: transform 500ms;
}
ol {
    font-size: 0.9rem;
    font-weight: 400;
    text-align: left;
    color: var(--guess);
    line-height: 1.6em;
    margin: 20px;
    text-transform: uppercase;
}
li {
    margin-top: 6px;
    margin-bottom: 6px;
    margin-right: 20px;
}
span.right {
    color: var(--default);
    background-color: var(--right);
    padding: 4px;
    border-radius: 4px;
}
span.wrong {
    color: var(--default);
    background-color: var(--wrong);
    padding: 4px;
    border-radius: 4px;
}
span.empty {
    color: var(--default);
    background-color: var(--empty);
    padding: 4px;
    border-radius: 4px;
}
.links {
    margin: 30px;
    align-content: center;
    text-align: center;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
}
a.link {
    font-size: 0.7rem;
    font-weight: 600;
    position: relative;
    color: var(--default);
    background-color: var(--empty);
    padding: 4px;
    border-radius: 4px;
    margin: 5px;
    padding: 10px;
    padding-left: 12px;
    padding-right: 12px;
    display: inline;
    text-decoration: none;
}
body.light a.link
{
    color: var(--guess);
}
body.light span.right 
{
    color: var(--guess);
}
body.light span.wrong 
{
    color: var(--guess);
}
body.light span.empty 
{
    color: var(--guess);
}
span.dont-panic {
    background-color: var(--delete);
    color: var(--default);
    padding: 4px;
    border-radius: 4px;
}
body.light span.dont-panic 
{
    color: var(--guess);
}
.clue {
    color: var(--enter);
}

body.light li.right {
    color: var(--guess);
    /* text-decoration: underline; */
    /* background-color: var(--right); */
}
body.light li.wrong {
    color: var(--guess);
}
body.light li.empty {
    color: var(--empty);
}
body.light li.dont-panic {
    color: var(--delete);
}
body.light li.clue {
    color: var(--guess);
}

#stats {
    display: grid;
    grid-template-rows: repeat(2, auto);
    grid-template-columns: repeat(3, auto);
    margin: 5px;
}
.statistic {
    margin: 5px;
}
.statistic-value {
    color: var(--guess);
    font-size: 1.8em;
    font-weight: 300;
}
.statistic-label {
    columns: var(--guess);
    font-size: 0.6em;
}
.statistic-label.won {
    color: var(--enter);
}
.statistic-label.lost {
    color: var(--empty);
}
.statistic-label.streak {
    color: var(--delete);
}
body.light div.statistic-label.won {
    color: var(--guess);
}
.puzzle.song {
    background: none;
    background-image: url(/image/song.svg);
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
}
.puzzle.movie {
    background: none;
    background-image: url(/image/movie.svg);
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
}
body.light div.puzzle {
    filter: invert(1);
}

.settings {
    background: none;
    /* background-image: url(/image/settings.svg); */
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
}

.palette {
    background: none;
    background-image: url(/image/light.svg);
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    cursor: pointer;
}

body.light div.palette {
    background: none;
    background-image: url(/image/dark.svg);
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
    background-size: 32px 32px;
    cursor: pointer;
}

.logo {
    background-image: url('../image/wordghetti.png');
    height:60px;
    width: 180px;
    background-size: 180px 60px;
    grid-column: span 7;
}
body.light div.logo {
    filter: invert(1);
}
#start-container {
    display: grid;
    place-items: center;
    width: 100%;
    /* max-width: 378px; */
    /* height: 600px; */
}
#start-controls {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100px;
    grid-template-columns: 120px 138px 120px;
    grid-template-columns: repeat(3, auto);

    position: fixed;
    bottom: 10px;
}
#next-container {
    display: grid;
    place-items: center;
    width: 100%;
    /* max-width: 378px; */
    /* height: 600px; */
}
#next-controls {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100px;
    grid-template-columns: 120px 98px 120px;
    grid-template-columns: repeat(3, auto);

    position: fixed;
    bottom: 10px;
}

#control-container {
    display: grid;
    place-items: center;
    width: 100%;
    /* max-width: 378px; */
    /* height: 600px; */
    position: fixed;
    bottom: 10px;
}
#controls {
    display: grid;
    place-items: center;
    width: 378px;
    height: 100px;
    grid-template-columns: repeat(3, auto);
    /* grid-template-columns: 120px 118px 120px; */
}
.control-grid {
    /* display: grid; */
    /* grid-template-rows: repeat(9, auto); */
    /* grid-template-columns: repeat(9, auto); */
    /* grid-template-columns: 120px 118px 120px; */
    /* place-content: center; */
    /* margin: 10px; */
}

.grid {
    display: grid;
    grid-template-rows: repeat(9, auto);
    grid-template-columns: repeat(9, auto);
    /* margin: 10px; */
}

.box {
    position: relative;
    width: 36px;
    height: 36px;
    border: 1px solid var(--default);
    /* background: var(--wrong); */
    border-radius: 5px;
    margin: 2px;
    color: var(--guess);
    text-transform: uppercase;
    display: grid;
    place-items: center;
    font-family: "Argentum Sans", Arial, Helvetica, sans-serif;
    font-size: 1.0rem;
    transition: transform 100ms;
}
.box.bounce {
    transform: translateY(-10%);
}

.box.selected.board {
    border: 1px solid var(--guess);
}
.box.empty.board {
    color: var(--empty);
}
.box.wrong.board {
    border: 1px solid var(--wrong);
    color: var(--wrong);
}
.box.right.board {
    border: 1px solid var(--right);
    color: var(--right);
}

.box.guess.display {
    background: var(--guess);
    border: 1px solid var(--guess);
    color: var(--default);
}
.box.empty.display {
    background: var(--empty);
}
.box.wrong.display {
    background: var(--wrong);
    border: 1px solid var(--wrong);
    color: black;
}
.box.right.display {
    background: var(--right);
    border: 1px solid var(--right);
    color: var(--default);
}

body.light div.box.wrong.board {
    border: 1px solid var(--wrong);
    background-color: var(--wrong);
    color: var(--guess);
}
body.light div.box.right.board {
    border: 1px solid var(--right);
    background-color: var(--right);
    color: var(--guess);
}

body.light div.box.guess.display {
    background: var(--default);
    border: 1px solid var(--guess);
    color: var(--guess);
}
body.light div.box.empty.display {
    background: var(--empty);
}
body.light div.box.wrong.display {
    background: var(--wrong);
    border: 1px solid var(--wrong);
    color: var(--guess);
}
body.light div.box.right.display {
    background: var(--right);
    border: 1px solid var(--right);
    color: var(--guess);
}

.box.clickable {
    cursor: pointer;
}

.box .number {
    position:absolute;
    left: 0px;
    top: 0px;
    width: 10px;
    height: 10px;
    margin: 3px;
    text-transform: uppercase;
    /* display: grid;
    place-items: center; */
    font-family: "Argentum Sans Bold", Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 0.5rem;
    pointer-events: none;
}
.box .letter {
    pointer-events: none;
}

.button {
    position: relative;
    width: 100px;
    height: 58px;
    /* border: 1px solid var(--empty); */
    background: var(--empty);
    border-radius: 5px;
    margin: 3px;
    padding: 10px;
    color: black;
    /* text-transform: uppercase; */
    display: grid;
    align-items:end;
    justify-items: right;
    font-family: "Argentum Sans", Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 2;
}
.button.delete {
    background: none;
    background-image: url(/image/delete.svg);
    background-repeat: no-repeat;
}
.button.enter {
    background: none;
    background-image: url(/image/enter.svg);
    background-repeat: no-repeat;
}
.button.play {
    background: none;
    background-image: url(/image/play.svg);
    background-repeat: no-repeat;
    justify-items: baseline;
}
.button.again {
    background-color: var(--guess);
}
.attempt {
    position: relative;
    width: 100px;
    height: 58px;
    /* border: 1px solid var(--empty); */
    /* background: var(--empty); */
    border-radius: 5px;
    margin: 3px;
    padding: 10px;
    color: var(--guess);
    text-transform: uppercase;
    display: grid;
    place-items: center;
    font-family: "Argentum Sans", Arial, Helvetica, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: .2rem;
}
#result-loss {
    position: absolute;
    /* padding: 40px; */
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    visibility: hidden;
    display: grid;
    text-align: center;
    place-items: center;
    align-items:center;
    justify-items: center;
    /* width: 100%;
    height: 100%; */
    background: rgba(0,0,0,0.75);
    color: var(--delete);
    font-family: "Argentum Sans", Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}
#result-win {
    position: absolute;
    /* padding: 40px; */
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    visibility: hidden;
    display: grid;
    text-align: center;
    place-items: center;
    align-items:center;
    justify-items: center;
    /* width: 100%; */
    /* height: 100%; */
    background: rgba(0,0,0,0.75);
    color: var(--enter);
    font-family: "Argentum Sans", Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
}
#result-win.visible {
    visibility: visible;
}
#result-loss.visible {
    visibility: visible;
}
.fadein {
    animation: fadein 500ms ease-in;
}
.fadeout {
    animation: fadeout 500ms ease-in;
}
.hidden {
    visibility: hidden;
}
.visible {
    visibility: visible;
}

@keyframes fade {
    0% {
        opacity: 0.0;
    }
    100% {
        opacity: 1.0;
        visibility: visible;
    }
}
@keyframes fadein {
    0% {
        opacity: 0.0;
        visibility: visible;
    }
    100% {
        opacity: 1.0;
        visibility: visible;
    }
}


@keyframes fadeout {
    0% {
        opacity: 1.0;
        visibility: visible;
    }
    100% {
        opacity: 0.0;
        /* visibility: hidden; */
    }
}
.answer {
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--guess);
}
.answer-label {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--guess);
}
.answer-label.won {
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--enter);
}
.answer-label.lost {
    font-size: 0.6rem;
    font-weight: 400;
    color: var(--delete);
}
.shake {
    animation: shake 400ms ease-in;
}
#content-container 
{
    display: grid;
    place-items: center;
    width: auto;
    margin-left: 40px;
    margin-right: 40px;
    font-family: "Argentum Sans Bold", Arial, Helvetica, sans-serif;
}
.top {
    margin-top: 80px;
}
.heading {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--delete);
    text-transform: uppercase;
}

.content {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--guess);
    line-height: 1.6em;
    margin: 20px;
    text-transform: uppercase;
    text-align: left;
}

a {
    color: var(--default);
    background-color: var(--right);
    padding: 4px;
    border-radius: 4px;
    text-decoration: none;
}
body.light a {
    color: var(--guess);
}
@keyframes shake {
    10% {
        transform: translateX(-1%);
    }
    30% {
        transform: translateX(2%);
    }
    50% {
        transform: translateX(-3%);
    }
    70% {
        transform: translateX(3%);
    }
    90% {
        transform: translateX(-2%);
    }
    100% {
        transform: translateX(0%);
    }
}

.shake-delete {
    animation: shake-delete 200ms ease-in;
}

@keyframes shake-delete {
    /* 10% {
        transform: translateX(-1%);
    }
    /* 30% {
        transform: translateX(2%);
    } */ 
    50% {
        transform: translateX(-1%);
    }
    /* 70% {
        transform: translateX(3%);
    } */
    /* 90% {
        transform: translateX(-2%);
    } */
    100% {
        transform: translateX(0%);
    }
}

@media only screen and (max-width: 400px)  
{
    .box {
        width: 36px;
        height: 36px;
        margin: 1px;
    }
    .button {
        width: 100px;
        height: 58px;
        background-size: 100px 58px;
    }
    #controls {
        grid-template-columns: 120px 98px 120px;
    }    
    #next-controls {
        grid-template-columns: 120px 98px 120px;
    }   
}

@media only screen and (max-width: 360px)  
{
    .box {
        width: 30px;
        height: 30px;
        margin: 1px;
    }
    #controls {
        grid-template-columns: 100px 68px 100px;
    }    
    #next-controls {
        grid-template-columns: 100px 68px 100px;
    }    
}