html {
  -webkit-overflow-scrolling: touch;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

body {
  margin: 0;
  padding: 0;
}

/* Style for Home Page */
.home {
  background: rgb(31, 31, 31);
  background-size: 100%;
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-template-rows: 33.3% 33.3% 33.3%;
  text-align: center;
  height: 100%;
  width: auto;
}

.title {
  color: white;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
  width: 50%;
  margin: 0 auto;
}

.title-lbl {
  border-top: solid;
  border-bottom: solid;
  font-family: "Alegreya Sans SC";
  font-size: calc(25px + 2.4vw);
  margin-top: -0.8vh;
  padding: 0.2em;
}

.title-descpt {
  font-family: "Julius Sans One";
  font-size: calc(16px + 0.6vw);
}

.navigation {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 1;
}

.navigation .fa-bars {
  color: whitesmoke;
  display: none;
}

.navigation ul {
  margin-top: 4vh;
  margin-right: 6vh;
  display: block;
}
.navigation li {
  display: inline-block;
  opacity: 75%;
  font-size: calc(14px + 0.4vw);
  padding-left: 2.5%;
  padding-right: 2.5%;
  transition: transform 1.5s;
  font-family: "Varela Round";
  font-weight: 700;
}

.navigation li:hover,
.navigation li:active {
  opacity: 100%;
  transform: translateY(10px);
}

.navigation a {
  text-decoration: none;
  color: white;
  border-radius: 8%;
  padding: 0.3em;
}
.navigation a:hover,
.navigation a:active {
  color: white;
  background-color: rgba(0, 0, 0, 0);
}

.navigation .home-btn {
  border-bottom: solid;
  padding-bottom: 2%;
}

.social_media_links {
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-left: 70%;
  margin-bottom: 7%;
}

.social_media_links .fa-brands {
  padding: 5px;
  font-size: calc(20px + 1.1vw);
  width: calc(20px + 1.1vw);
  height: calc(20px + 1.1vw);
  text-decoration: none;
  text-align: center;
  margin-bottom: 17%;
  color: white;
  transition: transform 1s ease;
}

/* hover effect - same as before */
.social_media_links .fa-brands:hover,
.social_media_links .fa-brands:active {
  transform: translateX(-10px);
}

/* Instagram gradient fix */
.social_media_links .fa-instagram:hover::before,
.social_media_links .fa-instagram:active::before {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* LinkedIn */
.social_media_links .fa-linkedin:hover::before,
.social_media_links .fa-linkedin:active::before {
  background: #2867b2;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* GitHub */
.social_media_links .fa-github:hover::before,
.social_media_links .fa-github:active::before {
  color: #ffffff;
  background: #211f1f;
}

.home .arrow-down {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 3;
  margin-top: 18vh;
}

.home .arrow-down .fa {
  background: rgba(255, 255, 255, 0);
  width: calc(25px + 3vw);
  height: calc(25px + 3vw);
  font-size: calc(25px + 3vw);
  color: white;
  -moz-animation: wiggle 1s linear infinite;
  -o-animation: wiggle 1s linear infinite;
  -webkit-animation: wiggle 1s linear infinite;
  animation: wiggle 1s linear infinite;
}

@-moz-keyframes wiggle {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0px);
  }
}

@-o-keyframes wiggle {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0px);
  }
}

@-webkit-keyframes wiggle {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0px);
  }
}

@keyframes wiggle {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0px);
  }
}

/* Style for About Page */
.about {
  /*background: url(/pictures/blackwhite.jpg);*/
  background: rgb(31, 31, 31);

  height: auto;
  display: flex;
  flex-direction: column;
  border-top: solid rgb(85, 84, 84) 0.5px;
  justify-content: center;
  padding-bottom: 50px;
}

.about_title {
  width: 250px;
  text-align: center;
  color: whitesmoke;
  align-self: center;
}

.about_title h1 {
  font-family: "Julius Sans One";
  font-size: calc(20px + 1vw);
  border-bottom: solid;
  padding: 0.8em;
  border-color: rgb(92, 155, 238);
}

.about_text {
  text-align: center;
  color: whitesmoke;
}

.about_text p {
  font-family: "Varela Round";
  font-size: calc(16px + 0.4vw);
  margin: 0 auto;
  width: 50vw;
  margin-top: 5%;
}

.about_text a {
  text-decoration: none;
  color: rgb(92, 155, 238);
}

.about_CV {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
}

.stack {
  width: 100%;
  display: flex;
  align-self: center;
  flex-direction: column;
  align-items: center;
}

.stack h1 {
  font-family: "Alegreya Sans SC";
  font-size: calc(25px + 1.2vw);
  text-align: center;
  border-bottom: solid grey;
  width: calc(140px + 8vw);
  color: rgb(92, 155, 238);
}

.stack a {
  text-decoration: none;  /* removes underline */
  color: inherit;
}

/* Style for Portfolio */

.portfolio {
  background: rgb(31, 31, 31);
  background-size: 100%;
  height: auto;
  border-top: solid rgb(85, 84, 84) 0.5px;
  display: flex;
  flex-direction: column;
  justify-content: center; 
}

.portfolio_title {
  text-align: center;
  color: whitesmoke;
  align-self: center;
  width: calc(140px + 8vw);
}

.portfolio_title h1 {
  font-family: "Julius Sans One";
  font-size: calc(20px + 1vw);
  border-bottom: solid;
  padding: 0.8em;
  border-color: rgb(238, 94, 94);
}

.portfolio_projects {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.portfolio_projects .project {
  color: whitesmoke;
  border: solid;
  border-color: rgb(238, 94, 94);
  height: calc(100px + 13vw);
  width: calc(150px + 40vw);
  margin-bottom: 5%;

  transition: transform 2s ease;
}

.portfolio_projects .project:hover,
.portfolio_projects .project:active {
  background: rgb(179, 97, 97);
  transform: scale(1.1);
}

.project_entry_title {
  text-align: center;

  font-family: "Varela Round";
  font-size: calc(16px + 1vw);
  color: whitesmoke;
}

.contact {
  background: rgba(31, 31, 31);
  border-top: solid rgb(85, 84, 84) 0.5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 50px;
}
.contact_title {
  text-align: center;
  color: whitesmoke;
  align-self: center;
  width: 250px;
}

.contact_title h1 {
  font-family: "Julius Sans One";
  font-size: calc(20px + 1vw);
  border-bottom: solid;
  padding: 1rem;
  border-color: lightgreen;
}

.contact_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact_content h1 {
  color: lightgreen;
  font-size: calc(16px + 1vw);
  font-family: "Varela Round";
  padding: 1em;
  width: calc(500px + 0.5vw);
}

.submit_btn {
  width: calc(200px + 0.5vw);
  height: 6vh;
  color: rgba(31, 31, 31);
  border: solid;
  border-radius: 20px;
  background: lightgreen;;
  font-family: "Varela Round";
  font-size: calc(16px + 0.23vw);
  transition: transform 1s ease;
  text-decoration:none; 
  text-align: center;
  align-content: center;
}

.submit_btn:hover,
.submit_btn:active {
  transform: scale(1.05);
  color: rgba(31, 31, 31);
}

.footer {
  background: rgb(24, 24, 24);
  height: 10%;
  border-top: solid rgb(85, 84, 84) 0.5px;
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-template-rows: auto;
}

.footer_copyright {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 1;
  text-align: center;
}

.footer_copyright h1 {
  margin-top: 6%;
  font-size: calc(5px + 0.5vw);
  color: whitesmoke;
  font-family: "Varela Round";
}

.footer_navigation {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
}

.footer_navigation ul {
  margin-top: 6%;
  display: flex;
  justify-content: space-between;
  list-style-type: none;
}

.footer_navigation li {
  opacity: 75%;
  font-size: calc(6px + 0.4vw);
  font-family: "Varela Round";
  font-weight: 700;
}

.footer_navigation li:hover,
.footer_navigation li:active {
  opacity: 100%;
}

.footer_navigation a {
  color: white;
  text-decoration: none;
}
.footer_navigation a:hover,
.footer_navigation a:active {
  color: white;
  background-color: rgba(0, 0, 0, 0);
}

.footer_links {
  grid-column-start: 3;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 1;
  display: inline-block;
  text-align: center;
}
.footer_links .fa-brands {
  margin-top: 5%;
  font-size: calc(10px + 0.9vw);
  text-decoration: none;
  color: whitesmoke;
  opacity: 75%;
  margin-right: 3%;
}

.footer_links .fa-brands:hover,
.footer_links .fa-brands:active {
  opacity: 100%;
}

@media (max-width: 450px) {
  .navigation button {
    background: transparent;
  }
  .navigation .fa-bars {
    color: whitesmoke;
    display: inline-block;
    font-size: calc(25px + 4vw);
    margin-top: 3vh;
    margin-left: 75vw;
  }
  .navigation .navigation_list {
    flex-direction: column;
    margin-top: 7vh;
    display: none;
  }

  .navigation li {
    display: inline-block;
    opacity: 75%;
    font-size: calc(35px + 1vw);
    padding-left: 2.5%;
    padding-right: 2.5%;
    margin-top: 5%;
    transition: transform 1.5s;
    font-family: "Varela Round";
    font-weight: 700;
  }

  .navigation li:hover,
  .navigation li:active {
    opacity: 100%;
    transform: none;
  }

  .navigation a {
    text-decoration: none;
    color: white;
    padding: 0.3em;
  }
  .navigation a:hover,
  .navigation a:active {
    color: white;
    background-color: rgba(0, 0, 0, 0);
  }

  .navigation .home-btn {
    border-bottom: none;
  }
}

@media (max-width: 600px) {
  .contact {
    background: rgba(31, 31, 31);
    background-size: 100%;
    height: auto;
    border-top: solid rgb(85, 84, 84) 0.5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .contact_title {
    text-align: center;
    margin-top: 0%;
    color: whitesmoke;
    margin: 0 auto;
    width: 60%;
  }
  
  .contact_content h1 {
    color: lightgreen;
    font-size: calc(12px + 1vw);
    font-family: "Varela Round";
    padding: 1em;
    width: calc(150px + 1vw);
  }

  .footer {
    background: rgb(24, 24, 24);
    height: auto;
    border-top: solid rgb(85, 84, 84) 0.5px;
    display: flex;
    flex-direction: column;
  }

  .footer_copyright {
    margin: 0 auto;
  }

  .footer_copyright h1 {
    font-size: calc(7px + 0.5vw);
    color: whitesmoke;
    font-family: "Varela Round";
    margin-top: 10%;
    margin-bottom: 5%;
  }

  .footer_navigation {
    margin-right: 28px;
  }

  .footer_navigation ul {
    align-self: center;
    margin-top: 6%;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
  }

  .footer_navigation li {
    margin-top: 2%;
    opacity: 75%;
    font-size: calc(10px + 0.4vw);
    font-family: "Varela Round";
    font-weight: 700;
  }

  .footer_navigation li:hover {
    opacity: 100%;
  }

  .footer_navigation a {
    color: white;
    text-decoration: none;
  }
  .footer_navigation a:hover {
    color: white;
    background-color: rgba(0, 0, 0, 0);
  }

  .footer_links {
    display: flex;
    flex-direction: row;
    align-self: center;
  }
  .footer_links .fa-brands {
    margin-top: 5%;
    padding: 1vw;
    font-size: calc(20px + 0.4vw);
    text-decoration: none;
    color: whitesmoke;
    opacity: 75%;
  }
}