/* Base Colours */
/* Accent Colours */
/* Supporting Colour */
body {
  background: center/cover url("../assets/hero.png") no-repeat;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  align-items: flex-end;
  padding: 3vh;
}
main .socials {
  padding: 5vh;
  background-color: rgba(0, 0, 0, 0.7);
}
main .socials h1 {
  color: white;
}
main .socials a {
  display: block;
  height: 30px;
  width: 30px;
  background: center/cover no-repeat;
}
main .socials div {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
}
main .socials #instagram {
  background-image: url("../assets/social-media/instagram.webp");
}
main .socials #facebook {
  background-image: url("../assets/social-media/facebook.png");
}
main .socials #artstation {
  background-image: url("../assets/social-media/artstation.svg");
}
main .socials #kofi {
  background-image: url("../assets/social-media/kofi.png");
}

article {
  flex-flow: column;
  width: 100%;
}
article section {
  background: center/cover no-repeat;
  padding: 3vh;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-flow: column;
}
article section:first-of-type {
  background-image: url("../assets/IMG_1971.PNG");
  padding-top: 10vh;
}
article section:nth-of-type(2) {
  background-color: white;
}
article section:nth-of-type(3) {
  background-image: url("../assets/horror-comic/untitled-artwork-18.jpeg");
}
article section > div {
  background-color: rgba(0, 0, 0, 0.9);
  padding: 3vh;
  width: fit-content;
  max-width: 100%;
}

@media (min-width: 1280px) {
  section > div {
    max-width: 50%;
  }
}