@font-face {
  font-family: "Poppins";
  src: url(assets/fonts/Poppins-Regular.ttf);
}
@font-face {
  font-family: "Poppins-Bold";
  src: url(assets/fonts/Poppins-Bold.ttf);
}
@font-face {
  font-family: "Poppins-Bolder";
  src: url(assets/fonts/Poppins-ExtraBold.ttf);
}
:root{
  --purple:hsl(259, 100%, 65%);
  --red:hsl(0, 100%, 67%);
}
html{
  color-scheme: light;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins-Bold";
}
body{
  background-color:hsl(0, 0%, 94%);
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container{
  background-color:rgb(255, 255, 255);
  width: 600px;
  padding: 3rem;
  border-radius:20px;
  border-bottom-right-radius: 150px;
}
#form{
  display: flex;
  align-items: center;
  gap: 2em;
  width: 100%;
  padding-block: 1rem;
  border-bottom: 1px solid grey;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
}
#form .input{
  display: flex;
  flex-direction: column;
  color: grey;
  position: relative;
  gap: .3rem;
}
#form .input label{
  font-size: smaller;
}
.input.error label{
  color: var(--red);
}
#form .input input{
  width: 120px;
  height: 50px;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: 2em;
  padding: .5rem;
  padding-right: 0;
  outline: none;
  box-shadow: none;
  border: 1px solid grey;
  -moz-appearance: textfield;

  &::-webkit-inner-spin-button,&::-webkit-outer-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }

  &:focus{
    border-color: var(--purple);
  }
}
.input.error input{
  border-color: var(--red);
}

#form .input small{
  text-transform:none;
  font-family: "Poppins";
  font-weight: lighter;
  font-style: italic;
  text-wrap: nowrap;
  color: var(--red);
  font-size: .7rem;
  height: 1rem;
}
#form button{
  background-color: var(--purple);
  border-radius: 50%;
  padding: 1rem;
  border: none;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translateY(50%);
  cursor: pointer;

  &:hover{
    background-color: grey;
  }
}
#form button img{
  transform: scale(.8);
}
.results{
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-top: 1em;
}
.results p{
  font-family: "Poppins-Bolder";
  font-size: 4em;
  font-weight: bolder;
  line-height: 1.2em;
  font-style: italic;
}
.results p span{
  color: var(--purple);
  font-size: 1.2em;
  margin-right: 5px;
}


@media (max-width:660px) {
  .container{
    padding:2em;
    width: 350px;
  }
  #form{
    gap: 1em;
    margin-inline: auto;
    width: fit-content;
    height: max-content;
    padding-bottom: 3em;
  }
  #form .input input{
    width:80px;
    font-size:1rem ;
    padding: .5rem;
  }
  #form button{
    right: 50%;
    
    transform: translateX(50%) translateY(50%);
  }
  .results{
    margin-top: 3em;
  }
  .results p{
    font-size: 3em;
  }
  .results p span{
    font-size: 1em;
  }
  #form .input small{
    text-wrap: wrap;
    color: var(--red);
    font-size: .7rem;
   
  }
  
}