/* Fonts */

@font-face {
  font-family: Brightness;
  src: url(fonts/Brightness.ttf) format(truetype);
  font-weight: normal;
}
@font-face {
  font-family: DroidSerif;
  src: url(fonts/Droid\ Serif\ W01\ Regular.ttf) format(truetype);
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&family=Roboto:wght@300;400&display=swap');
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #141414;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}
.main_image img {
  margin-top: -36px;
  width: 99vw;
}
body {
  animation-name: Fade-in-and-out-animation;
  animation-duration: 1s;
}
html {
  scroll-behavior: smooth;
}

/* Header */

.header {
  background-color: #141414;
  height: 133px;
  position: fixed;
  z-index: 1;
  opacity: 0.7;
  width: 100%;
}
.header h1 {
  color: #a29c9c;
  position: fixed;
  left: 66px;
  top: 32px;
  margin: 0;
  padding: 0;
  font-family: DroidSerif;
  font-size: 37px;
  font-weight: 100;
}

/* Navigation Bar */

.navbar ul li a {
  text-decoration: none;
  color: #a29c9c;
  font-family: "Roboto Condensed", sans-serif;
  margin-right: 21px;
}
.navbar ul li a:hover{
  color: white;
  animation-name: hover-color-animation;
  animation-duration: 0.5s;
}
.navbar {
  position: fixed;
  top: 95px;
  left: 84px;
  font-size: 18px;
  z-index: 1;
}
.navbar ul li {
  display: inline;
}
.navbar ul {
  margin: 0;
  padding: 0;
}

/* Social Bar */

.socialbar {
  position: absolute;
  top: 152px;
  left: 96px;
}
.socialbar a {
  margin-right: 32px;
}
.socialbar3 {
  position: absolute;
  top: 65vh;
  left: 20vw;
}
.socialbar3 a {
  margin-right: 32px;
}
.heading {
  color: white;
  text-align: center;
  position: absolute;
  top: 30%;
  width: 99vw;
  font-size: 90px;
  font-family: Brightness, sans-serif;
  text-shadow: 7px 9px 5px rgba(0, 0, 0, 0.6);
}

/* Description */

.description_heading h2 {
  font-size: 52px;
  font-weight: 100;
}

.description_container {
  width: 99vw;
  height: 345px;
}
.description_heading {
  color: white;
  font-size: 51px;
  text-align: center;
  font-family: DroidSerif;
  position: relative;
  top: 74px;
}
.description p {
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
  top: 126px;
  margin: 0;
  padding: 0;
  font-family: Roboto;
  font-weight: 400;
  font-size: 18px;
}

/* Fps And Delay */

.fpsdelaybg {
  width: 952px;
  height: 515px;
}
.fps_delay_container {
  display: flex;
}
.fpsdelay {
  color: white;
  font-size: 21px;
  margin-top: 82px;
  margin-bottom: 75px;
  letter-spacing: 0.02em;
  text-align: center;
}
.fpsdelay_heading h3 {
  font-size: 42px;
  font-family: DroidSerif;
  font-weight: 100;
}
.fpsdelay_description p {
  margin-top: 32px;
}
.fps_delay_container img {
  width: 49.5vw;
}

/* Contact Me */

#contact_me {
  display: flex;
  position: relative;
  top: 22vh;
}
.contact_description_container {
  width: 49vw;
}
.contact_description_container a {
  width: 1vw;
}
.contact_description_container span {
  color: white;
  font-size: 73px;
  font-family: Brightness;
  text-align: center;
  display: block;
  margin-bottom: 7vh;
  position: relative;
  top: 14vh;
}
.contact_description_container p {
  color: white;
  font-size: 23px;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0;
  padding: 0;
  position: relative;
  top: 14vh;
}
.contact_img img {
  width: 50vw;
}

/* Contact Social Bar */

.socialbar2 {
  max-width: 218px;
  position: relative;
  top: 20vh;
  margin: auto;
}
.socialbar2 a {
  margin-right: 35px;
}

/* About */

#about_me {
  position: relative;
  top: 85px;
  display: flex;
}
.about_description {
  width: 49vw;
}
.about_description span {
  color: white;
  font-size: 73px;
  font-family: Brightness;
  text-align: center;
  display: block;
  margin-bottom: 7vh;
  position: relative;
  top: 16vh;
}
.about_description p {
  color: white;
  font-size: 23px;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0;
  padding: 0;
  position: relative;
  top: 15.6vh;
}
.about_img img {
  width: 50vw;
}

/* footer */

footer {
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 186px;
  font-size: 20px;
  color: #a29e9c;
  position: relative;
  top: 207px;
}

/* Animations */

@keyframes Fade-in-and-out-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hover-color-animation {
  from {
    opacity: 50%;
  }
  to {
    opacity: 100%;
  }
}

/* responsiveness laptops */

@media screen and (max-width: 1700px) {
  .heading {
    position: absolute;
    top: 290px;
  }

  .contact_description_container span {
    color: white;
    font-size: 60px;
    font-family: Brightness;
    text-align: center;
    display: block;
    margin-bottom: 7vh;
    position: relative;
    top: 12vh;
  }
  .contact_description_container p {
    color: white;
    font-size: 18px;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
    top: 9vh;
  }
  .socialbar2 {
    max-width: 218px;
    position: relative;
    top: 14vh;
    margin: auto;
  }

  /* about me */

  .about_description span {
    color: white;
    font-size: 68px;
    font-family: Brightness;
    text-align: center;
    display: block;
    margin-bottom: 7vh;
    position: relative;
    top: 16vh;
  }
  .about_description p {
    color: white;
    font-size: 20px;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
    top: 13vh;
  }
}

/* responsiveness small laptops */

@media screen and (max-width: 1536px) {
  .heading {
    position: absolute;
    top: 228px;
  }
  footer {
    text-align: center;
    letter-spacing: 0.05em;
    line-height: 186px;
    font-size: 20px;
    color: #a29e9c;
    position: relative;
    top: 162px;
  }
  #about {
    color: #141414;
    position: absolute;
    top: 232vh;
  }
}

/* responsiveness tablets */

@media screen and (max-width: 1200px) {
  .heading {
    position: absolute;
    top: 160px;
  }
  .heading span {
    font-size: 65px;
  }

  /* contact me */

  .contact_description_container span {
    color: white;
    font-size: 60px;
    font-family: Brightness;
    text-align: center;
    display: block;
    margin-bottom: 7vh;
    position: relative;
    top: 7vh;
  }
  .contact_description_container p {
    color: white;
    font-size: 18px;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
    top: 2vh;
  }
  .socialbar2 {
    max-width: 218px;
    position: relative;
    top: 5vh;
    margin: auto;
  }

  /* about me */

  .about_description span {
    color: white;
    font-size: 64px;
    font-family: Brightness;
    text-align: center;
    display: block;
    margin-bottom: 7vh;
    position: relative;
    top: 7vh;
  }
  .about_description p {
    color: white;
    font-size: 18px;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0;
    padding: 0;
    position: relative;
    top: 3vh;
  }
}

/* responsiveness normal phones */

@media screen and (max-width: 800px) {
  .main_image img {
    margin-top: 123px;
    width: 100vw;
  }
  body {
    overflow-x: hidden;
  }
  .socialbar {
    display: none;
  }

  /* Description */

  .description_heading {
    color: white;
    font-size: 40px;
    text-align: center;
    font-family: DroidSerif;
  }
  .description_heading p {
    color: white;
    font-size: 40px;
    text-align: center;
    width: 100vw;
    position: relative;
    top: 25vw;
    margin: 0;
    padding: 0;
    font-family: Roboto;
    font-weight: 400;
    font-size: 5vw;
  }

  /* Heading */

  .heading {
    color: white;
    text-align: center;
    position: absolute;
    top: 24vh;
    width: 100vw;
    font-size: 39px;
    font-family: Brightness, sans-serif;
    color: white;
    text-align: center;
    font-size: 39px;
    font-family: Brightness, sans-serif;
  }
  .heading span {
    font-size: 40px;
  }

  /* Fps And Delay */

  .fps_delay_container {
    display: flex;
    flex-wrap: wrap;
  }
  .fps_delay_container img {
    width: 100vw;
  }
  .fpsdelay {
    font-size: 17px;
  }

  /* Contact Me */

  #contact_me {
    flex-wrap: wrap;
  }
  .contact_img img {
    width: 100vw;
  }
  .socialbar2 img {
    width: 10vw;
  }
  .contact_description_container {
    width: 100vw;
    margin-bottom: 17vw;
  }
  .contact_description_container span {
    color: white;
    position: relative;
    top: 5vw;
    font-size: 54px;
    font-family: Brightness;
    width: 100vw;
    display: inline-block;
  }
  .contact_description_container p {
    position: relative;
    top: 0vw;
    color: white;
    font-size: 23px;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0;
    padding: 0;
  }
  .socialbar2 {
    position: relative;
    top: 10vw;
    margin-left: 24vw;
    max-width: 100vw;
  }
  #about_me {
    position: relative;
    top: 85px;
    display: flex;
    flex-wrap: wrap;
  }
  .about_description {
    width: 100vw;
  }
  .about_description span {
    color: white;
    font-size: 54px;
    font-family: Brightness;
    text-align: center;
    display: block;
    margin-bottom: 7vh;
    position: relative;
    top: 0;
  }
  .about_description p {
    color: white;
    font-size: 19px;
    letter-spacing: 0.04em;
    text-align: center;
    margin-bottom: 85px;
    padding: 0;
    position: relative;
    top: 0;
  }
  .about_img img {
    width: 100vw;
  }
}

/* responsiveness thin phones */

@media screen and (max-width: 368px) {
  .header h1 {
    color: #a29c9c;
    position: fixed;
    left: 38px;
    top: 32px;
    margin: 0;
    padding: 0;
    font-family: DroidSerif;
    font-size: 37px;
    font-weight: 100;
  }

  /* main image */

  .main_image img {
    margin-top: 123px;
    width: 100vw;
  }

  body {
    overflow-x: hidden;
  }
  .socialbar {
    display: none;
  }
  /* navbar */

  .navbar {
    position: fixed;
    top: 95px;
    left: 77px;
    font-size: 18px;
    z-index: 1;
  }

  /* Description */

  .description_heading {
    color: white;
    font-size: 40px;
    text-align: center;
    font-family: DroidSerif;
  }
  .description_heading p {
    color: white;
    font-size: 40px;
    text-align: center;
    width: 100vw;
    position: relative;
    top: 25vw;
    margin: 0;
    padding: 0;
    font-family: Roboto;
    font-weight: 400;
    font-size: 5vw;
  }
  .description p {
    color: white;
    font-size: 20px;
    text-align: center;
    position: relative;
    top: 126px;
    margin: 0;
    padding: 0;
    font-family: Roboto;
    font-weight: 400;
    font-size: 15px;
  }

  /* Heading */

  .heading {
    color: white;
    text-align: center;
    position: absolute;
    top: 20vh;
    width: 100vw;
    font-size: 39px;
    font-family: Brightness, sans-serif;
    color: white;
    text-align: center;
    font-size: 39px;
    font-family: Brightness, sans-serif;
  }

  /* Fps And Delay */

  .fps_delay_container {
    display: flex;
    flex-wrap: wrap;
  }
  .fps_delay_container img {
    width: 100vw;
  }
  .fpsdelay {
    font-size: 13px;
  }

  /* Contact Me */

  #contact_me {
    flex-wrap: wrap;
  }
  .contact_img img {
    width: 100vw;
  }
  .socialbar2 img {
    width: 10vw;
  }
  .contact_description_container {
    width: 100vw;
    margin-bottom: 17vw;
  }
  .contact_description_container span {
    color: white;
    position: relative;
    top: 5vw;
    font-size: 43px;
    font-family: Brightness;
    width: 100vw;
    display: inline-block;
  }
  .contact_description_container p {
    position: relative;
    top: 0vw;
    color: white;
    font-size: 17px;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0;
    padding: 0;
  }
  .socialbar2 {
    position: relative;
    top: 10vw;
    margin-left: 24vw;
    max-width: 100vw;
  }
  #about_me {
    position: relative;
    top: 85px;
    display: flex;
    flex-wrap: wrap;
  }
  .about_description {
    width: 100vw;
  }
  .about_description span {
    color: white;
    font-size: 50px;
    font-family: Brightness;
    text-align: center;
    display: block;
    margin-bottom: 7vh;
    position: relative;
    top: 0;
  }
  .about_description p {
    color: white;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-align: center;
    margin-bottom: 85px;
    padding: 0;
    position: relative;
    top: 0;
  }
  .about_img img {
    width: 100vw;
  }
}