html,
body {
  font-size: 16px;
  font-family: "Roboto Mono", monospace;
  font-weight: 400;
  padding: 2rem;
  overflow-x: hidden;
  background-color: white;
  color: black;
}
.start-of-section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10rem;
}
.end-of-section {
  text-align: center;
}
h2 {
  text-align: center;
  font-size: 3rem;
}
strong {
  font-size: 5rem;
  text-align: center;
}
/* ipad */
@media only screen and (max-width: 1024) {
  main .intro h1 {
    font-size: 4rem;
  }
  .intro .fly-text {
    font-size: 3rem;
    width: 200%;
    transform: translateX(70%);
  }
  main .projects {
    grid-template-rows: repeat(1, 400px 300px);
  }
}
/* mobile */
@media only screen and (max-width: 736px) {
  html,
  body {
    padding: 1rem;
  }
  main .intro h1 {
    font-size: 3rem;
  }
  main .projects {
    height: 2000px;
    grid-template-columns: auto;
    grid-template-rows: repeat(6, 2fr 1fr);
    grid-template-areas:
      "p1"
      "d1"
      "p2"
      "d2"
      "p3"
      "d3"
      "p4"
      "d4"
      "p5"
      "d5"
      "p6"
      "d6"
  }
  main .start-of-section {
    padding-top: 3rem;
  }
  .start-of-section h2 {
    font-size: 2rem;
  }
  .start-of-section strong {
    font-size: 4rem;
  }
  .end-of-section {
    display: flex;
    justify-content: left;
  }
  .intro .fly-text {
    font-size: 1.75rem;
    width: 170%;
    transform: translateX(70%);
  }
  .cell .restart {
    width: 100%;
    display: block;
  }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  html,
  body {
    background-color: black;
    color: white;
  }
  #navbar li a {
    color: white;
  }
  #header {
    background-color: rgba(120, 120, 120, 0.8);
  }
  .projects .cell {
    background-color: black;
  }
  .contacts a {
    color: white;
  }
  .cell .restart {
    background-color: rgb(80, 80, 80);
    border: 1px white solid;
    color: white;
  }
  .fly-text {
    color: #fff !important;
  }
}

/* navigation bar */
header {
  padding: 1rem;
  background-color: rgba(230, 230, 230, 0.9);
  position: fixed;
  z-index: 10;
  align-content: center;
}
nav ul {
  list-style: none;
  display: block;
  text-align: center;
}
nav li {
  display: inline-block;
}
nav li a {
  font-size: 1.25rem;
  color: black;
  font-weight: 200;
  text-decoration: none;
}

/* introduction section*/
.intro {
  display: block;
  position: relative;
  top: 5rem;
}
.intro h1 {
  font-size: 5rem;
  text-align: center;
}
.fly-text {
  font-size: 2rem;
  transform: translateX(110%);
  white-space: nowrap;
  color: #333;
}
.buffer {
  display: block;
  height: 700px;
}

/* projects section */
.projects {
  display: grid;
  width: 100%;
  gap: 2rem 2rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 400px 250px);
  grid-auto-rows: (3fr 1fr);
  grid-template-areas:
    "p1 p2"
    "d1 d2"
    "p3 p4"
    "d3 d4"
    "p5 p6"
    "d5 d6";
}
.cell {
  line-height: 1.4rem;
  text-align: justify;
}
.cell strong {
  font-size: 1.4rem;
}
.restart {
  height: 3rem;
  font-size: 1.4rem;
  will-change: transform;
  transition: transform 450ms;
  background-color: rgb(230, 230, 230);
}
.restart:hover {
  transition: transform 125ms;
  transform: translateY(-5px);
}
.contacts {
  height: 10rem;
  text-align: center;
}

@import url(https://fonts.googleapis.com/css?family=PT+Sans);
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.cell a {
  display: inline-block;
  position: relative;
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
}
.cell span {
  display: block;
}
.cell a::before,
.cell a::after {
  content: "";
  width: 0;
  height: 0.2rem;
  position: absolute;
  transition: all 0.2s linear;
  background: #000;
}
.cell span::before,
.cell span::after {
  content: "";
  width: 0.2rem;
  height: 0;
  position: absolute;
  transition: all 0.2s linear;
  background: #000;
}
.cell a:hover::before,
.cell a:hover::after {
  width: 100%;
}
.cell a:hover span::before,
.cell a:hover span::after {
  height: 100%;
}
.btn-2::before,
.btn-2::after {
  transition-delay: 0s;
}
.btn-2 span::before,
.btn-2 span::after {
  transition-delay: 0.2s;
}
.btn-2::before {
  right: 0;
  top: 0;
}
.btn-2::after {
  left: 0;
  bottom: 0;
}
.btn-2 span::before {
  left: 0;
  top: 0;
}
.btn-2 span::after {
  right: 0;
  bottom: 0;
}
.btn-2:hover::before,
.btn-2:hover::after {
  transition-delay: 0.2s;
}
.btn-2:hover span::before,
.btn-2:hover span::after {
  transition-delay: 0s;
}