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



*,
body {
  font-family: quicksand, sans-serif;
  font-size: 20px;
  line-height: 127%;
  font-weight: 100;
  letter-spacing: 0.04rem;
}

body {
  background-color: rgb(7, 7, 7);
}

a {
  color: rgb(7, 7, 7);
}

a:hover {
  color: rgb(160, 160, 160);
}

h1,
h2,
p {
  color: rgb(20, 20, 20)
}

h2 {
  text-transform: uppercase;

  font-weight: 400;
}

h1 {
  font-family: Oswald, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 3rem;
}

figcaption {
  color: rgb(240, 240, 240);
  text-shadow: 0px 0px 20px #000000;
}

/* *************************************** */
/* Sections, custom background             */
/* *************************************** */


.hero__overlay {
  background: transparent;
  color: rgb(240, 240, 240);
}


.inspiration {
  background: rgb(7, 7, 7);
}

.process {
  background: rgb(7, 7, 7);
}

.footer {
  background-color: rgb(240, 240, 240);
}


.about__button p a {
  text-decoration: none;
  font-style: normal;
  font-size: 1rem;
  text-transform: uppercase;
  background-color: rgb(7, 7, 7);
  color: rgb(240, 240, 240);
  border: 0.09rem solid rgb(240, 240, 240);
}

.about__button p a:hover {
  background-color: rgb(240, 240, 240);
  color: rgb(7, 7, 7);
  font-size: 1rem;
}

.about__details {
  background-color: rgb(240, 240, 240);
}

/* *************************************** */
/* About |              */
/* *************************************** */

.project-description {
  background: rgb(240, 240, 240);
  min-height: 50vh;
  font-size: 1.16rem;
}

.project-description h2 {
  font-size: inherit;
  color: rgb(0, 0, 0);
}

.project-description p {
  font-size: inherit;
  color: rgb(0, 0, 0);
}

/* *************************************** */
/* Sketches section                        */
/* *************************************** */


.sketches {
  background: rgb(240, 240, 240);
  padding-bottom: 3rem;
}

.sketches p,
.sketches h1,
.sketches h2,
.sketches li {
  color: rgb(7, 7, 7);
}

.sketches__intro {
  max-width: 48%;
}

.sketches__list-item {
  font-size: 0.9rem;
  padding: 1rem 0;
  margin-right: 1rem;
  border-bottom: rgb(7, 7, 7) 2px solid;
}

/* *************************************** */
/* media queries: desktop, mobile          */
/* *************************************** */


@media (orientation: portrait) {
  .sketches__list {
    display: none;
  }

  .sketches__intro {
    max-width: 99%;
  }

  .mobile__hide {
    display: none;
  }
}

.width__max {
  max-width: 1280px;
  margin: auto;
}

.p5js-link {
  color: rgb(240, 240, 240);
}

.mobile__hide {
  display: block;
}