/* .header-container-inner {
    outline: 1px dashed lightgray;

    & * {
        outline: 1px dashed lightgray;
    }
} */
/* COMMONS */
html {
  font-size: 16px;
  min-width: 375px;
  --max-width: 980px;
  --page-padding-x: 3rem;
  --inside-section-padding: 2rem;
  --primary-color: #222;
  --secondary-color: rgb(161, 116, 255);
  --tertiary-color: rgb(74, 255, 255);
  --quaternary-color: rgba(115, 219, 235, 0.88);
  --font-family-title: "Press Start 2P", cursive;
  --font-family-text: "Space Mono", monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 
.arrow {
    width: 100px;
    height: 50px;
    background-color: var(--tertiary-color);
} */
.important {
  color: var(--secondary-color);
}

.text-title {
  padding: 0.2em 0;
  font-family: var(--font-family-text);
}

.highlight {
  background: var(--tertiary-color);
  color: var(--primary-color);
  display: inline-block;
  font-weight: 600;
  padding: 0.2em 0.3em;
}

.duration-sm {
  display: none;
}

.list {
  text-decoration: none;
}

.list-ol {
  padding-left: 30px;
}

.list-ul {
  padding-left: 19px;
  list-style-type: square;
}

.info-flash {
  display: none;
  background-color: orange;
  color: var(--primary-color);
}
.info-flash .info-flash-container {
  max-width: var(--max-width);
  margin: 0 auto;
  min-height: 3.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-flash .info-flash-container .info-flash-container-inner {
  padding: 0.5rem var(--page-padding-x);
}
.info-flash .info-flash-container .info-flash-container-inner .message {
  font-family: var(--font-family-text);
  height: 100%;
  font-size: 1.2rem;
  text-align: center;
}
.info-flash .info-flash-container .info-flash-container-inner .message :not(:first-child) {
  text-transform: uppercase;
}

.header {
  /* min-height: 250px; */
  background: url("/public/images/header-background.jpg") no-repeat center;
  background-size: cover;
  color: white;
  position: relative;
  z-index: 1;
}
.header::after {
  content: "";
  display: block;
  background: hsla(0deg, 0%, 0%, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.header .header-container {
  max-width: var(--max-width);
  margin: 0 auto;
  /* padding: 0 var(--page-padding-x); */
  display: flex;
  align-items: center;
  min-height: 600px;
  z-index: 2;
  position: relative;
}
.header .header-container .header-container-inner {
  width: 100%;
  /* max-width: 70%;
  margin: 0 auto; */
  padding: 4rem var(--page-padding-x);
  position: relative;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  /* grid-template-areas: 
      "title  title title title title logo"
      "title title title title title ."
      ". info info info info ."
  ; */
  grid-template-areas: "title  title title title title  logo logo logo" "title title title title title . . ." ". info info info info info info .";
  /* .date-list {
      display: none;
      color: var(--tertiary-color);
      text-transform: uppercase;
      font-family: var(--font-family-text);
      font-size: 1.4rem;
      text-align: right;

      .date:first-child {
          font-weight: 700;
          padding-bottom: 1rem;
      }
  } */
}
.header .header-container .header-container-inner .title {
  grid-area: title;
  position: relative;
  padding-bottom: 2rem;
}
.header .header-container .header-container-inner .title .title-img {
  width: 15rem;
  position: relative;
}
.header .header-container .header-container-inner .title .title-img img {
  width: 100%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 98%, 50% 98%, 50% 100%, 0% 100%);
}
.header .header-container .header-container-inner .title .title-text {
  font-family: "Press Start 2P", cursive;
  text-transform: uppercase;
  font-size: 2.9rem;
  letter-spacing: 0.5rem;
  word-spacing: -1rem;
  line-height: 1.2em;
  position: relative;
  left: 20%;
  top: -3%;
}
.header .header-container .header-container-inner .title .title-text::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: -12.5%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: url("/public/images/elements/octopus-single-secondary-color.png") no-repeat center;
  background-size: contain;
  /* transform: rotate(180deg); */
  --element-size: 2.5rem;
  width: var(--element-size);
  height: var(--element-size);
}
.header .header-container .header-container-inner .title::after {
  content: "";
  display: block;
  position: absolute;
  top: 25%;
  left: 80%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: url("/public/images/elements/astronaut-secondary-color.png") no-repeat center;
  background-size: contain;
  /* transform: rotate(180deg); */
  --element-size: 6rem;
  width: var(--element-size);
  height: var(--element-size);
}
.header .header-container .header-container-inner .info {
  grid-area: info;
  font-family: var(--font-family-text);
  font-size: 1.5rem;
  color: var(--tertiary-color);
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
}
.header .header-container .header-container-inner .info::after {
  content: "";
  display: block;
  position: absolute;
  top: 1rem;
  left: -10%;
  transform: translate(-50%, -50%);
  z-index: 2;
  background: url("/public/images/elements/arrow-secondary-color.png") no-repeat center;
  background-size: contain;
  /* transform: rotate(180deg); */
  --element-size: 5rem;
  width: var(--element-size);
  height: var(--element-size);
}
.header .header-container .header-container-inner .logo-list {
  grid-area: logo;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2rem;
}
.header .header-container .header-container-inner .logo-list .logo {
  height: 3rem;
  width: auto;
  text-align: right;
}
.header .header-container .header-container-inner .logo-list .logo img {
  height: 100%;
}

.main .main-container .section .section-container {
  max-width: var(--max-width);
  margin: 0 auto;
}
.main .main-container .section .section-container .section-container-inner {
  max-width: 70%;
  margin: 0 auto;
  padding: 3rem var(--page-padding-x);
}
.main .main-container .section .section-container .section-title {
  font-family: "Press Start 2P", cursive;
  font-size: 1.5rem;
  text-transform: uppercase;
  line-height: 2rem;
  margin-bottom: var(--inside-section-padding);
}
.main .main-container .section .section-container .section-content {
  font-family: "Space Mono", monospace;
}
.main .main-container .section .section-container .section-content .text {
  font-size: 1rem;
  line-height: 1.5rem;
  text-align: justify;
  margin-bottom: var(--inside-section-padding);
}
.main .main-container .section .section-container .section-content .text:last-child {
  margin-bottom: 0;
}
.main .main-container .section .section-container .section-content .icons {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.main .main-container .section .section-container .section-content .icons .icon-container {
  text-align: center;
  flex: 0 1 150px;
}
.main .main-container .section .section-container .section-content .icons .icon-container .icon-img {
  --icon-size: 4rem;
  height: var(--icon-size);
  /* width: var(--icon-size); */
  width: auto;
}
.main .main-container .section .section-container .section-content .icons .icon-container .icon-description {
  padding-top: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.2rem;
}

/* PARTICULARS */
.section1 {
  color: var(--primary-color);
  background-color: var(--quaternary-color);
}
.section1 .section-container .section-title {
  color: var(--secondary-color);
}
.section1 .section-container .section-content {
  position: relative;
}
.section1 .section-container .section-content::after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  right: -20%;
  background: url("/public/images/elements/arrow-secondary-color.png") no-repeat center;
  background-size: contain;
  transform: rotate(180deg);
  width: 15%;
  height: 1.9rem;
}

.section2 {
  background: var(--primary-color);
  color: white;
}
.section2 .section-container .section-content {
  position: relative;
}
.section2 .section-container .section-content .text:last-of-type::after {
  content: "x";
  font-family: "Press Start 2P", cursive;
  font-size: 2rem;
  text-transform: uppercase;
  position: absolute;
  bottom: -1.5rem;
  right: calc(-2rem - 5%);
  color: var(--tertiary-color);
}
.section2 .section-container .section-content::before {
  content: "";
  display: block;
  position: absolute;
  top: -1rem;
  right: -10%;
  background: url("/public/images/elements/octopus-secondary.svg") no-repeat center;
  background-size: contain;
  width: 5%;
  height: 9rem;
}
.section2 .section-container .section-content::after {
  content: "";
  display: block;
  position: absolute;
  top: -1.5rem;
  left: -20%;
  background: url("/public/images/elements/arrow-tertiary-color.png") no-repeat center;
  background-size: contain;
  width: 15%;
  height: 1.9rem;
}

.section3 {
  color: var(--primary-color);
  --time-radius: 2.7em;
}
.section3 .list {
  font-weight: 600;
}
.section3 .section-container .section-title {
  color: var(--secondary-color);
}
.section3 .section-container .section-content .text {
  position: relative;
}
.section3 .section-container .section-content .text .text-description {
  position: relative;
}
.section3 .section-container .section-content .text:first-child::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: -20%;
  transform: translateY(-50%);
  background: url("/public/images/elements/arrow-tertiary-color.png") no-repeat center;
  background-size: contain;
  transform: rotate(180deg) translateY(50%);
  width: 15%;
  height: 1.9rem;
}
.section3 .section-container .section-content .text:nth-child(2) .text-description::after, .section3 .section-container .section-content .text:nth-child(3) .text-description::after {
  content: "";
  display: block;
  height: var(--time-radius);
  width: var(--time-radius);
  font-size: 0.9rem;
  line-height: var(--time-radius);
  text-align: center;
  border: none;
  border-radius: 50%;
  color: white;
  background: var(--secondary-color);
  position: absolute;
  top: 50%;
  left: -10%;
  transform: translateY(-50%);
}
.section3 .section-container .section-content .text:nth-child(2) .text-description::after {
  content: "15m";
}
.section3 .section-container .section-content .text:nth-child(3) .text-description::after {
  content: "1h";
}

.section4 {
  color: var(--primary-color);
  --time-radius: 2.7em;
  border-top: 0.5px solid lightgray;
}
.section4 .section-container .section-title {
  color: var(--secondary-color);
  position: relative;
}
.section4 .section-container .section-title::after {
  content: "";
  display: block;
  position: absolute;
  top: 1.5rem;
  left: -17%;
  background: url("/public/images/elements/arrow-tertiary-color.png") no-repeat center;
  background-size: contain;
  transform: rotate(90deg);
  width: 15%;
  height: 25px;
}
.section4 .section-container .section-content .text-description {
  position: relative;
}
.section4 .section-container .section-content .text:nth-child(2) .text-description::before {
  content: "";
  display: block;
  position: absolute;
  top: -1rem;
  left: calc(-1.2rem - 10%);
  background: url("/public/images/elements/octopus-secondary.svg") no-repeat center;
  background-size: contain;
  width: 5%;
  height: 9rem;
}
.section4 .section-container .section-content .text:nth-child(2) .text-description::after {
  content: "x";
  font-family: "Press Start 2P", cursive;
  font-size: 2rem;
  text-transform: uppercase;
  position: absolute;
  bottom: -1.5rem;
  right: calc(-2rem - 5%);
  color: var(--secondary-color);
}

.section5 {
  background: var(--primary-color);
  color: white;
}
.section5 .section-container * {
  text-align: left;
}
.section5 .section-container .section-title {
  color: var(--secondary-color);
  position: relative;
}
.section5 .section-container .section-title::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -20%;
  background: url("/public/images/elements/arrow-secondary-color.png") no-repeat center;
  background-size: contain;
  transform: rotate(180deg);
  width: 15%;
  height: 1.9rem;
}
.section5 .section-container .section-content {
  position: relative;
}
.section5 .section-container .section-content .text.subsection1.list li:not(li:first-child),
.section5 .section-container .section-content .text.subsection2 .list li:not(li:first-child),
.section5 .section-container .section-content .text.subsection3 .text-description {
  padding-top: 1em;
}
.section5 .section-container .section-content .text.subsection2 .text-title {
  color: var(--tertiary-color);
  position: relative;
  display: block;
}
.section5 .section-container .section-content .text.subsection2 .text-title::before {
  content: "";
  display: block;
  position: absolute;
  top: 0rem;
  left: -20%;
  background: url("/public/images/elements/arrow-tertiary-color.png") no-repeat center;
  background-size: contain;
  width: 15%;
  height: 1.9rem;
}
.section5 .section-container .section-content .text.subsection2 .text.list {
  position: relative;
}
.section5 .section-container .section-content .text.subsection2 .text.list::before {
  content: "";
  display: block;
  position: absolute;
  top: -1rem;
  right: -10%;
  background: url("/public/images/elements/octopus-secondary.svg") no-repeat center;
  background-size: contain;
  width: 5%;
  height: 9rem;
}
.section5 .section-container .section-content .text.subsection3 .text-description {
  display: flex;
  gap: 1rem;
}
.section5 .section-container .section-content .text.subsection3 .text-description a {
  color: inherit;
}
.section5 .section-container .section-content .text.subsection3 .text-description :first-child {
  white-space: nowrap;
}
.section5 .section-container .section-content .text.subsection3 .text-description :last-child {
  flex: 1;
}

.section6 {
  color: var(--primary-color);
  background-color: var(--quaternary-color);
}
.section6 .section-container .section-title {
  color: var(--secondary-color);
  position: relative;
}
.section6 .section-container .section-content .text:last-of-type .text-title {
  position: relative;
}
.section6 .section-container .section-content .text:last-of-type .text-title::after {
  content: "";
  display: block;
  position: absolute;
  top: 0rem;
  left: -17%;
  background: url("/public/images/elements/arrow-secondary-color.png") no-repeat center;
  background-size: contain;
  transform: rotate(90deg);
  width: 15%;
  height: 25px;
}

.footer {
  background-color: var(--primary-color);
}
.footer .footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
}
.footer .footer-container .footer-container-inner {
  max-width: 70%;
  margin: 0 auto;
  padding: 3rem var(--page-padding-x);
  border-top: 0.5px solid lightgray;
}
.footer .footer-container .footer-container-inner .social-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
}
.footer .footer-container .footer-container-inner .social-container .social-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0rem 1.5rem;
  flex-wrap: wrap;
}
.footer .footer-container .footer-container-inner .social-container .social-list .social {
  --size-logo: 2.5rem;
  /* width: var(--size-logo); */
  height: var(--size-logo);
}
.footer .footer-container .footer-container-inner .social-container .social-list .social a img {
  height: 100%;
}
.footer .footer-container .footer-container-inner .social-container .social-list .social a i {
  font-size: 2.5rem !important;
  color: white;
  position: relative;
}
.footer .footer-container .footer-container-inner .logo-list {
  display: flex;
  justify-content: space-between;
  gap: 2rem 1.5rem;
  flex-wrap: wrap;
}
.footer .footer-container .footer-container-inner .logo-list .logo {
  --size-logo: 3rem;
  /* width: var(--size-logo); */
  height: var(--size-logo);
  /* @media screen and (max-width: 910px) {
      --size-logo: 2.7rem;
  }

  @media screen and (max-width: 840px) {
      --size-logo: 2.2rem;
  }

  @media screen and (max-width: 767px) {
      --size-logo: 3rem;
  } */
}
.footer .footer-container .footer-container-inner .logo-list .logo img {
  height: 100%;
}

/* MEDIA QUERIES */
@media screen and (max-width: 767px) {
  html {
    font-size: 14px;
    --page-padding-x: 1.5rem;
  }
  .header .header-container {
    min-height: 350px;
  }
  .header .header-container .header-container-inner .title-text {
    /* left: 20% !important; */
  }
  .header .header-container .header-container-inner .title-img {
    display: block;
  }
  .header .header-container .header-container-inner .title-img img {
    clip-path: polygon(0% 0%, 100% 0%, 100% 98%, 45% 98%, 45% 100%, 0% 100%) !important;
  }
  .header .header-container .header-container-inner .info::after, .header .header-container .header-container-inner .title-text::after {
    display: none !important;
  }
  .main .main-container .section .section-container .section-container-inner,
  .footer .footer-container .footer-container-inner {
    max-width: 100%;
  }
  .main .main-container .section .section-container .section-container-inner .duration-sm,
  .footer .footer-container .footer-container-inner .duration-sm {
    display: inline-block;
    /* background-color: white; */
    color: var(--secondary-color);
    /* padding: .2em .3em; */
  }
  .main .main-container .section .section-container .section-container-inner ::before, .main .main-container .section .section-container .section-container-inner ::after,
  .footer .footer-container .footer-container-inner ::before,
  .footer .footer-container .footer-container-inner ::after {
    display: none !important;
  }
  .main .main-container .section.section1 .section-container .section-container-inner .icons {
    justify-content: space-around;
  }
  .footer .footer-container .footer-container-inner .social-container {
    justify-content: center;
  }
  .footer .footer-container .footer-container-inner .logo-list {
    justify-content: space-around;
  }
}
@media screen and (max-width: 575px) {
  .header .header-container .header-container-inner {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "title title title" "info info info" "logo logo logo";
    --header-vertical-padding: 2rem;
  }
  .header .header-container .header-container-inner .info {
    padding-bottom: var(--header-vertical-padding);
  }
  .header .header-container .header-container-inner .title {
    padding-bottom: var(--header-vertical-padding);
  }
  .header .header-container .header-container-inner .title .title-text {
    left: 0 !important;
  }
  .header .header-container .header-container-inner .title::after {
    left: 90%;
  }
  .header .header-container .header-container-inner .logo-list {
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }
  .header .header-container .header-container-inner .logo-list .logo {
    height: 2.2rem;
    width: auto;
    text-align: center;
  }
  .header .title-img {
    display: none !important;
  }
}
@media screen and (max-width: 460px) {
  .header .header-container .header-container-inner .title::after {
    display: none;
  }
}
@media screen and (max-width: 399px) {
  .header .header-container {
    min-height: 150px;
  }
  .header .header-container .title::after {
    display: none !important;
  }
  .main .main-container .section .section-container .section-content .icons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }
  .main .main-container .section .section-container .section-content .icons .icon-container {
    display: flex;
    flex: 1;
    gap: 1.5rem;
    align-items: center;
  }
  .main .main-container .section .section-container .section-content .icons .icon-container .icon-img {
    --icon-size: 3rem;
    height: var(--icon-size);
    width: var(--icon-size);
  }
  .main .main-container .section .section-container .section-content .icons .icon-container .icon-description {
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.2rem;
    padding-top: 0;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
  }
}

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