:root{
    --border-size: 1px;
    --box-size: 80px;
    --box-padding: 10px;
    --grid-size: calc(20px + var(--box-size) * 3 + calc(var(--border-size) * 2));
    --border-style: dashed;
    --border-radius: 20px;

    /* COLORS */
    --color-outline: #B9C6AE;
    --color-bg-lighter3: #B9C6AE;
    --color-bg-lighter2: #8A95A5;
    --color-bg-lighter1: #8A95A5;
    --color-bg-base: #565E6F;
    --color-bg-darker1: #3C4354;
    --color-bg-darker2: #2F3546;
    --color-bg-darker3: #212738;

    --color-red-lighter1: #E54B4B;
    --color-red-base: #BB4D50;
    --color-red-darker1: #904E55;
}

*{
    box-sizing: border-box;
}

*::selection {
    color: white;
    background: var(--color-red-base);
}

html, body{
    margin: 0;
    --s: 150px;
    --c1: #3c4354;
    --c2: #2f3546;
    --_g: var(--c1) 0% 5%, var(--c2) 6% 15%, var(--c1) 16% 25%, var(--c2) 26% 35%, var(--c1) 36% 45%, var(--c2) 46% 55%, var(--c1) 56% 65%, var(--c2) 66% 75%, var(--c1) 76% 85%, var(--c2) 86% 95%, #0000 96%;
    background: radial-gradient(50% 50% at 100% 0, var(--_g)), radial-gradient(50% 50% at 0 100%, var(--_g)), radial-gradient(50% 50%, var(--_g)), radial-gradient(50% 50%, var(--_g)) calc(var(--s) / 2) calc(var(--s) / 2) var(--c1);
    background-size: var(--s) var(--s);font-family: arial;
}

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

.mid-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

h1{
    color: white;
    text-align: center;
    font-size: 48px;
}

.game h2{
    color: white;
    margin: 0;
    text-align: center;
}

.logo{
    position: relative;
    margin: 0;
    line-height: 50px;
}

.logo .play{
    position: absolute;
    margin-inline-start: 20px;
}

.play{
    background-color: var(--color-bg-darker1);
    border: 1px solid var(--color-outline);
    border-radius: 40px;
    padding: 15px 20px;
    font-size: 18px;
    color: white;
}

.result{
    position: absolute;
    top: 0;
    margin: 30px 0;
    background-color: var(--color-red-base);
    font-size: 18px;
}

button.play:hover{
    background-color: var(--color-bg-darker2);
}

.player{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 25px;
    width: 160px;
    background-color: var(--color-bg-darker1);
    border: var(--border-size) solid var(--color-outline);
    border-radius: var(--border-radius);
}

.player-symbol{
    width: 80px;
    height: 80px;
    margin: 30px;
    background-color: var(--color-bg-darker2);
    border: var(--border-size) solid var(--color-outline);
    border-radius: 50%;
}

.player-symbol .symbol{
    line-height: 80px;
}

.player h2{
    margin: 15px 5px 15px 5px;
    color: white;
    text-align: center;
    font-size: 20px;
}

.player.your-time{
    box-shadow: 0 0 10px var(--color-red-base);
}

.player.your-time .name{
    background-color: var(--color-red-base);
    width: 100%;
    height: 100%;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    color: white;
    text-align: center;
}

.name h2{
    word-break: break-word;
} 

.input-name{
    background-color: var(--color-red-base);
    width: 100%;
    height: 100%;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    border: 0;
    padding: 15px 5px 15px 5px;
    color: white;
    text-align: center;
    font-size: 20px;
}

.input-name::placeholder{
    color: var(--color-bg-lighter3);
    text-align: center;
    font-size: 20px;
}

.input-name:hover, .input-name:focus{
    background-color: var(--color-red-lighter1);
}

.symbol{
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 48px;
    text-align: center;
    margin: 0;
}

@media only screen and (max-width: 700px) {
    .vs {
        display: none;
    }

    .logo {
        font-size: 24px;
    }
}