:root, *:before, *:after {
  --clr-primary: #000000;
  --clr-secondary: #fdfff7;
  --clr-background: #fff;
  --clr-purple: #724689;
  --clr-purple-dark: #3a2445;
  --clr-indigo: #5ac0cd;
  --clr-indigo-dark: #2d8894;
  --clr-green: #67b64e;
  --clr-green-dark: #3e702e;
  --clr-yellow: #dadd57;
  --clr-yellow-dark: #a8ab23;
  --clr-orange: #d6924e;
  --clr-orange-dark: #9a5f24;
  --clr-red: #d92b34;
  --clr-red-dark: #86181e;
  --clr-active-banner: #5ac0cd;
  --clr-active-banner-dark: #2d8894;
}

@font-face {
  font-family: "Merriweather";
  font-style: italic;
  font-weight: 400;
  src: local("Merriweather Italic"), local("Merriweather-Italic"), url("assets/fonts/Merriweather/Merriweather-Italic.ttf");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Merriweather";
  font-style: normal;
  font-weight: 400;
  src: local("Merriweather Regular"), local("Merriweather-Regular"), url("assets/fonts/Merriweather/Merriweather-Regular.ttf");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Neucha";
  font-style: normal;
  font-weight: 400;
  src: local("Neucha"), url("assets/fonts/Neucha/Neucha.ttf");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
  background-color: var(--clr-background);
  font-family: "Merriweather";
  font-size: 1em;
}

nav {
  position: fixed;
  top: -40px;
  z-index: 100;
}
nav ul.rainbow {
  list-style-type: none;
  display: inline-flex;
}
nav ul.rainbow li {
  --size: 120px;
  --padding: 8px;
  user-select: none;
  display: inline-block;
  position: relative;
  height: calc(var(--size) - calc(var(--padding) * 2));
  width: calc(var(--size) - calc(var(--padding) * 2));
  padding: var(--padding);
  font-size: 1.2rem;
  color: var(--clr-secondary);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.16);
  transform: rotate(332deg);
}
@media (min-width: 830px) {
  nav ul.rainbow li {
    --size: 160px;
  }
}
@media (min-width: 1170px) {
  nav ul.rainbow li {
    --size: 180px;
  }
}
nav ul.rainbow li.link {
  cursor: pointer;
}
nav ul.rainbow li span {
  position: absolute;
  bottom: calc(var(--padding) - 2px);
}
nav ul.rainbow li:nth-child(1) {
  background-color: var(--clr-purple);
  top: -10px;
  left: -30px;
  z-index: 99;
}
@media (min-width: 830px) {
  nav ul.rainbow li:nth-child(1) {
    top: -20px;
  }
}
@media (max-width: 610px) {
  nav ul.rainbow li:nth-child(1) {
    top: -40px;
    left: -60px;
  }
}
nav ul.rainbow li:nth-child(1):hover {
  z-index: 101;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.22);
  transition: box-shadow 300ms ease-in-out;
}
nav ul.rainbow li:nth-child(2) {
  background-color: var(--clr-indigo);
  top: -20px;
  left: -60px;
  z-index: 98;
}
@media (min-width: 830px) {
  nav ul.rainbow li:nth-child(2) {
    top: -40px;
  }
}
@media (max-width: 610px) {
  nav ul.rainbow li:nth-child(2) {
    top: -40px;
    left: -120px;
  }
}
nav ul.rainbow li:nth-child(2):hover {
  z-index: 101;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.22);
  transition: box-shadow 300ms ease-in-out;
}
nav ul.rainbow li:nth-child(3) {
  background-color: var(--clr-green);
  top: -30px;
  left: -90px;
  z-index: 97;
}
@media (min-width: 830px) {
  nav ul.rainbow li:nth-child(3) {
    top: -60px;
  }
}
@media (max-width: 610px) {
  nav ul.rainbow li:nth-child(3) {
    top: -40px;
    left: -180px;
  }
}
nav ul.rainbow li:nth-child(3):hover {
  z-index: 101;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.22);
  transition: box-shadow 300ms ease-in-out;
}
nav ul.rainbow li:nth-child(4) {
  background-color: var(--clr-yellow);
  top: -40px;
  left: -120px;
  z-index: 96;
}
@media (min-width: 830px) {
  nav ul.rainbow li:nth-child(4) {
    top: -80px;
  }
}
@media (max-width: 610px) {
  nav ul.rainbow li:nth-child(4) {
    top: -40px;
    left: -240px;
  }
}
nav ul.rainbow li:nth-child(4):hover {
  z-index: 101;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.22);
  transition: box-shadow 300ms ease-in-out;
}
nav ul.rainbow li:nth-child(5) {
  background-color: var(--clr-orange);
  top: -50px;
  left: -150px;
  z-index: 95;
}
@media (min-width: 830px) {
  nav ul.rainbow li:nth-child(5) {
    top: -100px;
  }
}
@media (max-width: 610px) {
  nav ul.rainbow li:nth-child(5) {
    top: -40px;
    left: -300px;
  }
}
nav ul.rainbow li:nth-child(5):hover {
  z-index: 101;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.22);
  transition: box-shadow 300ms ease-in-out;
}
nav ul.rainbow li:nth-child(6) {
  background-color: var(--clr-red);
  top: -60px;
  left: -180px;
  z-index: 94;
}
@media (min-width: 830px) {
  nav ul.rainbow li:nth-child(6) {
    top: -120px;
  }
}
@media (max-width: 610px) {
  nav ul.rainbow li:nth-child(6) {
    top: -40px;
    left: -360px;
  }
}
nav ul.rainbow li:nth-child(6):hover {
  z-index: 101;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.22);
  transition: box-shadow 300ms ease-in-out;
}

.container {
  position: relative;
  margin: 60px auto 15px;
  max-width: 1100px;
  min-width: 480px;
  min-height: 300px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.16);
  z-index: 50;
  background-color: var(--clr-secondary);
}
.container div.logo {
  display: block;
  padding: 120px 0px 20px 0px;
  text-align: center;
}
.container #current_page {
  position: relative;
  left: -12px;
  width: 20vw;
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  background-color: var(--clr-active-banner);
  color: var(--clr-secondary);
  text-align: right;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16);
}
.container #current_page:before {
  content: "";
  border: 6px solid var(--clr-active-banner-dark);
  border-left-color: transparent;
  border-top-color: transparent;
  position: absolute;
  top: -12px;
  left: 0px;
}
.container .content {
  display: flex;
  flex-direction: row;
}
@media (max-width: 830px) {
  .container .content {
    flex-direction: column;
  }
}
@media (max-width: 1000px), (min-device-pixel-ratio: 1.2) {
  .container .content {
    flex-direction: column;
  }
}
.container .content .articles {
  flex: 1;
  padding: 20px;
}
.container .content .side {
  flex: 0 0 340px;
  padding: 20px;
}
@media (max-width: 830px) {
  .container .content .side {
    flex: 1;
  }
}
@media (max-width: 1000px), (min-device-pixel-ratio: 1.2) {
  .container .content .side {
    flex: 1;
  }
}

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