*{
  margin: 0;
  padding: 0;
}

body{
  background-color: black;
  margin: 5vw;
}

.container{
  display: flex;
  justify-content: start;
  width: 100%;
  align-items: start;
}

.header{
  width: 100%;
  color: white;
  text-decoration: none;
  letter-spacing: 0vw;
  font-family: 'Open Sans', sans-serif;
}

.header h1{
  font-size: 4vw;
  font-weight: lighter;
}

.header p{
  font-size: 1.5vw;
  width: 95%;
}

.header__img img{
  width: 30vw;
  max-height: 100%;
  border-radius: 2vw;
}

.about__container{
  display: grid;
  grid-template-columns: 1fr;
}

.about_sub_grid{
  display: flex;
  justify-content: start;
  width: 100%;
  align-items: start;
}

.about_sub_img{
  width: 50%;
  float: right;
  display: flex;
  justify-content: center;
}

.about{
  padding: 1.5vw;
  display: grid;
  grid-template-columns: 1fr;
}

.about p{
  padding-bottom: 2vw;
  color: white;
  text-align: left;
  text-decoration: none;
  font-size: 1.5vw;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
}

.about h1{
  padding-bottom: 2vw;
  color: white;
  text-align: left;
  text-decoration: none;
  font-size: 2vw;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
}

.container a{
  font-size: 2.5vw;
}

.header a{
    text-decoration: none;
    color: white;
    font-size: 2vw;
}

.container a:hover{
  color: grey;
}

.container a.active{
  color: white;
}

.navbar {
  overflow: hidden;
  margin-bottom: 2vw;
}

.navbar a{
  color: white;
  text-align: left;
  text-decoration: none;
  font-size: 2vw;
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
  letter-spacing: 0vw;
  padding-right: 1rem;
}

.navbar a:hover{
  color: grey;
}

.navbar a.active{
  color: white;
}

.contact__text a:hover{
  color: grey;
}

.contact__text a.active{
  color: white;
}

.socials{
  float: right;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.fa {
  padding: 2.5vw;
  font-size: 5vw !important;
  width: 5vw;
  height: 5vw;
  max-width: 100%;
  text-align: center;
  text-decoration: none;
  margin: 1vw 1vw;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-instagram {
  background: #E1306C;
  color: white;
}

.fa-linkedin {
  background: blue;
  color: white;
}

.fa-youtube {
  background: red;
  color: white;
}

.fa-github {
  background: green;
  color: white;
}

@media only screen and (max-width: 600px) {
  .about__container{
    display: grid;
    grid-template-columns: 1fr;
  }

  .about iframe{
    width: 300px;
    height: 275px;
  }

  .about img{
    width: 300px;
    height: 275px;
  }
}