@font-face {
  font-family: "California";
  src:
    local("California"),
    url("fonts/California.otf") format("opentype");
}
@font-face {
  font-family: "Open Sans";
  src:
    local("open Sans"),
    url("fonts/OpenSans.ttf") format("opentype");
}
body {
  padding: 0;
  margin: 0;
  background-color: #0aa680;
  overflow-x: hidden;
}
a {
  color: #173561;
  text-decoration: none;
}
a:hover {
  color: white;
}
.main {
  display: grid;
  grid-template-columns: 45vw 55vw;
  grid-template-rows: 100vh;
  grid-template-areas: 'a b';
  grid-gap: 0;
}
.main .about {
  grid-area: a;
}
.main .info {
  margin-top: 16vh;
  margin-left: 8vw;
  margin-right: 5vw;
}
.main .info .hi {
  width: 25vw;
}
.main .info .description {
  font-family: "Open Sans";
  font-size: 3vh;
  color: #86e5de;
}
.main .image {
  grid-area: b;
  background-image: url("images/about/daniela.jpg");
  background-position: bottom left;
  background-size: cover;
  background-repeat: no-repeat;
}
.main .about .back {
  position: absolute;
  left: 3vw;
  top: 5vh;
}
.main .about .back a {
  display: block;
}
.main .about .back img {
  max-width: 5vw;
  max-height: 10vh;
}
@media (orientation: portrait) {
  .main {
    grid-template-columns: 100vw;
    grid-template-rows: 60vh 40vh;
    grid-template-areas:
      'b'
      'a';
  }
  .main .info {
    margin-top: 5vh;
    margin-right: 8vw;
  }
  .main .info .hi {
    width: 50vw;
  }
  .main .about .back img {
    max-width: 10vw;
    max-height: 10vh;
  }
}