@font-face {
  font-family: "Allogist Regular";
  src: url(../fonts/AllogistRegular/font.woff);
  font-weight: bold;
}

@font-face {
  font-family: "BentonSans Book";
  src: url(../fonts/BentonSans-Book.woff);
  font-style: normal;
}

@font-face {
  font-family: "BentonSans Book";
  src: url(../fonts/BentonSans-BookItalic.woff);
  font-style: italic;
}

@font-face {
  font-family: "BentonSans Medium";
  src: url(../fonts/BentonSans-Medium.woff);
  font-style: bold;
}

@font-face {
  font-family: "BentonSans Light";
  src: url(../fonts/BentonSans-Light.woff);
  font-style: normal;
}

@media only screen and (min-width: 1025px) {

  h1 {
    font-size: 7vw;
  }

  h2 {
    font-size: 5vw;
  }

  h3 {
    font-size: 3vw;
  }

  .articleTitle {
    /* background-color: blue; */
    height:70vh;
    margin-top: 6%;
    padding: 5%;
  }

  h4 {
    font-size: 3vw;
  }

  article {
    box-shadow: 0 0 50px #ffffff;
    padding: 5% 10% 5%;
    margin-left:5%;
    margin-right: 5%;
  }

  p, ul {
    font-size:2vw;
  }

  img{
    padding: 5% 0% 5%;
  }

  .bio {
    font-size: 1.5vw;
  }

  .footnote {
    font-size:1.5vw;
  }

  .caption {
    font-size: 1.5vw;
  }

  .navbar {
    height:2vh;
    padding:2% 0% 2%;
    line-height: 2vh;
  }

  .navbar:hover {
    opacity: 1;
  }

  #heading, #expand, #submenu {
    font-size: 2vw;
  }
}

@media only screen and (max-width: 1024px) {

  .articleTitle {
    /* background-color: blue; */
    height:75%;
    margin-top: 15%;
    padding: 5%;
  }

  h1 {
    font-size: 15vw;
  }

  h2 {
    font-size: 8vw;
  }

  h3 {
    font-size: 6vw;
    margin-bottom: 20%;
  }

  img{
    padding: 5% 0% 5%;
  }

  h4 {
    font-size: 5vw;
  }

  p {
    font-size: 4vw;
    padding:2%;
  }

  ul {
    font-size: 4vw;
  }

  article {
    box-shadow: 0 0 150px #ffffff;
    padding: 2% 5% 2%;
    margin-left:3%;
    margin-right: 3%;
  }

  .bio {
    font-size: 3.5vw;
  }

  .navbar {
    height:4.5vh;
    padding:2% 0% 2%;
    line-height: 4.5vh;
  }

  .footnote {
    font-size:3.5vw;
  }

  .caption {
    font-size: 3vw;
  }

  #heading, #expand, #submenu {
    font-size: 4.5vw;
  }
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}


p, a, ul {
  font-family: "BentonSans Book";
}

h3, h4 {
  font-family: "BentonSans Light";
}

h1, h2 {
  font-family: "Allogist Regular";
}

h1, h2, h3 {
  text-align: center;
}

.menu {
  position:fixed;
  top:0;
  width:100%;
  text-align: center;
  color:white;
  /* padding: 2% 0% 2%; */
  /* opacity: 0.7; */
}

.navbar {
  background-color: black;
  opacity: 0.7;
}

.menuTitle {
  float:left;
  padding-left: 2%;
}

ul {
  padding-left: 10%;
}

#expand {
  float: right;
  padding-right: 2%;
}

#submenu {
  padding:3%;
  display:none;
  background-color: #3d3543;
}

#heading {
  font-family: "Allogist Regular";
}

.menuItem {
  color:white;
  text-decoration: none;
}

h2 {
  padding:6% 12% 6%;
}

h3 {
  padding:0% 5% 0%;
}

article {
  border-radius: 20px;
  border-style: solid;
  background-color: rgba(0, 0, 0, 0.5);
  border-color: white;
  color:white;
}

.break {
  text-align: center;
}

.reduced {
  width:50%;
}

.double {
  display: inline;
  width: 47%;
  padding:1%;
}

.footnote {
  display:none;
  font-family: "BentonSans Book";
  position: fixed;
  bottom:0%;
  left:0%;
  padding: 2%;
  width: 98vw;
  max-height: 30vh;
  overflow-y: scroll;
  background-color: black;
  color:white;
}

.caption {
  font-family: "BentonSans Book";
  text-align: center;
}

.footer {
  height:10%;
}