/* src/index.css */
:root {
  --clr-primary-700: #000;
  --clr-primary-400: #686c8d;
  --clr-primary-300: #b6b8c9;
  --clr-primary-100: #fff;
  --ff-primary: "Blinker", sans-serif;
  --ff-accent: "Arvo", serif;
  --fs-300: .5rem;
  --fs-400: .875rem;
  --fs-500: 1.375rem;
  --fs-600: 2rem;
  --fs-700: 3.125rem;
  --fw-400: 400;
  --spacer: 1.25rem;
}

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

h1, h2, h3, h4, p {
  font-weight: var(--fw-400);
  margin: 0;
}

img {
  width: 100%;
}

.flow-content > * + * {
  margin-top: var(--spacer);
}

.flow-content--small {
  --spacer: .625rem;
}

@media (width <= 26em) or (width >= 50em) {
  .wrap-flow > * + * {
    padding-top: var(--spacer);
  }
}

@media (width <= 50em) {
  .content-wrapper {
    padding: 0 1em;
  }

  .optional-content {
    display: none;
  }
}

.nowrap {
  white-space: nowrap;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-stretch {
  justify-content: center;
}

.flex-stretch > div {
  flex-grow: 1;
}

.grid {
  display: grid;
}

.grid-column-auto {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-items: stretch;
}

.grid-gap {
  gap: var(--spacer);
}

.grid-gap--small {
  --spacer: .625rem;
}

.center {
  text-align: center;
}

ul.center {
  width: -moz-fit-content;
  width: fit-content;
  margin: auto;
}

ul.no-deco {
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
}

.dark-bg {
  color: var(--clr-primary-100);
  background-color: var(--clr-primary-400);
}

.border-separator {
  padding-bottom: 1rem;
}

@media (width >= 26em) {
  .border-separator > div {
    padding-left: .5em;
  }

  .border-separator div:first-child {
    border-right: 2px solid;
  }

  .border-separator div:last-child {
    border-left: 2px solid;
  }
}

header {
  grid-area: header;
}

#work-experience {
  grid-area: work-experience;
}

#education {
  grid-area: education;
}

#non-profit-work {
  grid-area: non-profit-work;
}

#software-skills {
  grid-area: software-skills;
}

#contact {
  grid-area: contact;
}

#references {
  grid-area: references;
}

footer {
  grid-area: footer;
}

.wrapper {
  background-color: var(--clr-primary-100);
  display: grid;
  gap: var(--spacer);
  grid-template-areas: "header" "work-experience" "education" "non-profit-work" "software-skills" "contact" "references" "footer";
  max-width: 75rem;
  margin: auto;
}

@media (width >= 50em) {
  .wrapper {
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "header           header" "education        work-experience" "software-skills  non-profit-work" "software-skills  references" "software-skills  contact" "software-skills  footer";
    gap: 0;
  }

  .border-separator div:first-child {
    border-right: 0;
  }

  .border-separator div:last-child {
    border-left: 0;
  }

  section, footer {
    padding: var(--spacer) var(--spacer) 0 var(--spacer);
  }

  #work-experience h2, #non-profit-work h2, #references h2 {
    text-align: left;
  }

  #education {
    border-radius: 0 2em 0 0;
  }
}

body {
  font-family: var(--ff-primary);
  margin: 0;
}

header {
  margin-bottom: var(--spacer);
}

footer {
  font-size: var(--fs-300);
}

h1 {
  font-size: var(--fs-700);
  text-align: center;
}

h2 {
  font-size: var(--fs-600);
  text-align: center;
}

h3 {
  font-size: var(--fs-500);
}

.icon-inline {
  width: 1em;
  margin-right: .4em;
}

.btn {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background-color: #686c8d;
  border-radius: .5em;
  padding: .5em 1em;
}

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

.background {
  background-size: cover no-repeat;
  backdrop-filter: blur(1em) brightness(60%);
}

.hero-image {
  max-width: 40rem;
  margin: auto;
}

.flag-wrapper {
  position: relative;
  justify-content: center;
  width: 10rem;
  margin: auto;
}

.flag-btn {
  cursor: pointer;
  background: none;
  border: none;
}

.flag-btn > img {
  border: 2px solid #fff;
  border-radius: 100%;
}

.flag-btn:hover {
  transition-duration: .2s;
  transition-timing-function: ease-in;
  transform: scale(1.2);
}

.flag-btn:disabled > img {
  border-color: var(--clr-primary-400);
}

.profile-wrapper {
  max-width: 55rem;
  margin: auto;
}

.overlay {
  position: absolute;
  text-align: center;
  background-color: var(--clr-primary-100);
  opacity: 0;
  width: 100%;
  height: 100%;
  padding: .5em 0;
  transition: all .5s;
}

.flag-wrapper:hover .overlay {
  opacity: 1;
}

.cta {
  font-size: var(--fs-600);
  font-weight: 600;
}

.experience {
  position: relative;
  padding: 1em 0 1em 2em;
}

.experience img {
  position: absolute;
  width: 2rem;
  top: 1em;
  left: -.9em;
}

.experience h3 {
  padding-right: .5em;
}

.experience:before {
  position: absolute;
  content: "";
  border-left: 4px solid var(--clr-primary-400);
  height: 100%;
  top: 0;
  left: 0;
}

.experience--first:before {
  position: absolute;
  content: "";
  border-left: 4px solid var(--clr-primary-400);
  height: 100%;
  top: 1em;
  left: 0;
}

.experience--last:before {
  position: absolute;
  content: "";
  border-left: 4px solid var(--clr-primary-400);
  height: 1em;
  top: 0;
  left: 0;
}

.tags {
  grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
}

.tag {
  background-color: var(--clr-primary-300);
  border-radius: .25em;
  width: max-content;
  margin: 0 .5em .5em 0;
  padding: .25em .5em;
}

.edu-item:first-child {
  justify-self: end;
  padding-right: .5em;
}

@media (width <= 26em) or (width >= 50em) {
  .edu-item:first-child {
    justify-self: auto;
    padding-right: 0;
  }
}

.edu-item {
  max-width: max-content;
}

.rating {
  margin-left: auto;
  padding-right: .5em;
}

.rating .icon-inline {
  font-size: var(--fs-400);
  margin-right: .1em;
}

.rating-list-container h3 {
  margin-block-start: 0;
  margin-block-end: 0;
  margin: .375rem 0;
}

.rating-list-container ul > p {
  margin-block-start: 0;
  margin-block-end: 0;
}

.reference {
  border-radius: .5em;
  padding: .5em 1em;
}