.login-container {

  display: flex;

  box-sizing: border-box;

  width: 100%;

  height: 100%;

  background-color: #FFC58E;

  align-items: center;

  flex-direction: column;

  padding: 100px 16px 100px 16px;

  gap: 50px;

  position: relative;

  overflow: hidden;

}



.image-hobitton {

  aspect-ratio: 1 / 1;

  width: 100%;

  max-width: 500px;

  background-image: url("../resources/images/hobbiton.svg");

  background-size: contain;

  z-index: 5;

}



.login-form {

  width: 100%;

  max-width: 400px;

  display: flex;

  flex-direction: column;

  gap: 16px;

  z-index: 5;

}



.input-login {

  background-color: #ffe7d1;

  box-sizing: border-box;

  font-family: "Maitree", serif;

  font-weight: 500;

  font-size: 20px;

  color: #0F141F;

  height: 50px;

  width: 100%;

}



.button-login {

  background: #0F141F;

  font-family: "Inknut Antiqua";

  font-weight: 300;

  font-size: 20px;

  line-height: 150%;

  color: #FFC58E;

  padding: 10px 16px 10px 16px;

  border-radius: 10px;

  border: none;

  width: 280px;

  text-transform: uppercase;

  white-space: nowrap;

  height: 50px;

  width: 100%;

  transition: background 0.3s ease;

}



.button-login:active {

  background: #3A4458;

}



.login-form p {

  color: rgb(179, 25, 25);

  font-family: "Inknut Antiqua";

  font-weight: 300;

  font-size: 20px;

  text-align: center;

}



.ring-text {

  box-sizing: border-box;

  width: 1000px;

  height: 300px;

  background-image: url("../resources/images/ring-text.svg");

  background-size: contain;

  position: absolute;

  background-repeat: no-repeat;

  right: 0;

  z-index: 1;

  margin-top: 300px;

  transform: translateX(100px);

  opacity: 10%;

}



@media only screen and (max-width: 600px) {

  .ring-text {

    box-sizing: border-box;

    width: 500px;

    height: 100px;

    transform: translateX(200px);

  }

}