/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
/*
    2. Remove default margin
  */
* {
  margin: 0;
}
/*
    3. Allow percentage-based heights in the application
  */
html,
body {
  height: 100%;
  height: -moz-available;
  height: -webkit-fill-available;
  height: fill-available;
}
/*
    Typographic tweaks!
    4. Add accessible line-height
    5. Improve text rendering
  */
body {
  /* line-height: 1.5; */
  -webkit-font-smoothing: antialiased;
}
/*
    6. Improve media defaults
  */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/*
    7. Remove built-in form typography styles
  */
input,
button,
textarea,
select {
  font: inherit;
}
/*
    8. Avoid text overflows
  */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
/*
    9. Create a root stacking context
  */
#root,
#__next {
  isolation: isolate;
}

:root {
  --scheme_1_color_1: #3a99d6;
  --scheme_1_color_2: #fac3cf;
  --scheme_1_color_3: #500f12;
  --scheme_1_color_4: #49453a;
  --scheme_1_color_5: #4cc4f2;
  --scheme_1_color_6: #0466c6;
  --scheme_1_color_7: #6977f1;

  --scheme_2_color_1: #ffffff;
  --scheme_2_color_2: #aeffe4;
  --scheme_2_color_3: #7fffd4;
  --scheme_2_color_4: #1effb4;
  --scheme_2_color_5: #00d48d;
  --scheme_2_color_6: #00b97c;
  --scheme_2_color_7: #009c68;

  /* Obscene Barricades */
  --scheme_3_color_1: #fa81ee;
  --scheme_3_color_2: #c08163;
  --scheme_3_color_3: #bd0343;
  --scheme_3_color_4: #7f6b84;
  --scheme_3_color_5: #6495ed;
  --scheme_3_color_6: #31e9bd;
  --scheme_3_color_7: #0c8181;

  /* Rhythmic Fishes */
  --scheme_4_color_1: #f6db02;
  --scheme_4_color_2: #dad453;
  --scheme_4_color_3: #6495ed;
  --scheme_4_color_4: #55e535;
  --scheme_4_color_5: #2320cf;
  --scheme_4_color_6: #21412d;
  --scheme_4_color_7: #127e85;

  /* Cradled Embraces */
  --scheme_5_color_1: #f14d34;
  --scheme_5_color_2: #dec361;
  --scheme_5_color_3: #b78f8e;
  --scheme_5_color_4: #845809;
  --scheme_5_color_5: #4a7846;
  --scheme_5_color_6: #2f4f4f;
  --scheme_5_color_7: #0e303f;

  /* Smeared Maxes */
  --scheme_6_color_1: #b81937;
  --scheme_6_color_2: #9943b7;
  --scheme_6_color_3: #800000;
  --scheme_6_color_4: #6c7ad3;
  --scheme_6_color_5: #662521;
  --scheme_6_color_6: #4b0d5b;
  --scheme_6_color_7: #40a6b1;

  /* Short Whiskies */
  --scheme_7_color_1: #e3e4b1;
  --scheme_7_color_2: #537a04;
  --scheme_7_color_3: #517546;
  --scheme_7_color_4: #2f4f4f;
  --scheme_7_color_5: #15ebf0;
  --scheme_7_color_6: #0c537a;
  --scheme_7_color_7: #059aae;

  --duration_length: 5s;

  --second_start: var(--duration_length);
  --third_start: calc(2 * var(--duration_length));
  --fourth_start: calc(3 * var(--duration_length));
  --fifth_start: calc(4 * var(--duration_length));
  --sixth_start: calc(5 * var(--duration_length));
  --seventh_start: calc(6 * var(--duration_length));
}

.container {
  /* width: 100%; */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  /* overflow: hidden; */
  position: relative;
}

.scheme {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
}

.front {
  color: white;
  font-size: calc(100vh / 7);
  line-height: calc(100vh / 7);
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  text-transform: uppercase;
  text-align: center;

  position: absolute;
  max-width: 100%;
  z-index: 100;
  margin: 0;
  padding: 0;
  /* outline: red 1px solid; */
}

.title {
  /* This value intends to place the title in the horizontal center of the third color bar */
  top: calc(100vh / 7 * 2);
}

.link {
  /* This value takes into account the viewport height, number of color bars, and size of svg element. In order to place it bang in the center of the viewport */
  top: calc(100vh / 7 * 3.3);
}

@media (max-width: 500px) {
  .front {
    font-size: calc(10vh);
    line-height: calc(10vh);
  }
  .title {
    /* This value intends to place the title in the horizontal center of the third color bar */
    top: calc(30vh);
  }
}

svg {
  fill: white;
  fill-rule: evenodd;
  transition: transform 0.5s linear, opacity 0.5s linear;
  opacity: 0.5;
}

svg:hover {
  transform: rotate(360deg);
  opacity: 1;
}

@keyframes slideIn {
  20% {
    transform: translateX(-200%);
  }
  40% {
    transform: translateX(0%);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeInAndOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.color {
  width: 100%;
  height: calc(100vh / 7);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

  /* transition: transform 200ms ease; */
}
.first {
  z-index: 70;
  animation: fadeInAndOut var(--duration_length) linear forwards;
}

.second {
  z-index: 60;
  animation: fadeInAndOut var(--duration_length) linear forwards;
  opacity: 0;
}

.third {
  z-index: 50;
  animation: slideIn var(--duration_length) linear forwards;
}

.fourth {
  z-index: 40;
  animation: slideIn var(--duration_length) linear forwards;
}

.fifth {
  z-index: 30;
  animation: slideIn var(--duration_length) linear forwards;
}
.sixth {
  z-index: 20;
  animation: slideIn var(--duration_length) linear forwards;
}
.seventh {
  z-index: 10;
  animation: fadeIn var(--duration_length) linear forwards;
}

/* .color:hover {
  transform: scale(1.25);
} */

.first:nth-of-type(1) {
  background-color: var(--scheme_1_color_1);
  animation-delay: 0s;
}

.first:nth-of-type(2) {
  background-color: var(--scheme_1_color_2);
  animation-delay: 0.2s;
}

.first:nth-of-type(3) {
  background-color: var(--scheme_1_color_3);
  animation-delay: 0.4s;
}
.first:nth-of-type(4) {
  background-color: var(--scheme_1_color_4);
  animation-delay: 0.6s;
}
.first:nth-of-type(5) {
  background-color: var(--scheme_1_color_5);
  animation-delay: 0.8s;
}
.first:nth-of-type(6) {
  background-color: var(--scheme_1_color_6);
  animation-delay: 1s;
}
.first:nth-of-type(7) {
  background-color: var(--scheme_1_color_7);
  animation-delay: 1.2s;
}

.second:nth-of-type(1) {
  background-color: var(--scheme_2_color_1);
  animation-delay: calc(var(--second_start) + 0s);
}

.second:nth-of-type(2) {
  background-color: var(--scheme_2_color_2);
  animation-delay: calc(var(--second_start) + 0.2s);
}

.second:nth-of-type(3) {
  background-color: var(--scheme_2_color_3);
  animation-delay: calc(var(--second_start) + 0.4s);
}
.second:nth-of-type(4) {
  background-color: var(--scheme_2_color_4);
  animation-delay: calc(var(--second_start) + 0.6s);
}
.second:nth-of-type(5) {
  background-color: var(--scheme_2_color_5);
  animation-delay: calc(var(--second_start) + 0.8s);
}
.second:nth-of-type(6) {
  background-color: var(--scheme_2_color_6);
  animation-delay: calc(var(--second_start) + 1s);
}
.second:nth-of-type(7) {
  background-color: var(--scheme_2_color_7);
  animation-delay: calc(var(--second_start) + 1.2s);
}

.third:nth-of-type(1) {
  background-color: var(--scheme_3_color_1);
  animation-delay: calc(var(--third_start) + 0s);
}

.third:nth-of-type(2) {
  background-color: var(--scheme_3_color_2);
  animation-delay: calc(var(--third_start) + 0.2s);
}

.third:nth-of-type(3) {
  background-color: var(--scheme_3_color_3);
  animation-delay: calc(var(--third_start) + 0.4s);
}
.third:nth-of-type(4) {
  background-color: var(--scheme_3_color_4);
  animation-delay: calc(var(--third_start) + 0.6s);
}
.third:nth-of-type(5) {
  background-color: var(--scheme_3_color_5);
  animation-delay: calc(var(--third_start) + 0.8s);
}
.third:nth-of-type(6) {
  background-color: var(--scheme_3_color_6);
  animation-delay: calc(var(--third_start) + 1s);
}
.third:nth-of-type(7) {
  background-color: var(--scheme_3_color_7);
  animation-delay: calc(var(--third_start) + 1.2s);
}

.fourth:nth-of-type(1) {
  background-color: var(--scheme_4_color_1);
  animation-delay: calc(var(--fourth_start) + 0s);
}

.fourth:nth-of-type(2) {
  background-color: var(--scheme_4_color_2);
  animation-delay: calc(var(--fourth_start) + 0.2s);
}

.fourth:nth-of-type(3) {
  background-color: var(--scheme_4_color_3);
  animation-delay: calc(var(--fourth_start) + 0.4s);
}
.fourth:nth-of-type(4) {
  background-color: var(--scheme_4_color_4);
  animation-delay: calc(var(--fourth_start) + 0.6s);
}
.fourth:nth-of-type(5) {
  background-color: var(--scheme_4_color_5);
  animation-delay: calc(var(--fourth_start) + 0.8s);
}
.fourth:nth-of-type(6) {
  background-color: var(--scheme_4_color_6);
  animation-delay: calc(var(--fourth_start) + 1s);
}
.fourth:nth-of-type(7) {
  background-color: var(--scheme_4_color_7);
  animation-delay: calc(var(--fourth_start) + 1.2s);
}

.fifth:nth-of-type(1) {
  background-color: var(--scheme_5_color_1);
  animation-delay: calc(var(--fifth_start) + 0s);
}

.fifth:nth-of-type(2) {
  background-color: var(--scheme_5_color_2);
  animation-delay: calc(var(--fifth_start) + 0.2s);
}

.fifth:nth-of-type(3) {
  background-color: var(--scheme_5_color_3);
  animation-delay: calc(var(--fifth_start) + 0.4s);
}
.fifth:nth-of-type(4) {
  background-color: var(--scheme_5_color_4);
  animation-delay: calc(var(--fifth_start) + 0.6s);
}
.fifth:nth-of-type(5) {
  background-color: var(--scheme_5_color_5);
  animation-delay: calc(var(--fifth_start) + 0.8s);
}
.fifth:nth-of-type(6) {
  background-color: var(--scheme_5_color_6);
  animation-delay: calc(var(--fifth_start) + 1s);
}
.fifth:nth-of-type(7) {
  background-color: var(--scheme_5_color_7);
  animation-delay: calc(var(--fifth_start) + 1.2s);
}

.sixth:nth-of-type(1) {
  background-color: var(--scheme_6_color_1);
  animation-delay: calc(var(--sixth_start) + 0s);
}

.sixth:nth-of-type(2) {
  background-color: var(--scheme_6_color_2);
  animation-delay: calc(var(--sixth_start) + 0.2s);
}

.sixth:nth-of-type(3) {
  background-color: var(--scheme_6_color_3);
  animation-delay: calc(var(--sixth_start) + 0.4s);
}
.sixth:nth-of-type(4) {
  background-color: var(--scheme_6_color_4);
  animation-delay: calc(var(--sixth_start) + 0.6s);
}
.sixth:nth-of-type(5) {
  background-color: var(--scheme_6_color_5);
  animation-delay: calc(var(--sixth_start) + 0.8s);
}
.sixth:nth-of-type(6) {
  background-color: var(--scheme_6_color_6);
  animation-delay: calc(var(--sixth_start) + 1s);
}
.sixth:nth-of-type(7) {
  background-color: var(--scheme_6_color_7);
  animation-delay: calc(var(--sixth_start) + 1.2s);
}

.seventh:nth-of-type(1) {
  background-color: var(--scheme_7_color_1);
  animation-delay: calc(var(--seventh_start) + 0s);
}

.seventh:nth-of-type(2) {
  background-color: var(--scheme_7_color_2);
  animation-delay: calc(var(--seventh_start) + 0.2s);
}

.seventh:nth-of-type(3) {
  background-color: var(--scheme_7_color_3);
  animation-delay: calc(var(--seventh_start) + 0.4s);
}
.seventh:nth-of-type(4) {
  background-color: var(--scheme_7_color_4);
  animation-delay: calc(var(--seventh_start) + 0.6s);
}
.seventh:nth-of-type(5) {
  background-color: var(--scheme_7_color_5);
  animation-delay: calc(var(--seventh_start) + 0.8s);
}
.seventh:nth-of-type(6) {
  background-color: var(--scheme_7_color_6);
  animation-delay: calc(var(--seventh_start) + 1s);
}
.seventh:nth-of-type(7) {
  background-color: var(--scheme_7_color_7);
  animation-delay: calc(var(--seventh_start) + 1.2s);
}