@import url('/static/variables.css?v=59beab6');

@font-face {
    font-family: 'Lora';
    src: url('/static/fonts/Lora/Lora-Regular.ttf') format('truetype');
    font-display: fallback;
}

body, html {
    width: 100%;
    height: 100%;
}
body {
    margin: 0px;
    font-family: Lora;

    /* background-image: radial-gradient(color-mix(in hsl, var(--bg-bottom), black 4%) 1.3px, color-mix(in hsl, var(--bg-top), black 4%) 1.3px);
    background-size: 26px 26px; */
    background-image: radial-gradient(var(--bg-bottom) 1.3px, var(--bg-top) 1.3px);
    background-size: 26px 26px;
    border: 1px solid gray;
    border-radius: var(--half-radius);

    display: flex;
    flex-direction: column;
    justify-content: center;
}
* {
    box-sizing: border-box;
}

p, h1, a {
    background-color: var(--bg-top);
}

::selection {
    color: #FFF;
    background: rgba(0,0,0,0.8);
}

footer {
    text-align: center;
    padding: 20px;
    color: var(--dark-text);
}
footer a, footer a:visited, footer a:focus {
    color: var(--dark-text);
}

#main {
    margin: auto;
    padding: 50px;
    width: 100%;
    height: 100%;
    max-width: 600px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
}
#main header {
    display: flex;
    justify-content: center;
}
#main header h1 {
    border-bottom: 1px solid black;
    margin: 0px;
}
#main header h1 span {
    color: black;
    width: 3px;
    display: inline-block;
    position: relative;
    bottom: -5px;
    left: -2px;
}

#main #game-input {
    display: flex;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
#main #game-input input {
    min-width: 0px;
    height: 50px;
    flex-grow: 1;
    border: 1px solid black;
    border-right: none;
    border-radius: var(--radius) 0px 0px var(--radius);

    padding: 5px 10px;
    font-size: 1.5em;
    font-family: Lora;
}
#main #game-input button {
    width: 100px;
    border: 1px solid black;
    border-left: 1px solid gray;
    border-radius: 0px var(--radius) var(--radius) 0px;
    
    font-size: 1.1em;
    font-family: Lora;
    cursor: pointer;
    
    background-color: var(--accent-button);
    transition: background-color 0.1s;
}
#main #game-input button:hover {
    background-color: var(--accent-button-hovered);
}