:root{
  --boxHeight: calc(100vh - var(--headerHeight));
}
.BorderBox{
  position: relative;
  padding: var(--headerHeight) 0 0 0;
  width: 100vw;
  height: calc(100% - var(--headerHeight));
}
.Background{
  position: relative;
  height: 100%;
  width: 100vw;
  padding: 0% 0% 0% 0%;
  background-image: url("../content/riffel.jpeg");
  background-repeat: repeat;
  background-size: 50%;
}
.ContBox1 {
  position: relative;
  margin-bottom: 80px;
  left: 10%;
  height: 90%;
  padding: 5% 5% 5% 5%;
  width: 70%;
  background-color: var(--color-cream);
  opacity: 0.95;
}
.ContBox2 {
  position: relative;
  height: 100%;
  width: 90%;
  left: 0%;
  padding: 0% 5% 0% 5%;
}

h1 {
  color: var(--color-blue);
  text-align: left;
  font-variant: small-caps;
  font-weight: 500;
  letter-spacing: 0.09em;
}
h3{
  color: var(--color-blue);
  text-align: left;
  font-size: 2.2vw;
  font-weight: 400;
  text-decoration: underline;
}
h2 {
  color: var(--color-black);
  text-align: left;
  font-size: 1.7vw;
  font-weight: 700;
  opacity: 1;
}
p {
  color: var(--color-black);
  text-align: left;
  font-size: 1.7vw;
  font-weight: 700;
  opacity: 1;
}
li {
  color: var(--color-black);
  text-align: left;
  text-align: left;
  font-weight: bold;
  font-size: 1.6vw;
  line-height: 2.8vw;
  letter-spacing: normal;
  font-stretch: expanded;
}

/* Desktop Devices*/
@media all and (min-width: 600px) and (max-width: 900px) and (-webkit-max-device-pixel-ratio: 1) {
  h1{font-size: 4.5vw;}
  h2{font-size: 2.7vw;}
  h3{font-size: 3.2vw;}
  p{font-size: 2.7vw;}
  li{font-size: 2.3vw; line-height: 3.5vw;}
  input{font-size: 2.0vw; height: 5.5vw; width: 29vw; margin-left: 35%;}
}
@media all and (max-width: 599px) and (-webkit-max-device-pixel-ratio: 1) {
  .BorderBox{padding: calc(1.9* var(--headerHeight)) 0 0 0;}
  h1{font-size: 6.5vw;}
  h2{font-size: 3.5vw;font-weight: 600;}
  h3{font-size: 4.5vw;}
  p{font-size: 3.5vw;font-weight: 600;}
  li{font-size: 3.5vw; line-height: 4.8vw;}
  :root{--boxHeight: calc(75vh - var(--headerHeight));}
}


/* Mobile Devices*/
@media all and (min-device-width: 600px) and (max-device-width: 900px) and (-webkit-min-device-pixel-ratio: 2) {
  h1{font-size: 4.5vw;}
  h2{font-size: 2.7vw;}
  h3{font-size: 3.2vw;}
  p{font-size: 2.7vw;}
  li{font-size: 2.3vw; line-height: 3.5vw;}
  input{font-size: 2.0vw; height: 5.5vw; width: 29vw; margin-left: 35%;}
}
@media all and (max-device-width: 599px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  h1{font-size: 4.5vw;}
  h2{font-size: 2.7vw;}
  h3{font-size: 3.2vw;}
  p{font-size: 2.7vw;}
  li{font-size: 2.3vw; line-height: 3.5vw;}
  input{font-size: 2.0vw; height: 5.5vw; width: 29vw; margin-left: 35%;}
}
@media all and (max-width: 1024px) and (max-device-width:599px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .BorderBox{padding: calc(1.9* var(--headerHeight)) 0 0 0;}
  h1{font-size: 6.5vw;}
  h2{font-size: 3.5vw;font-weight: 600;}
  h3{font-size: 4.5vw;}
  p{font-size: 3.5vw;font-weight: 600;}
  li{font-size: 3.5vw; line-height: 4.8vw;}
  :root{--boxHeight: calc(75vh - var(--headerHeight));}
}