/* Sentence Login */
.sentence-login-background {
  position: absolute;
  z-index: -10;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(var(--earthAngle, 0deg), #ffcc70 0%, #c850c0 33%, #4158d0 66%, #111122 100%);
  background-size: 100% 250%;
}
@keyframes stars-animation {
  0% {
    opacity: 0.2;
  }
  2% {
    opacity: 1;
  }
  40% {
    opacity: 0.75;
  }
  50% {
    opacity: 0.25;
  }
  60% {
    opacity: 0.75;
  }
  100% {
    transform: rotate(360deg);
  }
}
.stars1{
  animation: stars-animation 240s linear infinite;
  background: center / 300px 300px round;
  bottom: min(-30vw, -30vh);
  left: min(-30vw, -30vh);
  position: absolute;
  right: min(-30vw, -30vh);
  top: min(-30vw, -30vh);
  background-image: 
    radial-gradient(
      1px 1px at 170px 100px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1px 1px at 160px 80px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1px 1px at 25px 5px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1.5px 1.5px at 50px 25px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1px 1px at 125px 20px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2px 2px at 50px 75px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2.5px 2.5px at 15px 125px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2.5px 2.5px at 165px 180px,
      white,
      rgba(255, 255, 255, 0)
    );
}
.stars2{
  animation: stars-animation 300s linear infinite;
  background: center / 250px 250px round;
  bottom: min(-30vw, -30vh);
  left: min(-30vw, -30vh);
  position: absolute;
  right: min(-30vw, -30vh);
  top: min(-30vw, -30vh);
  background-image: 
    radial-gradient(
      1px 1px at 75px 125px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1px 1px at 100px 75px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1.5px 1.5px at 199px 100px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2px 2px at 20px 50px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2px 2px at 100px 5px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2px 2px at 5px 5px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1.5px 1.5px at 150px 30px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1px 1px at 190px 190px,
      white,
      rgba(255, 255, 255, 0)
    );
}
.stars3{
  animation: stars-animation 180s linear infinite;
  background: center / 200px 200px round;
  bottom: min(-30vw, -30vh);
  left: min(-30vw, -30vh);
  position: absolute;
  right: min(-30vw, -30vh);
  top: min(-30vw, -30vh);
  background-image: 
    radial-gradient(
      1px 1px at 150px 150px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1px 1px at 60px 170px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1.5px 1.5px at 95px 145px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1.5px 1.5px at 140px 150px,
      white,
      rgba(255, 255, 255, 0)
    );
}
.stars4{
  animation: stars-animation 120s linear infinite;
  background: center;
  bottom: min(10vw, 10vh);
  left: min(10vw, 10vh);
  position: absolute;
  right: min(10vw, 10vh);
  top: min(10vw, 10vh);
  background-image: 
    radial-gradient(
      2px 2px at 100px 100px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2.5px 2.5px at 105px 80px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2px 2px at 125px 85px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1px 1px at 90px 60px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1.5px 1.5px at 80px 80px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2px 2px at 90px 85px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1px 1px at 90px 150px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1.5px 1.5px at 75px 140px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1.5px 1.5px at 55px 155px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      2px 2px at 130px 155px,
      white,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      1px 1px at 95px 170px,
      white,
      rgba(255, 255, 255, 0)
    );
}
.sentence-login-page {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
.sentence-login-validation {
  z-index: 10;
  justify-content: center;
  position: absolute;
  width: 80vw;
  top: 4vh;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway-VariableFont_wght.woff');
}
.greeting {
  margin:3vw;
  height:15vh;
  background-image: url('../pics.svg');
  opacity: 0.7;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.sentence-login-card {
  width: max(25vw, 250px);
  margin: auto;
  background-color: rgba(238, 232, 213, 0.1);
  background: radial-gradient(
    circle at bottom right,
    rgba(147, 161, 161, 0.05) 60%,
    rgba(0, 43, 54, 0.05) 10%,
    rgba(147, 161, 161, 0.05) 80%
  ),
  linear-gradient( rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
  border: 0;
}
.sentence-login-text {
  font-family: 'Raleway';
  text-align: center;
  color: rgb(240, 240, 240);
}
.sentence-login-entry-field {
  font-family: 'Raleway';
  background: rgba(255, 255, 255, 0.1);
  color: rgb(240, 240, 240);
  border: 0;
}
.sentence-login-entry-field:focus {
  background: rgba(240, 240, 240, 0.2);
  color: rgb(240, 240, 240);
  border: 0;
}
.sentence-login-entry-field::placeholder {
  color: rgb(240, 240, 240);
}
.sentence-login-button {
  font-family: 'Raleway';
  border: 0;
  background: rgb(147, 147, 161, 0.4);
  width: 100%;
}
.sentence-login-button:hover {
  background: rgba(147, 147, 161, 0.6);
}
.sentence-login-button:focus {
  background: rgba(147, 147, 161, 0.6);
}

.pin-login-entry-field {
  font-family: 'Raleway';
  font-size: 2rem;
  background: rgba(255, 255, 255, 0.1);
  color: rgb(240, 240, 240);
  border: 0;
  letter-spacing: 2rem;
  padding-left: 6rem; 
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1vw;
  margin-top: 2vh;
}

.keypad button {
  font-family: 'Raleway';
  background: rgba(255, 255, 255, 0.1);
  color: rgb(240, 240, 240);
  border: 0;
  padding: 1.5vh 0;
  font-size: 1.5rem;
}

.keypad .key,
.keypad #backspace,
.keypad #clear {
  position: relative;
  outline: none; /* we'll draw our own */
}

.keypad button.is-active {
  box-shadow: 0 0 0 3px #fff;
}

/* Optional: if you want keyboard focus to not show the browser outline */
.keypad button:focus {
  outline: none;
}