:root {

  /* these are your root variables.
     all of the color declarations below are set up with variables
     so you can change these here to change everything across 
     the entire stylesheet. */

  --bg-color-light: #e8e8e8;
  --bg-color-dark: #000000;
  --ft-color-light: #ffffff;
  --ft-color-dark: #242424;

  --solid-purple: #563091;
  --solid-red: hsl(8, 70%, 52%);
  --solid-green: #77e7c5;
  --solid-yellow: #ffdf2d;

  --gradient-purple: linear-gradient(180deg, hsl(264, 50%, 38%) 0%, hsl(18, 56%, 67%) 90%);
  --gradient-red: linear-gradient(180deg,hsl(8, 70%, 52%) 0%, hsl(4, 52%, 74%) 100%);;
  --gradient-green: linear-gradient(180deg,hsl(162, 70%, 69%) 50%, hsl(165, 63%, 61%) 100%);
  --gradient-yellow: linear-gradient(180deg,hsl(51, 100%, 59%) 0%, hsl(25, 87%, 55%) 90%);


  /* --gradient-purple: linear-gradient(180deg, hsl(264, 50%, 38%) 50%, hsl(264, 55%, 33%) 90%);
  --gradient-red: linear-gradient(180deg,hsl(8, 70%, 52%) 50%, hsl(8, 75%, 48%) 100%);;
  --gradient-green: linear-gradient(180deg,hsl(162, 70%, 69%) 50%, hsl(165, 63%, 61%) 100%);
  --gradient-yellow: linear-gradient(180deg,hsl(51, 100%, 59%) 50%, hsl(49, 100%, 55%) 90%);; */

  --transparent-purple: hsla(264, 50%, 38%, 0.3);
  --transparent-red: hsla(8, 70%, 52%, 0.3);
  --transparent-green: hsla(162, 70%, 69%, 0.5);
  --transparent-yellow: hsla(51, 100%, 59%, 0.5);

  --menu-close: url(/assets/img/icons/menu-close.svg);
  --menu-open: url(/assets/img/icons/menu-open.svg);

}


/* body defaults */

body {
  color: var(--ft-color);
  font-family: "Metric", Helvetica, sans-serif;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 2rem;
  margin-block: 1em 0.5em;
}

h3 {
  font-size: 1.75rem;
  margin-block: 1.5em 1em;
}

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

a:hover, a:focus {
  text-decoration: underline solid 3px;
}

a.external::after  {
  display: inline-block;
  vertical-align: middle;
  padding-left: 0.25em;
}

nav a.external::after {
  content: url('/assets/img/icons/external-black.svg');
}

footer a.external::after {
  content: url('/assets/img/icons/external-white.svg');
}

p {
  font-size: 1.25em;
  line-height: 1.4em;
  margin-bottom: 1em;
}


/* navigation */
/* the dropdown runs off of an aria-label attached to the toggle */

header {
  margin: 1em;
}

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

.menu-item {
  display: none;
  font-size: 1.25rem;
}

.toggle {
  position: absolute;
  top: 1em;
  right: 1em;
  font-family: monospace;
}

.toggle button {
  background: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer; 
}

button[aria-expanded="true"]::after {
    content: var(--menu-close);
}

button[aria-expanded="false"]::after {
    content: var(--menu-open);
}

:has(button[aria-expanded="true"]) .menu-item {
    display: block;
}


/* home project sections */

section {
  margin: 5em 1em;
}

#projects {
  margin: 3em 0em;
}

.project-wrapper {
  margin: 1em 0em;
}

.project-img,
.project-img img {
  background: black;
  aspect-ratio: 1 / 1;
  height: auto;
}

.project-img img {
  object-fit: cover;
}

.project-desc {
  padding: 1.5em 1.5em 2em 1.5em;
}

#kind-jugend,
.kind-jugend {
  background: var(--gradient-purple);
  color: var(--ft-color-light);
}

#together-in-tune,
.together-in-tune {
  background: var(--gradient-yellow);
  color: var(--ft-color-dark);
}

#baby-einstein,
.baby-einstein {
  background: var(--gradient-red);
  color: var(--ft-color-light);
}

#displays-shows,
.displays-shows {
  background: var(--gradient-green);
  color: var(--ft-color-dark);
}

.kind-jugend .return::before,
.baby-einstein .return::before {
  content: url('/assets/img/icons/left-arrow-white.svg');
  display: inline-block;
  vertical-align: middle;
  padding-right: 0.25em;
}

.tags {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  gap: 1em;
  padding: 0;
  list-style: none;
  font-size: 1.25rem;
}

.tags li {
  background: #e1e1e1;
  padding: 0.25em 0.5em;
  border-radius: 2px;
  text-align: center;
  font-weight: bold;
}


/* blockquotes

   the background and font color are declared as variables
   that are set individually in each :nth-of-type declaration.
   you can change the number to change the corresponding blockquote.

*/

blockquote {
  background: var(--background);
  color: var(--font);
  display: flex;
  flex-direction: column;
  max-width: 750px;
  margin-bottom: 1em;
  padding: 2em;
}

blockquote:first-of-type {
  --background: var(--gradient-purple);
  --font: var(--ft-color-light);
}

blockquote:nth-of-type(2) {
  --background: var(--gradient-yellow);
  --font: var(--ft-color-dark)
}

blockquote:nth-of-type(4) {
  --background: var(--gradient-red);
  --font: var(--ft-color-light)
}

blockquote:nth-of-type(3) {
  --background: var(--gradient-green);
  --font: var(--ft-color-dark)
}

.quoted {
  margin-block: auto 0;
  text-align: right;
}

footer {
  background: #000000;
  color: #ffffff;
  padding: 2em;
}

.client-logos {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: auto;
  padding: 0;
}

.client-logos li img {
  display: block;
  height: 100px;
}


@media all and (width > 768px) {


  /* updating core body defaults */

  h2, h3 {
    font-size: 2rem;
  }

  h3 {
    /* margin:; */
  }

  /* update margins */

  /* desktop navigation */

  header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-inline: 1.5em;
  }

  .menu {
    display: flex;
    justify-content: space-evenly;
    gap: 1.5em;
    margin: 0;
    padding-block: 0.25em;
    width: 100%;
    list-style: none;
    font-size: 1.5rem;
  }

  .menu-item {
    cursor: pointer;
    display: block;
  }

  .toggle {
      display: none;
  }

  /* desktop sections */

  section {
    padding-block: 2em;
  }

  section:not(#projects) {
    margin: 5em 0em 6em 0em;
    padding: 0em 3em;
  }

  #projects {
    width: 100%;
    margin-inline: 0;
  }

  /* setting up the project wrappers as a two column grid.
     see below for alternating layout pattern. */

  .project-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .project-img {
    aspect-ratio: 1/1;
    height: auto;
  }

  .project-desc {
    padding: 5em 3em 3.5em 3em;
    width: auto;
    display: flex;
    flex-direction: column;
  }

  .role {
    margin-top: auto;
  }

  /* the image and description are set to specific grid areas
     which alternate whether the element is odd or even. */

  .project-img { grid-area: img }

  .project-desc { grid-area: desc }

  .project-wrapper:nth-child(odd) { grid-template-areas: "img desc" }

  .project-wrapper:nth-child(even) { grid-template-areas: "desc img" }

  .two-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
  }

  .column h3,
  #clients h3 {
    text-align: center;
  }

  .client-logos li img {
    height: 150px;
  }

  blockquote {
    margin-bottom: 0;
  }

  .testimonials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5em 2em;
  }

}