/* a minimalist set of CSS resets */

/* default to border-box */

html {
  box-sizing: border-box;
  font-size: 16px;

}
*,
*:before,
*:after {
  box-sizing: inherit;
}

/* adjust typography defaults */
body {
  margin: 1rem;
  line-height: 1.5;
  font-family: Montserrat, sans-serif;
}
img,
video {
  height: 25%;
  max-width: 25%;
}
.header {
  padding: 20px;
  text-align: left;
  display: flex;
  align-items: left;
  justify-content: space-between;
  font-size: 25px;

  .logo {
    height: 100px;
    max-width: 100px; /* Adjust max-width for the logo */
    margin: 2%;
    float: left;
  }
}

.text {
  margin-left: 1.7%;
}

.buttons {
  place-items: center;
  grid-template-columns: 1fr 1fr 1fr;
  align-content: center;
  display: grid;
  justify-content: center | space-between;
  margin: 20%;
  align-items: center | space-between;
  grid-row-gap: 15%;
}

.CalcBtns{
  width:10%;
  position:absolute;
  right:0;
 display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
 gap:18.2px;
  margin-right:3%;
}

.Number-Btns{
  width:50%;
  margin-left:2%;
  display:grid;
  grid-template-columns: 124px 124px 124px;
  grid-template-rows: 124px 124px 124px;
}

.AllCalcScreenBtns{
  position:relative;
  width:55%;
  display:flex;
  padding:10.5% 0;
}

.vl {
  display:flex;
  border-left: 3px solid grey;
  position: absolute;
    top: 5;
  right:0;
  height:448px;
  padding:10.5% 0;
}

/* images and videos max out at full width */