@import "fonts.css";

@keyframes collapse {
    to {
        margin: 0;
        width: 0
    }
}

@keyframes hide {
    0% {
        top: 0
    }

    to {
        top: -225px
    }
}

@keyframes appear {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

body {
    background-color: #fff;
    color: #000;
    user-select: none;
    overflow-x: hidden;
    font-family: 'Google Sans',sans-serif
}

.crown,.menu {
    margin: 45px auto;
    text-align: center
}

.crown {
    padding: 0 5px;
    font-weight: 400;
    transform: rotate(5deg);
    width: fit-content;
    border-bottom: 3px solid #000
}

.buttons>div,.menu>div {
    background: linear-gradient(0deg,rgba(255,255,0,.1) 0,rgba(0,255,0,.05) 50%,rgba(0,255,255,.1) 100%);
    display: inline-block;
    font-size: 34px;
    padding: 20px 40px;
    margin: 8px;
    width: 300px;
    transition: all .2s cubic-bezier(.63,2.03,.47,.17);
    border: 3px solid rgba(0,0,0,.1);
    overflow: hidden
}

.buttons>div:nth-child(odd),.menu>div:nth-child(odd) {
    filter: hue-rotate(275deg)
}

.buttons>div:hover,.start:not(.close)>.menu>div:hover {
    transform: scale(1.05) rotate(1deg);
    cursor: pointer
}

.buttons>div:active,.start:not(.close)>.menu>div:active {
    transform: scale(1.1) rotate(2deg)
}

.close>.menu>div {
    padding: 20px 0;
    animation: collapse .4s cubic-bezier(.27,-1.5,.83,.67) forwards
}

.close {
    position: relative;
    animation: hide .4s cubic-bezier(.27,-1.2,.83,.67) forwards;
    animation-delay: .2s
}

.main.show,.stats.show {
    display: block;
    animation: appear .4s cubic-bezier(.27,-1.2,.83,.67) forwards;
    animation-delay: .6s
}

.start {
    width: 100%;
    margin: 0 auto;
    position: absolute
}

.main,.stats {
    display: none;
    opacity: 0;
    text-align: center
}

.timer {
    padding-top: 35px;
    font-size: 45px;
    transition: all .5s cubic-bezier(.63,2.02,.53,.9)
}

.field {
    margin: 50px auto 0;
    max-width: 800px;
    width: 90%;
    height: 75px;
    padding: 0 5px 5px;
    font-size: 2em;
    text-align: justify;
    overflow: hidden;
    color: #202214;
    transition: height .2s ease
}

.field>span {
    padding: 0 5px;
    border-radius: 5px
}

.c {
    background-color: #ddd
}

.m {
    background-color: #f77
}

.r {
    color: #34a853
}

.w {
    color: #ea4335
}

#input {
    border: 0;
    outline: 0;
    background: 0;
    height: 80px;
    font-size: 2em;
    font-family: 'Google Sans',sans-serif;
    font-weight: 400;
    width: 100%;
    text-align: center;
    color: #444;
    transition: height .2s ease
}

.end.main .timer {
    margin: 25px 0 10px;
    font-size: 80px
}

.end.main .field {
    padding: 0;
    height: 0
}

.end.main #input {
    height: 0
}

.results {
    display: none;
    opacity: 0;
    font-size: 24px;
    color: #444;
    transition: opacity .5s ease;
    margin-bottom: 20px
}

.end.main .results {
    display: block;
    opacity: 1
}

.acc {
    font-size: 52px
}

.acc,.ar,.aw,.cpm,.wpm {
    color: #000
}

.cpm,.wpm {
    font-size: 52px
}

.ar,.aw {
    font-size: 32px
}

.buttons {
    margin-top: 70px
}

.overall {
    font-size: 18px;
    border-spacing: 0;
    width: 100%
}

.overall td:first-child {
    text-align: left
}

.overall td:last-child {
    font-size: 24px;
    text-align: right
}

.overall tr td {
    border-bottom: 2px solid #222
}

.cola {
    margin: 0 auto;
    max-width: 800px
}

.fanta {
    margin-top: 50px;
    margin-bottom: 10px;
    font-size: 32px
}

.item .acc,.item .cpm,.item .wpm {
    font-size: 34px
}

.item {
    margin: 10px
}

.item>div {
    background-color: #edbdac;
    border-radius: 15px;
    width: fit-content;
    padding: 0 20px;
    margin: 0 auto
}

::-webkit-scrollbar {
    background: 0 0;
    width: 5px
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.4);
    border-radius: 100px
}

.cola>.buttons {
    margin:30px;
}