.container-login { display: flex; width: 100%; height: 100dvh; flex-direction: column; justify-content: center; align-items: center; } .container-login h1 { font-size: 100px; } .container-login form { text-align: center; padding: 30px; } .container-login form h2 { margin-bottom: 20px; font-size: 30px; text-transform: capitalize; } .container-login form input { margin-bottom: 10px; width: 200px; height: 30px; border-radius: 6px; text-align: center; background-color: black; border: 1px solid white; color: white; } .container-login form input::placeholder { color: #919191; } .container-login form button { border-radius: 6px; width: 200px; height: 30px; margin-top: 40px; font-size: 30px } .container-login form button:hover { border-radius: 6px; width: 200px; height: 30px; margin-top: 40px; font-size: 30px; } .container-login form p { margin-top: 10px; } .container-login form p a { color: white; text-decoration: none; } .container-login form p a span { color: yellow; } .container-register { display: flex; width: 100%; height: 100dvh; flex-direction: column; justify-content: center; align-items: center; } .container-register h1 { font-size: 100px; } .container-register form { text-align: center; padding: 30px; } .container-register form h2 { margin-bottom: 20px; font-size: 30px; text-transform: capitalize; } .container-register form input { margin-bottom: 10px; width: 200px; height: 30px; border-radius: 6px; text-align: center; background-color: black; border: 1px solid white; color: white; } .container-register form input::placeholder { color: #919191; } .container-register form button { border-radius: 6px; width: 200px; height: 30px; margin-top: 40px; font-size: 30px } .container-register form button:hover { border-radius: 6px; width: 200px; height: 30px; margin-top: 40px; font-size: 30px; } .container-register form p { margin-top: 10px; } .container-register form p a { color: white; text-decoration: none; } .container-register form p a span { color: yellow; } .container-board { display: flex; justify-content: space-around; align-items: center; height: 100dvh; } .container-board .chara { display: flex; flex-direction: column; justify-content: space-around; align-items: center; } .container-board .chara .character { display: flex; width: 100%; justify-content: center; align-items: center; flex-direction: column; } .container-board .chara .character img { width: 300px; image-rendering: pixelated; margin: 20px; } .container-board .menu { margin: 0 auto; border-radius: 10px; width: 400px; border: 1px solid; height: 40px; align-content: center; } .container-board table { margin: 0 auto; border-radius: 10px; width: 400px; border: 1px solid; height: 40px; align-content: center; }