body {
   display: flex;
   box-sizing: border-box;
   height: calc(100vh - 16px);
   min-height: 650px;
   background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.57) 0%, rgba(0, 0, 0, 0.59) 100%),
      url('/background.png') no-repeat left/cover;
}

body .container {
   width: 100%;
   max-width: 1600px;
   margin: 0 auto;
   padding: 0 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
}

body .container .logo {
   width: 100%;
   max-width: 200px;
   height: auto;
   margin-bottom: 50px;
   margin-top: 30px;
}

body * {
   font-family: 'Montserrat', sans-serif;
}

#game-select {
   width: 100%;
   max-width: 300px;
   gap: 10px;
}

#game-select h2 {
   margin-bottom: 20px;
   text-transform: uppercase;
   /*font-size: 22px;*/
   color: #fff;
}

#game-select label,
#game-select h2 {
   color: #fff;
}

body input {
   padding-inline: 10px;
}

body input,
body select {
   margin-bottom: 10px;
}

body select {
   padding-inline: 7px;
}

body .new-user {
   display: flex;
   gap: 5px;
}

body .new-user input {
   flex: 1;
   height: 38px;
   border-radius: 5px;
   border: none;
}

body .new-user button {
   width: 40px;
   height: 40px;
   border: none;
   border-radius: 5px;
   background: #fff;
   position: relative;
   cursor: pointer;
}

body .new-user button:after {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 20px;
   height: 20px;
   content: '';
   background: url('/icon.svg') no-repeat center/contain;
}

#game-select p {
   margin: 0;
}

#game-select select,
#game-select button[type='submit'] {
   width: 100%;
   height: 40px;
   border: none;
   border-radius: 5px;
}

#game-select select {
   background-color: #f1f1f1;
}

#game-select button[type='submit'] {
   background: #c5960e;
   color: #000;
   font-weight: bold;
   transition: 0.25s all;
   cursor: pointer;
   text-transform: uppercase;
   margin-top: 10px;
}

#game-select button[type='submit']:hover {
   background: #8d6d09;
   color: #fff;
}

#game-select form {
   display: flex;
   color: #fff;
   font-size: 14px;
   flex-direction: column;
}

@media only screen and (min-width: 768px) {
   body {
      align-items: center;
      background-color: lightblue;
   }

   body .container {
      padding: 0 60px;
      align-items: flex-start;
   }

   body .container .logo {
      margin-top: 0;
   }
}