@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    background-color: #0D0D0D;
    font-family: 'Averia Serif Libre', serif;
    color:white;
}

body > div {
    padding: 40px 0px;
}

nav {
    display: flex;
    background-color:#1f2223;
    color:white;
    font-size:48px;
    font-weight:700;
    padding:10px 20px 10px 10px;
    justify-content: space-between;
    align-items:center;
}

#title {
    display:flex;
}

#login {
    display:flex;
    flex-direction:column;
    align-items:center;
}

#login p, #login a {
 font-size:30px;
}

#login a:nth-child(2) {
    font-size:13px;
}

nav h1 {
    align-content: center;
}

nav a {
    font-size: 50px;
}

input, option, select {
    color:black;
}

#selector > div {
    display:flex;
    flex-grow:1;
    height:-webkit-fill-available;
}

#register form, #login form, #top form, #addChoice form, #playerGame form {
    width:fit-content;
    font-size:20px;
    justify-items:center;
}

#register form > div, #login form > div, #top form div div, #addChoice div, #playerGame div {
    display:flex;
    margin-bottom:10px;
}

#register label, #login label, #top label, #addChoice label, #playerGame label {
    display:flex;
    background-color: #1f2223;
    padding:20px;
    width:200px;
    justify-content:center;
}

#register input, #login input, #top input, #top select, #addChoice input, #playerGame input {
    padding: 20px;
}

#register button, #login button, #top button, #addChoice button, #playerGame button {
    background-color: rgb(7 89 133);
    padding: 10px 20px;
    margin-top:20px;
}

.answer {
    display:none;
}