*, *::before, *::after  {
      box-sizing: border-box;
      font-family: spartan, sans-serif;
      font-weight: bolder;
}

body {
      padding: 0;
      margin: 0;
}

/*.dots > h4 {
      position: relative;
      top: 21px;
      margin-right: 15px;
      color: aliceblue;

}
div.dots {
      grid-column: 1 / -1;
      display: flex;
      align-items: flex-end;
      justify-content: flex-end;
      flex-direction: row;
      position: relative;
      bottom: 22px;
      margin-right: 15px;
}

.dot{       
      width:14px;
      height:14px;
      border-radius: 50%;
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 0%;
      margin: 3px;    
  }
  
  #red-dot {
      
      background-color: red;
      
  }
  
  #blue-dot {
      
      background-color: blue;
      
  }
  
  #yellow-dot {
      
      background-color: yellow;
      
  }

/*p {
      color: aliceblue;
}*/

div.output {
      grid-column: 1 / -1;
      background-color: hsl(223, 27%, 34%);
      display: flex;
      align-items: flex-end;
      justify-content: space-around;
      flex-direction: column;
      border-radius: 20px;
      padding: 10px;
      word-wrap: break-word;
      word-break: break-all;
}

.output .previous-operand {
      color: rgb(221, 237, 250);
      font-size: 2rem;
}
.output .current-operand {
      color: rgb(246, 248, 250);
      font-size: 1.5rem;
}

.btn {
      padding: 10px;
      margin: 0px;
      display: grid;
      justify-content: center;
      align-content: center;
      background-color: hsl(268, 75%, 9%);
      font-weight: bold;
      grid-template-columns: repeat(4, 100px);
      grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.btn > button  {
      position: relative;
      right: 15px;
      cursor: pointer;
      margin-top: 45px;
      margin-left: 30px;
      font-weight: bold;
      font-size: 2rem;
      border: 1px solid rgb(175, 169, 169);
      border-radius: 10px;
}
.btn > button:hover {
      background-color: rgb(175, 172, 172);
}

.span-2 {
      grid-column: span 2;
}

.attribution { 
      font-size: 11px; text-align: center; 
}
.attribution a { 
      color: hsl(228, 45%, 44%); 
}

@media all and {max-width: 375px; min-width: 359px;} {
      body (
            width: 65%;
      )
}