:root{
  --mobile-width: 375px;
  --desktop-width: 1440px;
  --purple500: hsl(259, 100%, 65%);
  --red400: hsl(0, 100%, 67%);
  --input-size: 32px;
  --white:hsl(0, 100%, 100%);
  --grey100:hsl(0, 0%, 94%);
  --grey200:hsl(0, 0%, 86%);
  --grey500:hsl(0, 1%, 44%);
  --black:hsl(0, 0%, 0%);
}

@font-face {
  font-family: "poppins regular", Verdana;
  src: url(./assets/fonts/Poppins-Regular.ttf);
}

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

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

body{
  max-width: var(--desktop-width);
  height: 90vh;
  font-family: "poppins regular";
  background-color: whitesmoke;
  display: flex;
  align-items: center;
  justify-content: center;
}

main{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: white;
  padding: 2rem;
  border-radius: 0 0 10rem 0;
}

.inputs-layout{
  display: grid;
  grid-template-columns: repeat(3, 105px) 60px;
  gap: 1rem;

  @media (max-width: 480px){
    grid-template-columns: repeat(3, 100px);
  } 
}

.label-input-layout{
  display: flex;
  flex-direction: column;

  .label-style{
    color: var(--grey500);
    letter-spacing: 0.25rem;
    font-weight: bolder;
    font-size: 12px;
  }

  .label-error{
    color: var(--red400);
  }

  input{
    margin-top: 0.25rem;
    padding: 0.75rem;
    font-size: 20px;
    font-weight: 600;
    border: 1px solid var(--grey200);
    border-radius: 0.5rem;
    outline: none;
  }

  /* Removes spinner for input type */
  input[type=number]::-webkit-inner-spin-button, 
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  input:focus, input:focus-visible, input:focus-within{
    border: 1px solid var(--purple500);
    outline: none
  }

  .placeholder-color::placeholder{
    color: #828282;
    font-weight: bolder;
  }

  .input-error{
  border: 1px solid red;
  }

  .error{
    display: block;
    color: var(--red400);
    margin-top: 0.25rem;
    font-size: 9px;
    font-style: italic;

    @media (max-width: 480px){
      font-size: 8px;
    } 
  }
}

.button-layout{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-top: 1.5rem;
  @media (max-width: 480px){
    position: relative;
    margin-top: 3rem;
    justify-content: center;
  }
 
  .button-style{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #865ef5;
  border-radius: 2rem;
  height: 60px;
  width: 60px;
  aspect-ratio: 1;
  border: solid transparent 1px;
  padding: 0.5rem;
  cursor: pointer;

  @media (max-width: 480px){
    margin: auto;
  } 
}

.button-style:hover{
  background-color: black;
}
}

/* Creates the horizontal line */
.button-layout:before { 
  content:'';
  width:100%;
  border-bottom:var(--grey200) 1px solid;
  display:inline-block;
  vertical-align:middle;
}

.data-layout{
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
  width: 100%;
  font-size: 3.75rem;
  line-height: 4rem;
  font-family: "poppins bold italic";

  .number-output{
    color: var(--purple500);
    letter-spacing: 5px;
  }
}

.attribution { 
  margin-top: 1.5rem;
  font-size: 12px; 
  text-align: center;

  a { 
    color: hsl(228, 45%, 44%); 
  }

  @media (max-width: 480px){
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }  
}

.hide-element{
  display: none;
}