/* dont understand this */
*,*::before,*::after { 
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}



html {
   /* footer support */
   position: relative;
   min-height: 100%;
}

body {
   background: linear-gradient(to right,#F6C7B3, #f0defd );
   flex-direction: column;
   line-height: 1.6;
  /* footer support dont understand this either  */
  margin-bottom: 100px;
}

header {
   height: 20vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

main {
   display: flex;
   justify-content: center;
   /*why does this do this? */
   align-items: center;
   padding: 50px;
   height: 50vh;
   padding: 10px;
   margin-top: 50px;
}

.calculator {
   display: flex;
   flex-direction: column;
   width: 350px;
   background-color: #FAE0D8;
   border-radius: 20px;
   border: #C4B7BB 2px solid;
   padding: 20px;
   margin: 80px;
}

.screen {
   padding: 10px;
   border-radius: 5px;
   margin-bottom: 20px;
   background-color: #dfe1be;
   text-align: right;
}

   .previous-screen {
      min-height: 32px;
      font-size: 20px;
   }

   .current-screen {
      min-height: 64px;
      font-size: 40px;
   }


.btn {
   background-color: #F1DEEE;
   font-size: 20px;
   padding: 20px;
   border-radius: 5px;
}

.buttons-area {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 10px;
}

.span-2 {
   grid-column: span 2;
   font-size: 20px;
   padding: 20px;
   border-radius: 10px;
   background-color: #F8F3E8;
}

footer {
   /* what does position:absolute do? */
   position: absolute;
   bottom: 0;
   left: 0;
   display: flex;
   justify-content: center;
   width: 100%;
   padding: 10px;
   font-size: 20px;
}




/*
 * Button Styles