:root {
  --font-family-base: "Playfair Display", serif;
  --font-family-alt: "Quicksand", sans-serif;

  --font-size-h1: 3rem;
  --font-size-h2: 2.25rem;
  --font-size-h3: 1.25rem;
  --font-size-body: 1rem;

  --font-weight-reg: 300;
  --font-weight-bold: 900;

  --color-light: #f8f8f8;
  --color-dark: #303030;
  --color-accent: #009688;
  --gray0: #f8f8f8;
  --gray1: #dbe1e8;
  --gray5: #2a2e35;
  --gray6: #12181b;

  --bg: var(--gray0);
  --bg-nav: var(--color-dark);
  --text: var(--gray6);
}

.dark {
  --bg: var(--gray5);
  --bg-nav: var(--color-dark);
  --text: var(--gray0);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-alt);
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-size: var(--font-size-body);
  line-height: 1.6;
  transition: background 0.5s ease-in-out, color 1s ease-in-out;
}

section {
  padding: 5em 2em;
}
h1,
h2,
h3 {
  line-height: 1;
  margin: 0;
}

h1 {
  font-size: var(--font-size-h1);
}
h2 {
  font-size: var(--font-size-h2);
}
h3 {
  font-size: var(--font-size-h3);
}

.nav {
  z-index: 10;
  height: 70px;
  width: 100%;
  background: var(--color-dark);
  color: var(--text);
  transition: width 0.6s ease-in;
}

.nav__list {
  list-style: none;
  display: flex;
  height: 100%;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  margin: 0;
  padding: 0;
}

.nav__link,
.theme__toggle {
  color: var(--gray0);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h3);
  text-decoration: none;
}

.nav__link:hover,
.theme__toggle:hover {
  color: var(--color-accent);
  cursor: pointer;
}

.theme__toggle--active {
  animation: bounce 0.9s ease-in-out;
}
@keyframes bounce {
  0% {
    transform: translateY(100%);
  }
  25% {
    transform: translateY(-30%);
  }
  50% {
    transform: translateY(50%);
  }
  75% {
    transform: translateY(-30%);
  }
  100% {
    transform: translateY(0%);
  }
}

header {
  padding: 1em;
  background: var(--color-dark);
  clip-path: polygon(50% 0%, 100% 0, 100% 65%, 50% 100%, 0 65%, 0 0);
  text-align: center;
  margin-bottom: 1em;
  padding-bottom: 3.5em;
  color: var(--color-light);
}

.header__logo:hover {
  animation: color-rotate 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes color-rotate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
.header__logo {
  padding-left: 2.5em;
}

img.header__logo {
  width: 250px;
  height: 180px;
}
.header__title {
  margin-top: 1em;
}
.about-me,
.projects,
.skills {
  max-width: 1000px;
  margin: 0 auto;
}
.gig_img {
  margin-top: 15px;
  height: auto;
  width: 100%;
}

.about-me__img {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  object-fit:cover;
 
}
.about-me__img--dark,
.gig_img--dark {
  filter: grayscale(100%);
}

.section__title {
  margin-bottom: 0.25em;
  color: var(--text);
}
.section__subtitle {
  margin: 0;
}
.section__subtitle--intro,
.section__subtitle--about {
  background: var(--color-accent);
  font-family: var(--font-family-alt);
  padding: 0.25em 1em;
  margin-bottom: 1em;
}

.section__body {
  color: var(--text);
  padding: 1em;
}
.skill-list {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 1em 0;
  padding: 0;
}
.skill-list__item {
  margin: 0 0.5em;
  font-size: 40px;
}

.footer {
  background: var(--gray6);
  color: var(--color-accent);
  text-align: center;
  padding: 2rem 0;
  font-size: var(--font-size-h3);
  position: absolute;
  width: 100%;
}

.footer a {
  color: inherit;
  text-decoration: none;
}

.footer__link {
  font-size: var(--font-size-h3);
}

.footer__link:hover,
.contact-list__link:hover {
  opacity: 0.7;
}

.footer__link:hover {
  text-decoration: underline;
}

.contact-list {
  list-style: none;
  display: flex;
  justify-content: center;
  margin: 1em 0;
  padding: 0;
}
.contact-list__item {
  margin: 0 0.5em;
}

@media (max-width: 600px) {
  :root {
    --font-size-h1: 4.5;
    --font-size-h2: 1.75rem;
    --font-size-body: 1.125rem;
  }
  .nav {
    position: fixed;
    bottom: 0;
    width: 100vw;
    height: 5rem;
    margin-top: 20px;
    border-radius: 5px 5px 0 0;
  }
  .nav__link {
    font-size: 0.9em;
  }

  .footer {
    margin-bottom: 3em;
    position: relative;
  }
  h1 {
    font-size: 1em;
  }

  .header__logo {
    width: 200px;
    height: 130px;
  }

  .nav__list {
    justify-content: space-evenly;
  }

  body {
    margin: 0;
  }
  .about-me {
    display: grid;
    grid-template-areas:
      "title"
      "subtitle"
      "img"
      "text";
    grid-column-gap: 2em;
  }

  .section__title--about {
    grid-area: title;
  }

  .about-me__img {
    place-self: center;
    grid-area: img;
    position: relative;
    z-index: 2;
  }

  p {
    font-size: 1rem;
  }
  .skill-list__item {
    font-size: 2rem;
  }
  .footer__link {
    font-size: 1rem;
  }
  .contact-list__item {
    padding-bottom: 10px;
  }
  .skill-list {
    display: block;
  }
  .skill-list__item {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 600px) {
  :root {
    --font-size-h1: 4.5;
    --font-size-h2: 2.75rem;
    --font-size-h3: 1.5rem;
    --font-size-body: 1.125rem;
  }
  .about-me {
    display: grid;
    grid-template-columns: 1fr 200px;
    grid-template-areas:
      "title img"
      "subtitle img"
      "text img"
      "gig_img gig_img";
    grid-column-gap: 2em;
  }

  .section__title--about {
    grid-area: title;
  }
  .gig_img {
    grid-area: gig_img;
  }

  .section__subtitle--about {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    width: calc(100% + 1em);
    padding-left: 1em;
  }

  .about-me__img {
    grid-area: img;
    position: relative;
    z-index: 2;
  }
}