@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');

* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    background-color: black;
    color: white;
    font-family: 'Questrial', sans-serif;
    font-size: 16px;
}

.title-1 {
    font-size: 64px;
    margin-top: 0.59em;
    margin-left: 14.21em;
    margin-bottom: 0.81em;
}

@media only screen and (max-width: 700px) {
  .title-1 {
    margin-left: 0.27em;
  }
}

.landing-page-images {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 0.95em;
    margin-left: 5.29em;
    margin-right: 9.29em;
}

@media only screen and (max-width: 700px) {
  .landing-page-images {
    display: flex;
    flex-direction: column;
    justify-self: center;
    margin: 0 0.83em;
  }
}

#img-1 {
    width: 518px;
    height: 288px;
}

#img-2 {
    width: 359px;
    height: 400px;
}

@media only screen and (max-width: 700px) {
  #img-1 {
    width: 426px;
  }
}

.landing-page-footer {
    margin-left: 2.83em;
}

@media only screen and (max-width: 700px) {
  .landing-page-footer {
    margin-right: 0.83em;
  }
}

.landing-page-footer p {
    display: flex;
    align-items: center;
}

.down-arrow-btn {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.down-arrow-btn:hover, .down-arrow-btn:focus, .down-arrow-btn:active {
  -webkit-animation-name: hvr-hang-sink, hvr-hang;
  animation-name: hvr-hang-sink, hvr-hang;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

@-webkit-keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@-webkit-keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}

.wrapper {
    display: flex;
    flex-direction: row;
    margin-top: 4.29em;
    margin-left: 3.87em;
    margin-right: 2.83em;
}

.wrapper p {
    margin-top: 2.37em;
    margin-right: 8.25em;
}

@media only screen and (max-width: 700px) {
  .wrapper {
    display: block;
    margin-left: 0.83;
  }
  .wrapper p {
    margin-right: 0;
    margin-bottom: 0.83;
  }
}

#about-title {
    font-size: 64px;
    text-transform: uppercase;
}

#languages {
    font-size: 64px;
    text-transform: uppercase;
    margin-top: 1.34em;
    margin-left: 1em;
}

#programing-languages-img {
    width: 667px;
    margin-top: 1em;
    margin-left: 3.87em;
    margin-bottom: 1em;
}

@media only screen and (max-width: 700px) {
  #languages {
    margin-left: 0.15em;
  }
  #programing-languages-img {
    width: 427px;
    margin-left: 0.7em;
  }
}

#sample-title {
    font-size: 64px;
    text-transform: uppercase;
    margin-top: 1.14em;
    margin-left: 1em;
}

.sample-grid {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-row-gap: 2.45em;
    grid-column-gap: 2.91em;
    margin-top: 1.66em;
    margin-left: 1.75em;
    margin-right: 2.75em;
    margin-bottom: 4.41em;
}

@media only screen and (max-width: 700px) {
  #sample-title  {
    margin-left: 1.5em;
  }
  .sample-grid {
    display: grid;
    grid-template-columns: auto;
    margin-left: 2em;
  }
}

.sample-grid img {
  width: 388px;
  height: 182px;
}

.grid-box {
    border: white solid 5px;
    text-align: center;
    padding-bottom: 0.33em;
}

.grid-box p {
  font-size: 18px;
  padding: 0.22em;
}

.grid-box a {
  font-size: 18px;
  color: white;
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  overflow: hidden;
}

.grid-box a::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: white;
  height: 2px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.grid-box a:hover::before, .grid-box a:focus::before, .grid-box a:active::before {
  right: 0;
}

#contact-title {
    font-size: 64px;
    text-transform: uppercase;
    margin-top: 1.14em;
    margin-left: 1em;
}

.contact-content {
    display: flex;
    flex-direction: column;
    margin-top: 1.14em;
    margin-left: 3.45em;
    margin-bottom: 3.48em;
}

@media only screen and (max-width: 700px) {
  #contact-title {
    margin-left: 0.31em;
  }
  .contact-content {
    margin-left: 1.5em;
  }
}

.contact-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 1.48em;
}

.contact-wrapper img {
    margin-right: 33px;
}

.contact-wrapper a {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.contact-wrapper a:hover, .contact-wrapper a:focus, .contact-wrapper:active {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}