@import url('https://fonts.googleapis.com/css?family=Cambay:400');

body{
    font-family: 'Cambay', sans-serif;
    font-weight: 400;
    margin: 0px;
    height: 100vh;
    overflow: hidden;
}
h2{
    margin-bottom: 10px;
}
a:link, a:visited{
    color: black;
}
#gameContainer, #game, #background, #backgroundCover{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}
#background, #backgroundCover{
    object-fit: cover;
}
#background{
    position:relative;
}
#attribution{
    position: relative;
    top: -4.3em;
    width: fit-content;
    margin-left: 1em;
    font-size: 0.8em;
    padding: 3px 8px;
    border-radius: 15px;
    background: lightblue;
    box-shadow: #567b87 inset 1px -1px,
                #87b4c3 inset 2px -2px,
                #b0ced7 inset 3px -3px,
                #eff5f6 inset -1px 1px,
                #e1eef2 inset -2px 2px,
                #c8e2eb inset -3px 3px,
                #c3d6dc inset -4px 4px;

}
.words{
    display: block;
    position: absolute;
    width: auto;
}
.preLetters, .untypedLetters, .typedLetters{
    display: inline-block;
    position: relative;
}
.preLetters{
    color: black;
    background: white;
    border-radius: 50px 50px 50px 50px;
    border: solid white;
    border-width: 2px 10px 0px 10px;
    box-shadow: white 0px 0px 6px 1px;
}
.untypedLetters{
    color: black;
    background: white;
    border-radius: 0 50px 50px 0;
    border: solid white;
    border-width: 2px 10px 0px 0px;
    box-shadow: white 0px 0px 6px 1px;
}
.typedLetters{
    color: red;
    background: aqua;
    border-radius: 50px 0 0 50px;
    border: solid aqua;
    border-width: 2px 0px 0px 10px;
    box-shadow: aqua 0px 0px 6px 1px;
    z-index: 1;
}
.postLetters{
    color: red;
    border-radius: 50px 50px 50px 50px;
    background: aqua;
    border: solid aqua;
    line-height: 15px;
    border-width: 2px 3px 0px 3px;
    box-shadow: aqua 0px 0px 6px 1px;
    position: absolute;
}
.deadLetters{
    border-radius: 50px 50px 50px 50px;
    border: solid black;
    border-width: 2px 3px 0px 3px;
    box-shadow: black 0px 0px 10px 3px;
    line-height: 15px;
    color: maroon;
    background-color: black;
    transition: border 1s, box-shadow 1s, color 1s, background-color 1s;
    position: absolute;
}
#rule{
    position: absolute;
}
.horizontalRule{
    border-top: black solid 0.5px;
    top: 95%;
    width: 0%;
    height: 0px;
    right: 5%;
}
.horizontalRuleExpand{
    width: 90%;
    box-shadow: white 0 0 3px 1px;
    transition: 3s;
}
.verticalRule{
    border-right: black solid 0.5px;
    right: 95%;
    width: 0px;
    height: 0%;
    top: 5%;
}
.verticalRuleExpand{
    height: 90%;
    box-shadow: white 0 0 3px 1px;
    transition: 3s;
}
#welcome{
    position: absolute;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 40px;
    left: 0px;
    right: 0px;
    top: 30%;
    max-width: 85%;
    width: 450px;
    background: lightblue;
    box-shadow: rgb(100 100 100) -1px 1px,
                rgb(100 100 100 / 20%) -2px 2px,
                rgb(100 100 100 / 20%) -3px 3px,
                rgb(100 100 100 / 20%) -4px 4px,
                rgb(100 100 100 / 20%) -5px 5px,
                #567b87 inset 1px -1px,
                #87b4c3 inset 2px -2px,
                #b0ced7 inset 3px -3px,
                #eff5f6 inset -1px 1px,
                #e1eef2 inset -2px 2px,
                #c8e2eb inset -3px 3px,
                #c3d6dc inset -4px 4px;
    transition: 1s;
}
#gameOver{
    position: absolute;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 40px;
    left: 0px;
    right: 0px;
    top: 10%;
    max-width: 85%;
    max-height: 80%;
    width: 600px;
    padding-bottom: 20px;
    background: lightblue;
    box-shadow: rgb(100 100 100) -1px 1px,
                rgb(100 100 100 / 20%) -2px 2px,
                rgb(100 100 100 / 20%) -3px 3px,
                rgb(100 100 100 / 20%) -4px 4px,
                rgb(100 100 100 / 20%) -5px 5px,
                #567b87 inset 1px -1px,
                #87b4c3 inset 2px -2px,
                #b0ced7 inset 3px -3px,
                #eff5f6 inset -1px 1px,
                #e1eef2 inset -2px 2px,
                #c8e2eb inset -3px 3px,
                #c3d6dc inset -4px 4px;
    transition: 1s;
    -ms-overflow-style: none; /*IE and Edge*/
    scrollbar-width: none; /*Firefox*/
}
#gameOver::-webkit-scrollbar{/*chrome, safari and opera*/
    display:none;
}
#stats div, #scores div{
    display: flex;
    /*flex-direction: column;*/
}
#stats div span, #scores div span{
    flex: 1;
}
#stats div span:first-of-type{
    text-align: right;
    padding-right: 5px;
    padding-left: 20px;
}
#scores div span:first-of-type{
    text-align: right;
    margin-right: 5px;
    margin-left: 20px;
}
#scores div span:nth-of-type(2){
    text-align: left;
    margin-right: 5px;
    margin-left: 5px;
    flex: 10;
}
#stats div span:last-of-type, #scores div span:last-of-type{
    padding-left: 5px;
    padding-right: 20px;
    text-align: left;
}
#scores{
    overflow-y: auto;
    z-index: 2;
    height: 275px;
    padding-top: 10px;
    -ms-overflow-style: none; /*IE and Edge*/
    scrollbar-width: none; /*Firefox*/
}
#scores::-webkit-scrollbar{/*chrome, safari and opera*/
    display:none;
}
#scores::after{
    content: '';
    height: 285px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    width: auto;
    box-shadow: lightblue inset 0px -1px,
    rgba(173, 216, 230, 0.9) inset 0px -2px,
    rgba(173, 216, 230, 0.8) inset 0px -3px,
    rgba(173, 216, 230, 0.7) inset 0px -4px,
    rgba(173, 216, 230, 0.6) inset 0px -5px,
    rgba(173, 216, 230, 0.5) inset 0px -6px,
    rgba(173, 216, 230, 0.4) inset 0px -7px,
    rgba(173, 216, 230, 0.3) inset 0px -8px,
    rgba(173, 216, 230, 0.2) inset 0px -9px,
    rgba(173, 216, 230, 0.1) inset 0px -10px,
    lightblue inset 0px 1px,
    rgba(173, 216, 230, 0.9) inset 0px 2px,
    rgba(173, 216, 230, 0.8) inset 0px 3px,
    rgba(173, 216, 230, 0.7) inset 0px 4px,
    rgba(173, 216, 230, 0.6) inset 0px 5px,
    rgba(173, 216, 230, 0.5) inset 0px 6px,
    rgba(173, 216, 230, 0.4) inset 0px 7px,
    rgba(173, 216, 230, 0.3) inset 0px 8px,
    rgba(173, 216, 230, 0.2) inset 0px 9px,
    rgba(173, 216, 230, 0.1) inset 0px 10px;

}
#roundInfo{
    font-size: 3em;
    color: maroon;
    text-shadow: black;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 30%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.7) 60%, rgba(0, 0, 0, 0) 70%);
    position: absolute;
    text-align: center;
    padding-top: 7px;
    top: 30%;
    width: 100%;
    transition: 1s;
}
.hidden{
    opacity: 0;
    transition: 2s;
}
#input{
    display: inline-block;
    text-align: center;
    vertical-align: top;
    margin: 0 0 1.5em 0;
    background: linear-gradient(90deg, transparent 0%, white 20%, white 80%, transparent 100%);
    border: none;
    padding: 0.25em 4em;
    height: 1.55em;
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    caret-color: transparent;
}
#phoneCover{
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background: transparent;
    border: none;
    width: 100%;
    height: 100%;
    caret-color: transparent;
    cursor: default;
}
#roundDiv{
    flex-flow: column;
}
.scoreInput{
    overflow: hidden;
    background: palegreen;
    color:darkred;
    white-space: nowrap;
}
#error{
    top: 90%;
    margin: auto;
    width: 50%;
}
@media only screen and (max-height: 716px) {
    #scores::after{
        display: none;
    }
  }
@media only screen and (max-width: 330px) {
    #gameOver{
        max-width: 95%;
    }
    #stats div span:first-of-type, #scores div span:first-of-type{
        padding-left: 5px;
    }
    #stats div span:last-of-type, #scores div span:last-of-type{
        padding-right: 5px;
    }
}