@import url('https://fonts.googleapis.com/css2?family=Allura&family=Comfortaa:wght@700&family=Lato:wght@400;700&family=Playfair+Display:wght@900&display=swap');
/* font-family: 'Comfortaa', cursive;
font-family: 'Allura', cursive;
font-family: 'Lato', sans-serif;
font-family: 'Playfair Display', serif; */

:root {
  --clr-white: #fff;
  --text-primary: #232429;

  --gray-600: #7a7b7f;
  --gray-700: #65666c;
  --gray-800: #4e4f55;
  --gray-900: #3a3b40;

  --slate-blue: #7663db;
  --slate-blue-50: #faf9fe;
  --slate-blue-100: #eeecfb;
  --slate-blue-200: #d6d0f4;
  --slate-blue-300: #beb5ee;
  --slate-blue-400: #a79ae8;
  --slate-blue-500: #8d7de1;
  --slate-blue-600: #7360d5;
  --slate-blue-700: #5f50b1;
  --slate-blue-800: #4b3f8c;
  --slate-blue-900: #3c326f;

  --zany-pink-50: #fef9f9;
  --zany-pink-100: #fbe9ec;
  --zany-pink-200: #f5cad1;
  --zany-pink-300: #eeaab5;
  --zany-pink-400: #e88898;
  --zany-pink-500: #d26b7c;
  --zany-pink-600: #ad5866;
  --zany-pink-700: #904955;
  --zany-pink-800: #723a43;
  --zany-pink-900: #5a2e35;

  --light-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
  --dark-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  background-color: var(--gray-900);
  color: var(--slate-blue-50);
}


header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10;
  background-color: var(--slate-blue-800);
  opacity: 0.9;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}
nav > .menu {
  display: flex;
  list-style-type: none;
  font-size: 1.5rem;
}
nav > .menu > li {
  padding: 1rem ;
}
nav a {
  color: var(--slate-blue-100);
  text-decoration: none;
  text-transform: uppercase;
  font-family: 'Comfortaa', cursive;
}
nav a:hover {
  border-bottom: 2px solid var(--slate-blue-200);
}
.hamburger {
  display: none;
}
#home {
  position: relative;
  background: url('./images/background.jpg');
  
  
}
#home > .overlay {
  position: absolute;
  top: 0;
  background-color: var(--slate-blue-900);
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

#home .home-title, #home .home-subtitle {
  z-index: 5;
  margin: 3rem;
}
#home .home-title {
  position: absolute;
  top: 35%;
  font-size: 5rem;
}
#home .home-subtitle {
  position: absolute;
  top: 45%;
  font-family: 'Comfortaa', cursive;
  font-size: 3rem;
}
.codecademy-icon {
  width: 35px;
  margin-top: 5px;
  margin-left: 5px;
}
.home-social {
  position: absolute;
  top: 52%;
  padding: 3rem;
  display: flex;
  align-items: center;
  align-content: center;
  z-index: 5;
}

.home-social .fa-github,
.home-social .fa-linkedin, 
.home-social .fa-free-code-camp, 
.home-social .fa-codepen {
  margin: 0.5rem;
  font-size: 2rem;
  color: var(--slate-blue-200);
}
.home-social .fa-github:hover,
.home-social .fa-linkedin:hover, 
.home-social .fa-free-code-camp:hover {
  color: var(--zany-pink-400);
}


#home, #about {
  height: calc(100vh - 120px);
}
#about, #portfolio, #skills {
  padding-top: 9rem;
  margin: 2rem;
}

#portfolio {
  background-color: var(--slate-blue-200);
  color: var(--text-primary);
  border-radius: 20px;
  box-shadow: var(--dark-shadow);
}
.buttons {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.btn {
  border: none;
  padding: 5px 10px;
  background-color: var(--zany-pink-500);
  width: 100%;
  transition: all ease 1s;
}
.btn:hover {
  background-color: var(--zany-pink-400);
}

.btn a {
  color: var(--clr-white);
  text-decoration: none;
}
.btn a {
  color: var(--clr-white);
  text-decoration: none;
}
.github-btn, .preview-btn {
  font-size: 1rem;
}
.buttons .fa-github, .buttons .fa-eye {
  padding-right: 5px;
}
.title {
  font-family: 'Comfortaa', cursive;
  font-size: 3rem;
  margin: 1rem 0;
  letter-spacing: 0.1rem;
  text-align: center;
  margin: 4rem 0;
  text-transform: uppercase;
}
.about {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.about img {
  border-radius: 49% 51% 45% 55% / 32% 66% 34% 68%;
  border: var(--slate-blue-400) 5px solid;
}
.col-2:last-child {
  flex-basis: 80%;
}
.about p {
  font-size: 1.4rem;
  letter-spacing: 0.1rem;
  padding: 0.5rem 0;
}

.my-skills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: var(--zany-pink-50);
  padding: 2rem;
  border-radius: 20px;
  box-shadow: var(--light-shadow);
}

.my-skills img {
  padding: 1rem;
  margin: 1rem auto;
}

footer {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
  background-color: var(--slate-blue-200);
  color: var(--slate-blue-900);
  align-content: center;
  flex-direction: row;
  align-items: flex-end;

}

footer .contact {
  width: 50%;
  font-family: 'Comfortaa', cursive;
  font-size: 1.2rem;
}
footer .contact p {
  margin-bottom: 1rem;
}
footer .copy {
  width: 50%;
}

.social-links {
  font-size: 2rem;
  padding-right: 1rem;
  color: var(--slate-blue-400);
}

.signature {
  font-family: 'Allura', cursive;
  font-size: 1.5rem;
}

@media (max-width: 900px) {
  .menuItem {
    display: block;
    margin: 2rem 4rem;
    font-size: 1.8rem;
    color: white;
    text-decoration: none;
  }
  
  .menuItem:hover {
    text-decoration: underline;
  }
  
  .hamburger {
    display: block;
    position: fixed;
    z-index: 100;
    top: 1rem;
    right: 1rem;
    padding: 4px;
    border: none;
    color: var(--slate-blue-100);
    background: transparent;
    cursor: pointer;
  }
  
  .closeIcon {
    display: none;
  }
  .fa-bars, .fa-times {
    font-size: 1.5rem;
  }
  .menu {
    position: fixed;
    transform: translateY(-100%);
    transition: transform 0.2s;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: black;
    color: white;
    list-style: none;
    padding-top: 4rem;
    flex-direction: column;
  }
  
  .showMenu {
    transform: translateY(0);
  }
  #home .home-title {
    position: absolute;
    top: 35%;
    font-size: 3.5rem;
  }
  #home .home-subtitle {
    position: absolute;
    top: 45%;
    font-family: 'Comfortaa', cursive;
    font-size: 2rem;
  }

  #about, #portfolio, #skills {
  padding-top: 3rem;
  margin: 2rem;
}
  .about {
    flex-direction: column;
  }
  
  .col-2:last-child {
    flex-basis: 100%;
  }

  .my-skills {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  #home .home-title {
    position: absolute;
    top: 25%;
    font-size: 3.5rem;
  }
  #home .home-subtitle {
    position: absolute;
    top: 45%;
    font-family: 'Comfortaa', cursive;
    font-size: 2rem;
  }

  .my-skills {
    grid-template-columns: repeat(2, 1fr);
  }
.title {
  font-size: 2.5rem;
}
  #about {
    height: auto;
  }

  footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  footer .contact {
    width: 100%;
    margin-bottom: 1rem;
  }
  footer .copy {
    width: 100%;
  }
}

@media (max-width: 400px) {
  .my-skills {
    grid-template-columns: 1fr;
  }
}