@import "../styles/index.css";
@import url("https://fonts.googleapis.com/css?family=Merriweather:400,900|Six+Caps");

* {
  margin: 0;
}

.about-me {
  width: 90%;
  margin: 0 auto;
  max-width: 50em;
  margin-top: 5em;
  margin-bottom: 5em;
}
.about-me::after {
  content: "";
  display: block;
  clear: both;
}

.about-img {
  max-height: 25em;
}
@media (min-width: 42em) {
  .about-img {
    float: left;
    margin-right: 1em;
  }
}

.about-title {
  margin-bottom: 0.25em;
}

.about-subtitle {
  margin: 0.5em 0;
}

@supports (display: grid) {
  .about-me {
    display: grid;
    grid-template-columns:
      [port-start] minmax(6em, 1fr) [name-start] minmax(6em, 1fr)
      [img-end] 2fr [port-end];
    grid-column-gap: 0.5em;
  }
  .about-img {
    grid-column: port / img;
    grid-row: 1 / 2;
  }
  @media (min-width: 50em) {
    .about-img {
      grid-row: 1 / 4;
    }
  }
  .about-title {
    grid-column: name / port;
    grid-row: 1 / 2;
    -webkit-align-self: end;
    -ms-flex-item-align: end;
    align-self: end;
  }
  .about-subtitle,
  .about-text {
    grid-column: port / port;
  }
  @media (min-width: 50em) {
    .about-subtitle,
    .about-text {
      grid-column: image-end / port-end;
    }
  }
  .about-subtitle {
    grid-row: 2 / 3;
  }
  .about-text {
    grid-row: 3 / 4;
  }
}

.button {
  display: inline-block;
  background-color: #03afc2;
  border: none;
  color: white;
  padding: 10px 22px;
  text-align: center;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  margin-left: 80px;
  border-radius: 20px;
  font-size: 20px;
  letter-spacing: 2px;
  margin-top: 10%;
}
.button:hover {
  background-color: rgb(6, 47, 51);
}
.btn-content {
  display: flex;
  justify-content: flex-start;
}