@import url('https://fonts.googleapis.com/css?family=Asap:700&display=swap');

html {
  scroll-behavior: smooth;
}
body,
html {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
  width: 100%;
  height: 100%;
  color: white;
  /* background-color: black; */
  animation: pulseCol 15s infinite;
}
h1 {
  /* font-size: 2em; */
  letter-spacing: -1px;
}
/* --------DROPDOWN RELATED--------- */
.dropdown {
  display: flex;
  list-style: none;
  margin: 0;
  /* padding: 0; */
  /* overflow: hidden; */
  /* position: fixed; */
} 
.icons {
  margin-left: 87vw;
  transition: all 0.4s;
}
.icons img {
  max-width: 4vw;
  min-width: 50px;
  width: 100%;
  height: auto;
}
.icon:hover {
  transform: scale(1.2);
}
.dropbtn {
  font-size: 4em;
  font-family: 'Asap', sans-serif;
  /* margin-left: 90vw;  */
}
div a {
  color: rgb(255, 255, 255);
  display: block;
  padding: 10px 20px;
  margin: 1px;
  text-decoration: none;
  transition: all 0.4s;
}
.dropbtn:hover {
  color: rgb(0, 0, 0);
  transform: scale(1.03);
}
.dropbtn:active {
  color: rgb(255, 255, 255);
  /* background-color: white; */
}
.dropdown-content {
  display: none;
  position: absolute;
  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-size: 1.4em;
  background: rgba(0,0,0,0.1);
  margin-top: 12vh; 
  /* border-radius: 2px; */
}

.dropdown-content a {
  /* color: rgb(0, 0, 0); */
  text-decoration: none;
  text-align: left;
}

.dropdown-content a:hover {
  color: rgb(0, 0, 0);
  /* transform: scale(2); */
}

.show {
  display: block;
}
/* ----------RESPONSIVE NAVBAR & ICONS----------- */
@media only screen and (max-width: 1100px){
  .icons {
    margin-left: 85vw;
  }
}
@media only screen and (max-width: 950px){
  .icons {
    margin-left: 80vw;
  }
}
@media only screen and (max-width: 750px){
  .icons {
    margin-left: 77vw;
  }
}
@media only screen and (max-width: 450px){
  .icons {
    margin-left: 57vw;
  }
}

/* -------COVER PHOTO------ */
.container {
  /* display: block; */
  /* width: relative; */
  height: 100vh;
  /* background-image: url(splash.jpg);
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; */
  animation: pulseCol 15s infinite;
}
@keyframes pulseCol {
  0%, 100% {
    background-color: #EA651D;
  }
  33% {
    background-color: rgb(190, 174, 22);
  }
  66% {
    background-color: rgb(14, 136, 67);
  }
}
.container .logo {
  position: relative;
  top: 20vh;
  padding: 0px 10vw;
}
.container .header {
  font-size: 6em;
}
.container .subHead {
  font-size: 2em;
}
@media only screen and (max-width: 700px){
  .container .header {
    font-size: 3em;
  }
  .container .subHead {
    font-size: 1em;
  }
}
/* ----------MAIN BODY ----------*/
.bodyContainer {
  font-size: 1.0em;
  /* color: white; */
}
.about {
  padding: 20px 8vw 60px 8vw;
  background-color: rgba(0,0,0,1);
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.4);
  min-height: 100vh;        /*MAKES THE ABOUT FULL SCREEN*/
}
.aboutbox {
  padding-right: 5vw;
}
.aboutbox p {
  line-height: 2;
}
.aboutbox a {
  text-align: center;
  border: solid white;
}
.aboutbox a:hover {
  border: solid #ea651d;
}
.home_link {
  padding: 0;
  margin-left: 85vw;
}
.arrow img {
  min-width: 50px;
  width: 100%;
  height: auto;
}
.aboutcontent {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.contentbox {
  width: 60vw;
}


.split {
  position: relative;
  text-align: right;
  color: black;
  padding: 10vh 5vw;
  font-size: 3em;
}
.ball {
  box-shadow: 0px 0px 5px 2px black;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: black;
  position: absolute;
  animation: ballbounce ease 10s infinite;
  transition: background-color .1s ease-in-out;
}
.ball:hover {
  background-color: white;
  box-shadow: 0px 0px 5px 2px white;
}


@keyframes ballbounce {
  0% {
    opacity: 0;
  }
  25% {
    opacity: .5;
  }
  50% {
    opacity: .1;
  }
  75% {
    opacity: .8;
  }
  100% {
    opacity: 0;
  }
} 


#projects {
  column-gap: 5vw;
  display: grid;
  grid-template-columns: 1fr 2fr;
}
.tab a:hover {
  background-color: #bb480b;
  animation: pulseCol 15s infinite;
}
.tab a.active {
  background-color: #ea651d;
  animation: pulseCol 15s infinite;
}
.sitelinks {
  display: flex;
  justify-content: space-evenly;
  font-size: 1.2em;
}
.sitelinks a {
  color: #bb480b;
}
.sitelinks a:hover {
  color: #15A754;
}
.tabcontent {
  display: none;
  justify-content: left;
  width: 50vw;
  animation: fadeEffect 1s;
  line-height: 2;
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
.tabcontent a img{
  width: 100%;
  height: auto;
}
/* .contentbox {
  width: 60vw;
} */




@media only screen and (max-width: 700px){
  .home_link {
    margin-left: 80vw;
  }
  .aboutcontent {
    grid-template-columns: 1fr;
  }
  #projects{
    grid-template-columns: 1fr;
  }
  .tabcontent {
    width: 85vw;
  }
}
@media only screen and (max-width: 450px){
  .bodyContainer {
    font-size: .7em;
  }
  .home_link {
    margin-left: 75vw;
  }
}

/* ------------------CONTACT------------- */

   
/* ----------FOOTER---------- */
.footer {
  display: flex;
  background-color: black;
  font-size: 1em;
  padding: 20vh 10vw;
  transition: all 0.4s;
}