@font-face {
  font-family: "poppins-bold" ;
  src: url("./assets/fonts/Poppins-Bold.ttf");
}

@font-face {
  font-family: 'poppins-extrabolditalic';
  src: url("./assets/fonts/Poppins-ExtraBoldItalic.ttf");
}
@font-face {
  font-family: "poppins-italic";
  src: url("./assets/fonts/Poppins-Italic.ttf");
}

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

:root{
  --body-color: #F0F0F0;
  --violet: #864CFF;
  --text-color: #141414;
  --red-warning: #FF5358;
}

.hidden{
  visibility: hidden;
}

body{
  width: 100%;
  height: 100dvh;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--body-color);
  font-family: poppins-bold Arial, Helvetica, sans-serif;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.container{
  width: 90%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  padding: 30px 20px;
  border-radius: 20px 20px 100px 20px;
  background-color: #fff;
  box-shadow: 6px 4px 12px 7px rgba(187,187,187,0.75);
  
  header{
    width: 100%;
    max-width: 650px;
    display: flex;
    justify-content: space-between;
    font-family: poppins-bold, Arial, Helvetica, sans-serif;
    gap: 15px;

    label{
      text-align: start;
      font-size: 12px;
      color: gray;
      letter-spacing: 2px;
    }

    span{
      font-size: 8px;
      color: var(--red-warning);
      font-family: poppins-italic;
    }

    input{
      width: 100%;
      border: 1px solid grey;
      border-radius: 8px;
      padding: 16px;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 1px;
      box-shadow: 10px;
      color: black;
      
    }
    input:focus{
      outline: none;
      border-color: var(--violet);
    }
  }

  #btn{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    span{
      width: 80%;
      max-width: 850px;
      height: 2px;
      position: absolute;
      background-color: var(--body-color);
    }

    button{
      width: 80px;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: var(--violet);
      border-radius: 100%;
      border: none;
      cursor: pointer;
      z-index: 1;
      
      svg{
        border-radius: 100%;
        border: none;
        background-color: var(--violet);
        
      }
    }
    button:hover{
      opacity: 0.8;
    }
    button:active{
      background-color: var(--text-color);
      opacity: 1;
      svg{
        background-color: var(--text-color);
      }
    }
  }
  h1{
    font-size: 12px;
    color: var(--text-color);
    a{
      color: var(--violet);
    }
  }
  
  #result{
    width: 100%;
    display: flex;
    align-items: start;
    flex-direction: column;
    font-size: clamp(48px, 12vw, 96px);
    
    p{
      height: 6rem;
      display: flex;
      gap: 20px;
      font-family: poppins-extrabolditalic; 
    }
    .dates{
      color: var(--violet);
    }
  }
}

@media (min-width: 750px) {
  .container{
    padding: 50px 70px;

    header{
      gap: 30px;

      span{
        font-size: 12px;
      }
    }
    #btn{
      justify-content: end;
    }
    #result{
      flex-direction: row;
      align-items: end;
      justify-content: space-between;
    }
  }
}