html {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  display: block;
  left: 0;
  top: 0;
  height: 100%;
  min-height: 1080px;
  width: 100%;
  min-width: 1460px;
  background-image: url('./assets/BG.jpg');
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center 0;
  background-color: #3e2914;
}

#mobile-wrapper {
  display: none;
}

#desktop-wrapper {
  display: block;
}

@media screen and (max-width: 1900px) {
  html {
    width: 1900px;
  }
}

.form--input {
  display: flex;
  width: 1470px;
  margin: auto;
  padding-top: 250px;
}

.code--input {
  width: 35%;
  display: flex;
  flex-direction: column;
  margin: auto;
  margin-top: 179px;
}

.key--input {
  margin-top: 25px;
}

.progress-bar-wrapper {
  width: 82%;
  display: flex;
  margin-top: 97px;
  margin-left: 45px;
  height: 61px;
}

.blue-bar {
  object-fit: cover;
  background-image: url('./assets/blue-bar.png');
  color: #FABE2F;
  font-size: 35px;
}

.red-bar {
  object-fit: cover;
  background-image: url('./assets/red-bar.png');
  color: #FABE2F;
  font-size: 35px;
}

.portrait-btn {
  display: block;
  width: 375px;
  height: 375px;
  border-radius: 100%;
}

.error--info {
  margin-top: 70px;
}


.louis-btn {
  margin-left: 53px;
}

.charles-btn {
  margin-right: 53px;
}

.form--input:hover > .portrait-btn:hover {
  box-shadow: 0px 0px 200px 100px rgba(255, 215, 0, 0.5);
}