* {
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin: 0;
    padding: 0;
}
body {
    overflow: auto;
}

div.main {
    height: 100vw;
    height: 100vh;
    padding: 36px;
    background-image: url('images/ai-generated-8561141_1920.jpg');
    background-color: transparent;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* get-user */
div.user {
    position: absolute;
    background-color: #0feeba;
    width: 95vw;
    height: 90vh;
    z-index: 1000;
    border-radius: 24px;
    display:flex;
    flex-direction: column;
    align-items: center;
}

div.user-input {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 75%;
    background-color: white;
    border: 2px solid blue;
    border-radius: 24px;
    text-align: center;
    padding: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    color: red;
}

div.user-input input {
    margin-top: 1em;
    padding: 0.5em;
    width: 50%;
    height: 3em;
    border: 0.5px solid black;
    border-radius: 12px;
}

div.user-input div {
    width: 30%;
    color: #c4c5c7;
}
div.user-input label.username {
font-size: large;
}
div.game-number {
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 60px;
}

div.num {
    width: 35px;
    height: 20px;
    padding: 8px 12px;
    border: 2px solid white;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* game */
div.container__game {
    width: 50%;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
}

h1 {
    text-align: center;
    background-color: #ffffff;
    width: 30%;
    height: 10%;
    padding: 10px;
}

div.game {
    position: relative;
    margin: 24px;
    background-color: #5dec64;
    width: 100%;
    height: 100%;
    border-radius: 90px;
    border: 2px solid #ffffff;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
}

div.game--board {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 70%;
    background-color: #fafafc;
    border: 0.5px solid grey;
    cursor: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

div.number {
    background-image: linear-gradient(to right top, #c4c5c7, #cfcfd1, #e1dfe1, #f3f0f1, #fdfcfc);
    outline: 2px outset rgb(5, 134, 209);
    border-radius: 12px;
    width: 16%;
    height: 13%;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

div.number:hover {
    border: 2px solid rgb(252, 253, 233);
}

button.btn--start {
    background-color: #ffffff;
    padding: 8px 12px;
    border: 5px solid #ff3094;
    border-radius: 24px;
    font-size: 16px;
    cursor: pointer;
}

button.btn--start:hover {
    background-color: rgb(18, 103, 145);
    color: white
}

div.directions--button {
    display: flex;
    justify-content: center;
    gap: 0.5em;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

button.go {
    padding: 12px 4px;
    font-size: 16px;
    background-color: white;
    border-radius: 24px;
    border: 1px solid black;
    font-weight: bolder;
}

button.left,
button.right,
button.top {
    width: 3.5em;
    height: 3.5em;
    background-color: transparent;
    color: transparent;
    border: none;
}

button.left img,
button.right img,
button.top img {
    width: 100%;
}

button:hover img,
button.right:hover img,
button.top:hover img {
    transform: scale(1.15);
}

button.go {
    padding: 12px 4px;
    font-size: 16px;
    background-color: white;
    border-radius: 24px;
    border: 3px solid blue;
    font-weight: bolder;
}

button.back {
    font-size: 14px;
    width: 2.5em;
}

button.left:hover,
button.right:hover,
button.top:hover {
    color: rgb(156, 156, 157);
}

button.go:hover,
button.back:hover {
    transform: scale(1.15);
    color: rgb(156, 156, 157);
}

div.panel--tools {
    height: 500px;
    width: 45%;
    background-image: linear-gradient(to bottom, rgb(253, 205, 242), rgba(255, 255, 255, 0.7));
    border-radius: 90px;
    border: 2px solid #ffffff;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

label.label {
    text-align: center;
}

label.label span {
    text-align: left;
}

button.new-game {
    padding: 8px;
    font-size: 20px;
    border-radius: 24px;
    border: 1px solid black;
    font-weight: bolder;
}

button.new-game:hover {
    transform: scale(1.15);
    background-color: rgb(204, 204, 205);
}

div.panel--tools .input--data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 70%;
}

input.data {
    padding: 12px;
    font-size: 16px;
}

::placeholder {
    color: rgb(205, 203, 203);
    opacity: 1;
}

.input--data div {
    color: blue;
    text-align: left;
}

div.panel--tools .tools--board {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 15%;
    background-color: #ffffff;
}

div.tool--board h3 {
    margin: auto;
    text-align: center;
    font-size: 32px;
    color: blue;
}

div.time {
    width: 300px;
    position: relative;
}

div.time p {
    margin-top: 0.5em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    text-align: center;
    max-width: 70%;
}

div.panel--tools div.time {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

div.main div.game-theme {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 60px;
    height: 240px;
    padding: 12px;
    border: 2px solid white;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    background-color: rgb(217, 218, 218);
}

div.main div.game-theme div.num:hover {
    transform: scale(1.2);
}