* {
   box-sizing: border-box;
 }

 @import url("https://fonts.googleapis.com/css?family=Bungee:300,300i,600");

 .header {
  padding: 30px;
}

.rubik-bodytext {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350;
  font-style: normal;
}

.responsive {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.history {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-device-width: 1600px) {
  .responsive {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (max-width: 680px) {
.navbar a {
  font: 400;
  font-size: 5vw !important;
  margin-left: auto;
  margin-right: auto;
}
}

 /* Style the top navigation bar */
 .navbar {
   display: flex;
   display: block;
   margin-left: auto;
   margin-right: auto;
   padding: 12px;
 }

 /* Style the navigation bar links */
 .navbar a {
  --fill-color: #dfe357;
  padding: 2px 1px;
  margin: 36px;
  font: 600 2.5vw Bungee, Trebuchet, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2.3px;
  -webkit-text-stroke: .4px var(--fill-color);
  background: linear-gradient(var(--fill-color) 0 100%) left / 0 no-repeat;
  color: transparent;
  background-clip: text;
  transition: 0.2s linear;

  &:hover {
    background-size: 100%;
  }
 }

 /* Change color on hover */
 .navbar a:hover {
   transition: 0.25s linear;
 }


 h1 {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: bold;
  color: #FFFFFF;
 }

 h2 {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: bold;
  color: #FFFFFF;
  font-size: 1.7vw;
 }

 h3 {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: #FFFFFF;
 }

 p {
  font-family: 'Armata', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  width: 100%;
  letter-spacing: 2.2px;
  text-align: auto;
  padding: 26px;
  margin: auto;
  height: 25%;
  color: #dfe357;
  line-height: 2.0;
  font-size: 2vw;
  text-shadow: 2px 2px 2px black, 0 0 3px rgb(2, 2, 76);

}
a {
  color: #FFFFFF;
}

.description {
  font-family: 'Armata', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: #FFFFFF;
  font-size: .85vw;
  letter-spacing: 2px;
  padding: 8px;
  font-weight: lighter;
}

body {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  font-family: 'Armata', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color: #FFFFFF;
  display: inline;
  height: 10vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #082f5f;
}

/* Create a Parallax Effect
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}*/

/* First image (Logo. Full height)
.bgimg-1 {
  background-image: url("images/Pink bush.avif");
  min-height: 1000px;
}*/

/* Second image (Bio)
.bgimg-2 {
  background-image: url("images/Poseidon.jpg");
  min-height: 900px;
}*/

/* Third image (Contact)
.bgimg-3 {
  background-image: url("images/Smithsonian Castle.jpg");
  min-height: 900px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;} */

/* Turn off parallax scrolling for tablets and phones */
/* @media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
    background-size: cover;
  }
}*/


 /* Column container */
 .row {
   display: flex;
   flex-wrap: wrap;
 }

 /* Main column */
 .main {
   flex: 70%;
   background-color: transparent;
   padding: 20px;
 }

 .resume {
  padding:8px;
  background:#bac83e;
  color:#082f5f;
  width: 120px;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.33), 0 17px 50px 0 rgba(0,0,0,0.25);
  transition-duration: 0.2s;
  text-decoration: none;
}

.resume:hover {
  background-color: #515e1b;
  color: white;
}

 /* Footer */
 .footer {
   padding: 80px;
   text-align: center;
   background: #ddd;
 }

 /* Responsive layout - when the screen is less than 700px wide,
 make the two columns stack on top of each other instead of next to each other */
 @media screen and (max-width: 700px) {
   .row, .navbar {
     flex-direction: column;
   }
 }

 .pdf {
  display: block;
  margin-left: auto;
  margin-right: auto;
 }

 .iframe-container {
  position: relative;
  overflow: hidden;
  padding-bottom: 150%; /* Aspect Ratio */
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.header{
  width: 100%;
  height: 100%;
  position: relative;
  animation-name: logo;
  animation-duration: 4s;;
}
@keyframes logo {
  from {left: 20px; width: 0%; height: 0%; padding: 20px }
  to {top: 0px;  width: 100%; height: 100%;}
}