@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Bad+Script');

@font-face {
  font-family: 'Montserrat', sans-serif;
  font-family: 'Bad Script', cursive;
  }

#navbar {
  position:fixed;
  top: 0;
  width:100vw;
  left:0;
}

#navigation {
  height: 4vh;
  line-height: 4vh;
  background-color: #000000;
  color: #FFFFFF;
}

#subnav{
  height: 3vh;
  line-height: 3vh;
  background-color: #555555;
  color: #DDDDDD;
  font-size: 80%;
}

.nav1, .nav2{
  margin-left: 3vw;
  text-align: center;
}

.nav1 {
  height: 100%;
}

.nav1:hover, .nav2:hover, .moreinfo, .certificate{
  cursor: pointer;
}

#mainarea{
/*  height: 84vh; */
  margin-top: 8vh;
}

.header{
  margin-left: 15vw;
  width:70vw;
}

#author{
  text-shadow: 4px -2px 3px #AAAAAA, 8px -2px 12px #CCCCCC;
  text-align: center;
  font-family: "Bad Script";
  font-weight: 400;
  font-size: 1050%;
  color:white;
  padding-top: 1.5vh;
}

#intro {
  text-align: center;
  font-family: ="Montserrat";
  font-size: 150%;
}

#quote {
  font-size:100%;
  font-style:italic;
  color: #AAAAAA;
  margin-left: 25vw;
  text-align: center;
  width:50vw;
  margin-top: 5vh;
}

#techarea {
  margin-top:5vh;
  margin-left: 25vw;
  text-align: center;
  width:50vw;*/
  margin-top: 10vh;
}

.course {
  text-align: justify;
  font-size: 90%;
  position: static;
}

.icon {
  padding: 1vw;
  height: 50px;
}

.medium {
  filter: opacity(50%);
  -webkit-filter: opacity(50%);
}

.low {
  filter: opacity(20%);
  -webkit-filter: opacity(20%);
}

body {
    font-family: "Montserrat";
}

ul {
    font-style:italic;
    list-style-type:circle;
}

a{
  color:orange;
}
a:hover{
    text-shadow: 5px 2px 4px rgba(0,0,0,.1);
}

#internalabout{
  display:none;
}

@media only screen and (max-width: 1000px) {
  .aboutme, .columns, #contact{
    margin-left: 4vw;
    margin-right: 4vw;
    margin-top: 10vh;
    width:90vw;
    color:black;
  }

  .about__left{
    top: 0;
    width: 90vw;
    text-align: justify;
  }

  .about__right{
    width:90vw;
    text-align: justify;
  }

  .about__left h2{
    background: linear-gradient(to left, white, black);
    color:white;
  }

  .about__right h2{
    background: linear-gradient(to left, white, black);
    color:white;
  }
}

@media only screen and (min-width: 1001px) {
  .about__left{
    top: 0;
    width: 47vw;
    margin-right:3vw;
    float:left;
    text-align: justify;
  }

  .about__left h2{
    text-align: right;
    background: linear-gradient(to right, white, black);
    color:white;
    padding-right: 2px;
  }

  .about__right h2{
    background: linear-gradient(to left, white, black);
    color:white;
  }

  .about__right{
    width:48vw;
    float:right;
    text-align: justify;
  }

  .columns{
    display:flex;
  }

}

@media only screen and (min-width: 1500px) {
  .aboutme, .columns, #contact{
    margin-left: 25vw;
    margin-right: 25vw;
    margin-top: 10vh;
    width:50vw;
    color:black;
  }

}

@media only screen and (max-width: 1499px) and (min-width: 1001px) {

  .aboutme, .columns, #contact{
      margin-left: 4vw;
      margin-right: 5vw;
      margin-top: 5vh;
      width:90vw;
      color:black;
  }
}

.certificateImage {
  width:50vw;
  height:54vh;
  margin-left: 24vw;
  margin-top: 14vh;
}

.moreinfo, .certificate {
  color: red;
}

.projectImage{
  border-radius: 20% 0% 50% 0%;
}

courseTitle{
  font-size: 150%;
  font-weight: bold;
  text-decoration: underline darkgreen;
}

.columns::after {
  content: "";
  clear: both;
  display: table;
}

.about h2{
  font-family: "Montserat";
}


#contact {
  text-align: center;
  font-size: 150%;
}

.social_bw{
  filter: invert(50%);
  padding: 1vw;
  line-height: 50px;
}

.social_bw:hover {
  filter: invert(100%);
}

#footer{
  position:fixed;
  bottom:0;
  width: 100vw;
  color: white;
  background-color: black;
  left:0;
  height: 5vh;
  line-height: 3vh;
  display:flex;
}

#footertext {
  font-size: 70%;
  width: 80vw;
  text-align: left;
  float:left;
  padding-left: 1vw;
}

#socialmedia {
  padding-right: 2vw;
  line-height: 7vh;
  width: 20vw;
  text-align: right;
  float:right;
}