body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: #1f1f33;
  display: flex;
  justify-content: center;
  align-items: center;
}

.panel {
  background: url(/static/panel.png);
  background-repeat: no-repeat;
  background-size: 85%;
  background-position-x: center;
  width: 100vmin;
  min-width: min(100%, 100vmin);
  height: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -20px;
  padding-bottom: 30px;
}

label {
  color: white;
  font-family: serif;
  text-align: center;
}

.flag-container {
  background: #886622;
  width: 65%;
  height: max-content; 
  border: solid 2px #aa8855;
  padding: 2px;
  border-radius: 5px;
  margin-top: 6%;
  display: flex;
  box-shadow: 0 0 2px 1px darkorange, 0 0 15px 3px black;
}

.flag {
  width: 100%;
  margin: auto;
  border-radius: 5px;
  box-shadow: inset 0px 0px 50px 50px #00000066;
}

.input-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 5%;
  margin-bottom: 10%;
  width: 70%;
  height: 5vmin;
}

.input-field {
  margin-right: 20px;
  font-size: 3vmin;
  color: white;
  font-family: serif;
  border: none;
  border-radius: 10px;
  padding: 0.7vmin;
  padding-left: 1.2vmin;
  height: 4vmin;
  width: 80%;
  box-shadow: inset 0 0 15px 1px #000000aa;
  background: transparent;
}

.input-field:focus {
  outline: none;
}

.skip-button {
  background: url(/static/skip_button.png) no-repeat;
  background-size: contain;
  width: fit-content;
  padding-left: 4.2vmin;
  padding-right: 4.2vmin;
  font-family: serif;
  color: white;
  border: none;
  height: 100%;
  font-size: 2.9vmin;
}

.skip-button:hover {
  background: url(/static/skip_button_hover.png) no-repeat;
  background-size: cover;
}