@import url("https://fonts.googleapis.com/css2?family=Barlow&family=Barlow+Condensed&family=Bellefair&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
picture {
  margin: 0;
}

body {
  line-height: 1.5;
  min-height: 100%;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *,
*::before,
*::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.bg-color-light-blue {
  background-color: #c8e3ff;
}

.bg-color-dark {
  background-color: #00040c;
}

.bg-color-white {
  background-color: #ffffff;
}

.text-color-dark {
  color: #00040c;
}

.text-color-white {
  color: #ffffff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-to-content {
  position: absolute;
  z-index: 9999;
  background: #ffffff;
  color: #00040c;
  padding: 0.5em 1em;
  margin-inline: auto;
  transform: translateY(-100%);
  transition: transform 250ms ease-in;
}
.skip-to-content:focus {
  transform: translateY(0);
}

.ff-barlow {
  font-family: "Barlow", sans-serif;
}

.ff-barlow-condensed {
  font-family: "Barlow Condensed", sans-serif;
}

.ff-bellefair {
  font-family: "Bellefair", serif;
}

.letter-spacing-1 {
  letter-spacing: 4.75px;
}

.letter-spacing-2 {
  letter-spacing: 2.7px;
}

.letter-spacing-3 {
  letter-spacing: 2.35;
}

.large-button {
  font-size: 1rem;
  width: 75px;
  position: relative;
  z-index: 1;
  place-items: center;
  color: #00040c;
  padding: 0 2.5em;
  border-radius: 50%;
  aspect-ratio: 1;
  text-decoration: none;
}
.large-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 500ms linear, transform 750ms ease-in-out;
}
.large-button:hover::after, .large-button:focus::after {
  opacity: 1;
  transform: scale(1.5);
}

.logo {
  margin: 1.5rem clamp(1.5rem, 5vw, 3.5rem);
}

.primary-header {
  justify-content: space-between;
  align-items: center;
}

.primary-navigation {
  gap: clamp(1.5rem, 5vw, 3.5rem);
  list-style: none;
  padding: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.8);
}
.primary-navigation a {
  text-decoration: none;
}

.mobile-nav-toggle {
  display: none;
}

@media (max-width: 35rem) {
  .primary-navigation {
    position: fixed;
    z-index: 1000;
    inset: 0 0 0 30%;
    list-style: none;
    padding: min(20rem, 15vh) 2rem;
    margin: 0;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 500ms ease-in-out;
  }
  .primary-navigation .underline-indicators > .active {
    border: 0;
  }

  .primary-navigation[data-visible=true] {
    transform: translateX(0);
  }

  .mobile-nav-toggle {
    display: block;
    position: absolute;
    z-index: 2000;
    right: 1rem;
    top: 2rem;
    background: transparent;
    background-image: url(../../assets/shared/icon-hamburger.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 1.5rem;
    aspect-ratio: 1;
    border: 0;
    transition: background-image 500ms ease;
  }
  .mobile-nav-toggle[aria-expanded=true] {
    background-image: url(../../assets/shared/icon-close.svg);
  }
  .mobile-nav-toggle:focus-visible {
    outline: 5px solid white;
    outline-offset: 5px;
  }
}
@media (min-width: 35em) {
  .primary-navigation {
    padding-inline: clamp(3rem, 7vw, 7rem);
  }
}
@media (min-width: 45em) {
  .primary-header::after {
    content: "";
    display: block;
    position: relative;
    height: 1px;
    width: 100%;
    margin-right: -2.5rem;
    background: rgba(255, 255, 255, 0.5);
    order: 1;
  }

  nav {
    order: 2;
  }

  .primary-navigation {
    margin-block: 2rem;
  }
}
.underline-indicators > * {
  cursor: pointer;
  padding: 0.5rem 0;
  border: 0;
  border-bottom: 0.2rem solid #ffffff;
  background-color: transparent;
}
@media (max-width: 35rem) {
  .underline-indicators > * {
    margin-left: 0;
  }
}

.underline-indicators > *:hover,
.underline-indicators > *:focus {
  border-color: rgba(255, 222, 40, 0.4);
}

.underline-indicators > .active,
.underline-indicators > [aria-selected=true] {
  border-color: #ffde28;
}

.background-image {
  background-position: -200px 0px;
  background-image: url("../../assets/home/bike-vertical.jpg");
}

@media (min-width: 561px) {
  .background-image {
    background-position: 0px 0px;
  }
}
@media (min-width: 900px) {
  .background-image {
    background: url("../../assets/home/bike-horizontal.jpg") no-repeat center center fixed;
    background-size: cover;
  }
}
.home-container {
  margin-bottom: 1rem;
}
.home-container--leading-text, .home-container--name {
  text-align: center;
}
.home-container--leading-text {
  font-size: 1.3rem;
}
.home-container--name {
  font-size: 2.5rem;
}
.home-container--leading-text {
  font-size: 1.5em;
}
.home-container--name {
  font-size: 2.1em;
}
@media (min-width: 768px) {
  .home-container--name {
    font-size: 5em;
  }
}
.home-container--content {
  padding: 0.5rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.5);
}
@media (min-width: 1001px) {
  .home-container--leading-text, .home-container--name {
    text-align: left;
  }
  .home-container--content {
    max-width: 70%;
  }
}
@media (min-width: 1200px) {
  .home-container--content {
    max-width: 50%;
  }
}

@media (min-width: 300px) {
  .large-button {
    font-size: 1.5rem;
    width: 75px;
  }
}
@media (min-width: 350px) {
  .large-button {
    font-size: 2rem;
    width: 150px;
  }
}
@media (min-width: 1001px) {
  .large-button {
    position: absolute;
    right: 10vw;
    bottom: 15vh;
  }
}
@media (min-width: 1200px) {
  .large-button {
    right: 20vw;
  }
}

.page-title {
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0;
}

ul li + li,
.project-button {
  margin-left: 1rem;
}

.portfolio-container {
  display: grid;
  grid-gap: 1rem;
  grid-template-areas: "project-preview-container" "project-content-container";
}
@media (min-width: 1000px) {
  .portfolio-container {
    grid-template-areas: "project-preview-container project-content-container";
  }
}

.project-preview-container {
  grid-area: project-preview-container;
}

.project-content-container {
  grid-area: project-content-container;
}

#languages-list {
  flex-wrap: wrap;
}

.about-pictures-container {
  margin: 1rem 0;
  justify-content: center;
  display: grid;
  grid-area: about-pictures-container;
  grid-gap: 4rem;
  grid-template-areas: "cyclist-picture runner-picture" "camper-picture gamer-picture" "coder-picture traveler-picture" "green-energy-picture teacher-picture" "environmentalist-picture .";
}
@media (min-width: 744px) {
  .about-pictures-container {
    grid-template-areas: "cyclist-picture runner-picture camper-picture" "gamer-picture coder-picture traveler-picture" "green-energy-picture teacher-picture environmentalist-picture";
  }
}
.about-pictures-container .picture-container > div {
  background-color: #ffffff;
}
@media screen and (max-width: 1199px) {
  .about-pictures-container .picture-container > div {
    opacity: 1;
  }
}
@media (min-width: 1200px) {
  .about-pictures-container .picture-container {
    position: relative;
    overflow: hidden;
  }
  .about-pictures-container .picture-container > img {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
  }
  .about-pictures-container .picture-container > div {
    position: absolute;
    inset: 0;
    font-size: 1rem;
    padding: 1rem;
    background: rgba(255, 222, 40, 0.4);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media (min-width: 1200px) and (min-width: 1200px) {
  .about-pictures-container .picture-container > div {
    height: 119.54px;
  }
}
@media (min-width: 1200px) and (min-width: 1400px) {
  .about-pictures-container .picture-container > div {
    height: 130px;
  }
}
@media (min-width: 1200px) {
  .about-pictures-container .picture-container > img, .about-pictures-container .picture-container > .about-pictures-container .picture-container--caption {
    transition: 200ms ease-in-out;
  }
}
@media (min-width: 1200px) {
  .about-pictures-container .picture-container:hover > img.blur {
    filter: blur(5px);
  }
}
@media (min-width: 1200px) {
  .about-pictures-container .picture-container > div.fade {
    opacity: 0;
  }
}
@media (min-width: 1200px) {
  .about-pictures-container .picture-container:hover > div.fade {
    opacity: 1;
  }
}

#cyclist-picture {
  grid-area: cyclist-picture;
}

#runner-picture {
  grid-area: runner-picture;
}

#camper-picture {
  grid-area: camper-picture;
}

#gamer-picture {
  grid-area: gamer-picture;
}

#coder-picture {
  grid-area: coder-picture;
}

#traveler-picture {
  grid-area: traveler-picture;
}

#green-energy-picture {
  grid-area: green-energy-picture;
}

#teacher-picture {
  grid-area: teacher-picture;
}

#environmentalist-picture {
  grid-area: environmentalist-picture;
}

.about-content-container {
  grid-area: about-content-container;
}
.about-content-container .about-content-title-group--title {
  margin: 1rem 0;
  text-align: center;
  letter-spacing: 0.45rem;
}
.about-content-container .about-content-title-group--picture {
  margin: 0 auto;
}
@media (min-width: 744px) {
  .about-content-container .about-content-title-group {
    display: flex;
    align-items: center;
  }
  .about-content-container .about-content-title-group--title {
    flex-grow: 0;
  }
  .about-content-container .about-content-title-group--divider {
    flex-grow: 1;
    height: 1px;
    margin: 0 1rem;
    background-color: #00040c;
    opacity: 0.25;
  }
  .about-content-container .about-content-title-group--picture {
    flex-grow: 0;
  }
}
.about-content-container--text {
  margin-bottom: 1rem;
}
@media (min-width: 744px) {
  .about-content-container .divider-1 {
    display: none;
  }
}

@media (min-width: 1200px) {
  .about-page-title {
    grid-area: about-page-title;
  }

  .about-container {
    display: grid;
    grid-gap: 4rem;
    grid-template-areas: "about-page-title ." "about-pictures-container about-content-container";
  }
}
.contact-content-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.contact-content-container .contact-content-title-group--title {
  margin: 1rem 0;
  text-align: center;
  letter-spacing: 0.45rem;
}
.contact-content-container .contact-content-title-group--picture {
  margin: 0 auto;
}
@media (min-width: 744px) {
  .contact-content-container .contact-content-title-group {
    display: flex;
    align-items: center;
  }
  .contact-content-container .contact-content-title-group--title {
    flex-grow: 0;
  }
  .contact-content-container .contact-content-title-group--divider {
    flex-grow: 1;
    height: 1px;
    margin: 0 1rem;
    background-color: #00040c;
    opacity: 0.25;
  }
  .contact-content-container .contact-content-title-group--picture {
    flex-grow: 0;
  }
}
.contact-content-container--text {
  margin-bottom: 1rem;
}
.contact-content-container--divider {
  display: none;
}
@media (min-width: 744px) {
  .contact-content-container--divider {
    display: block;
  }
}
@media (min-width: 744px) {
  .contact-content-container .divider-1 {
    display: none;
  }
}

@media (min-width: 1000px) {
  .contact-page-title {
    grid-area: contact-page-title;
  }

  .contact-container {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
  }

  .contact-content-container,
.contact-form-container {
    width: 50%;
  }
}
/*
* Note:
* Watch SASS extension doesn't support @use and @forward.
* Watch your sass with the terminal:
*    sass --watch scss:css
*/
a:hover {
  color: #00040c;
}

.link-design {
  color: #00040c;
}
.link-design:hover {
  color: #ffffff;
  opacity: 0.75;
}

/*# sourceMappingURL=main.css.map */