@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap");

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

html { scroll-behavior: smooth }

body {
  --bg: #2A2D32;
  font-family: "Quicksand", sans-serif;
  color: #e0e0e0;
  background-color: black;
  display: flex;
  justify-content: center;
}

a { text-decoration: 1px dashed underline }
a, h1, .header, .project-made-with-tag { color: #fff }

.main { width: 100% }

.section {
  max-height: 100vh;
  padding: 1rem;
  display: flex;
  justify-content: center;
  background-color: var(--bg);
}
.section:nth-child(2n + 1) {
  background-color: rgb(from var(--bg) r g b / 90%);
}
.landing-content, .about-content, .projects-content, .contact-content, .work-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.header {
  background-color: rgb(from var(--bg) r g b / 30%);
  backdrop-filter: blur(2px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4rem;
  padding: 1rem 0.5rem 1rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}
.header-logo {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2rem;
}

.nav-list {
  list-style-type: none;
  line-height: 1rem;
  display: flex;
}
.nav-list-link {
  text-decoration: none;
  padding: 0.75rem 0.5rem;
  border-radius: 0.25rem;
  background-color: #fff0;
  transition: background-color 0.3s ease;
}
.nav-list-link:hover { background-color: rgb(255 255 255 / 20%) }

.landing {
  position: relative;
  height: 60rem;
}
.landing::before {
  content: "";
  background-image: url("./images/fotis-fotopoulos-DuHKoV44prg-unsplash.jpg");
  background-position: center;
  background-size: cover;
  filter: blur(4px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 25%;
  height: 60rem;
  max-height: 100vh;
  overflow: hidden;
}
.landing-content {
  position: relative;
  max-width: 50rem;
}

.skill-icons { font-size: 150% }
.about { height: 60rem }
.about-content { max-width: 50rem }
.projects, .work { max-height: unset }

.project {
  display: flex;
  flex-flow: row wrap;
  gap: 1rem;
}
.project-description {
  max-width: 45rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 30rem;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.project-made-with {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.project-made-with-tag {
  padding: 0.25rem;
  background-color: rgb(255 255 255 / 15%);
  border-radius: 0.5rem;
}
.project-image {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  transition: transform 0.2s;
}
.project-image:hover { transform: scale(1.2) }
.project-image-wheel-of-names { width: 500px }
.project-image-discord-bot { width: 272px }
.project-image-darci { width: 500px }
.project-image-sveltewheel { width: 474px }

.work-content { max-width: 50rem }
.work-experience {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.work-experience-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.work-experience-date {
  font-size: 0.9rem;
  color: #ccc;
}

.contact-content { max-width: 48rem }
.contact-links {
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 1rem 3rem;
  margin-right: 2.5rem;
}
.contact-links-link { padding: 0.25rem }

.fa-arrow-right-long, .fa-download { margin-left: 0.5rem }

@media screen and (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
}