/*
0-600px : Phone
600px-900px : Tablet portrait
900px-1200px : Tablet landscape
1200-1800 : Normal style
1800px + : Big desktop

$breakpoint argument choices ::after
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typo > general layout + grid > page layout > components

1em = 16px
*/
*,
*::after,
*::before {
  margin: 0px;
  padding: 0px;
  box-sizing: inherit;
  scroll-behavior: smooth;
  scrollbar-color: #9D7B0A #0f0f0f; }

html {
  font-size: 62.5%; }
  @media (min-width: 112.5em) {
    html {
      font-size: 80%; } }
  @media (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media (max-width: 56.25em) {
    html {
      font-size: 50%; } }

body {
  box-sizing: border-box;
  overflow-x: hidden; }

::-moz-selection {
  /* Code for Firefox */
  color: black;
  background: #9D7B0A; }

::selection {
  color: black;
  background: #9D7B0A; }

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7; }

.heading-primary {
  font-size: 3rem;
  background-image: linear-gradient(to right, #FFF8E7, #9D7B0A);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: .5rem;
  display: inline-block;
  text-transform: uppercase;
  margin: 3rem auto;
  text-align: center; }

.heading-secondary {
  font-size: 2rem;
  background-image: linear-gradient(to right, #FFF8E7, #9D7B0A);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: .2rem;
  display: inline-block;
  text-transform: uppercase;
  margin: 3rem auto;
  text-align: center; }

.heading-tertiary {
  font-size: 1.7rem;
  color: #ccc;
  letter-spacing: .2rem;
  display: inline-block;
  text-transform: uppercase;
  margin-top: 2rem;
  margin-bottom: 1rem; }

.legal-paragraph {
  font-size: 1.4rem;
  color: #ccc;
  letter-spacing: .1rem;
  display: inline-block;
  margin: 1rem auto;
  width: 100%; }

.legal-link {
  font-size: 1.4rem;
  color: #ccc;
  letter-spacing: .1rem; }

.custom-bold {
  color: #9D7B0A; }

@keyframes reveal {
  to {
    background-size: 100% 100%; } }

.typing {
  font-size: 1.5rem;
  letter-spacing: .2rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  position: relative;
  display: inline;
  background-image: linear-gradient(to right, #ccc, #ccc);
  background-repeat: no-repeat;
  background-clip: text;
  background-size: 0% 100%;
  animation: 20s reveal linear forwards;
  color: transparent;
  margin-inline: auto; }

.typing__wrapper {
  text-align: justify; }

@keyframes shadow_rotate {
  to {
    box-shadow: 0 0 5rem 2rem rgba(235, 116, 12, 0.8); } }

@keyframes press_start {
  0% {
    opacity: 100%; }
  79% {
    opacity: 99%; }
  80% {
    opacity: 0%; }
  99% {
    opacity: 1%; }
  100% {
    opacity: 100%; } }

@keyframes about-paralax {
  from {
    background-position: 0% 0%; }
  to {
    background-position: 0% 100%; } }

.header-nav {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10rem;
  width: 100%;
  z-index: 1000;
  transition: .3s ease-in-out; }
  @media (max-width: 37.5em) {
    .header-nav {
      justify-content: center;
      height: 8rem; } }
  @media (max-width: 23.75em) {
    .header-nav {
      height: 12rem;
      align-items: flex-start; } }

.media-nav-header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

.header-bg {
  height: 100vh;
  width: 100%;
  background-image: url(../img/bg_desktop.png);
  background-color: #0f0f0f;
  background-size: cover;
  background-position: right;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden; }
  @media (max-width: 37.5em) {
    .header-bg {
      background-image: url(../img/bg_phone.jpg); } }
  .header-bg__content {
    height: 100%;
    width: 100%;
    object-fit: cover; }
    @media (max-width: 37.5em) {
      .header-bg__content {
        object-position: 40% 20%; } }

.header-logo {
  position: relative;
  height: 12rem;
  width: 12rem;
  margin-left: 3rem;
  margin-top: 1rem;
  background-image: url(../img/LogoTransparence.png);
  background-size: 120%;
  background-position: center;
  background-repeat: no-repeat;
  clip-path: polygon(0% 30%, 85% 15%, 100% 40%, 100% 55%, 0% 75%);
  -webkit-clip-path: polygone(0% 30%, 100% 10%, 100% 60%, 0% 80%);
  z-index: 1000;
  overflow: hidden;
  transition: transform 0.7s cubic-bezier(0.26, 0.67, 0.9, 0.48); }
  @media (max-width: 37.5em) {
    .header-logo {
      display: none; } }
  .header-logo:hover {
    transform: rotateY(360deg) scale(1.5); }

.about {
  position: relative; }
  .about__content {
    padding: 10rem 50rem 20rem 10rem;
    text-align: center; }
    @media (max-width: 75em) {
      .about__content {
        padding: 10rem;
        background-image: linear-gradient(to bottom, rgba(15, 15, 15, 0), rgba(15, 15, 15, 0.7), rgba(15, 15, 15, 0.8), #0f0f0f, rgba(15, 15, 15, 0.8), rgba(15, 15, 15, 0.7), rgba(15, 15, 15, 0)); } }
    @media (max-width: 56.25em) {
      .about__content {
        padding: 5rem; } }
    @media (max-width: 37.5em) {
      .about__content {
        background-size: 250%;
        padding: 3rem 1rem; } }
  .about__paragraph {
    color: #FFF8E7;
    padding: 0 4rem 6rem 4rem;
    text-align: justify;
    font-size: 2rem;
    transition: background-position .7s ease-in-out;
    letter-spacing: .2rem; }
    @media (max-width: 37.5em) {
      .about__paragraph {
        padding: 0 2rem 6rem 2rem; } }
  .about__content:hover .about__paragraph {
    background-position: 100%; }

.navigation__button {
  height: 7rem;
  aspect-ratio: 1;
  background-color: #ccc;
  z-index: 2500;
  position: fixed;
  top: 0;
  right: 0;
  margin: 4rem;
  border-radius: 50%;
  cursor: pointer; }

.navigation__background {
  height: 6rem;
  aspect-ratio: 1;
  background-image: radial-gradient(#110047, #4D00CD, #5D004C);
  opacity: 0.9;
  z-index: 2000;
  position: fixed;
  top: 0;
  right: 0;
  margin: 4.5rem;
  border-radius: 50%;
  transition: transform 0.8s cubic-bezier(0.76, 0.05, 0.41, 1.25); }

.navigation__icon {
  position: relative;
  margin-top: 3.3rem;
  margin-left: 2rem;
  width: 3rem; }
  .navigation__icon, .navigation__icon::before, .navigation__icon::after {
    background-color: green;
    display: inline-block;
    height: .3rem;
    border-radius: 8rem;
    transform: scaleX(1);
    transition: all .2s ease-in-out; }
  .navigation__icon::before, .navigation__icon::after {
    content: "";
    position: absolute;
    left: -.5rem;
    width: 4rem;
    background-color: #5D004C; }
  .navigation__icon {
    background-color: #4D00CD; }
  .navigation__icon::before {
    top: -1rem; }
  .navigation__icon::after {
    top: 1rem; }

.navigation__nav {
  display: grid;
  place-items: center;
  position: fixed;
  top: 8rem;
  right: 8rem;
  z-index: 2501;
  opacity: 0;
  width: 0;
  transition: transform 0.8s cubic-bezier(0.76, 0.05, 0.41, 1.25), opacity 0.8s cubic-bezier(0.76, 0.05, 0.41, 1.25); }

.navigation__link:link, .navigation__link:visited {
  position: absolute;
  top: 1.5rem;
  left: 0;
  background-color: #ccc;
  width: 20rem;
  border-radius: 8rem;
  box-shadow: 0 0.8rem 0.5rem 0 rgba(93, 0, 76, 0.8);
  transition: transform 0.8s cubic-bezier(0.76, 0.05, 0.41, 1.25), background-color 0.2s ease-out, color 0.2s ease-out;
  transform: translate(-15rem, 0rem) scale(0.05);
  font-size: 1.5rem;
  text-decoration: none;
  display: inline-block;
  font-weight: 300;
  padding: 1rem 2rem;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center; }

.navigation__link:hover, .navigation__link:active {
  background-color: #4D00CD;
  color: #ccc; }

.navigation__button:hover .navigation__icon::before {
  top: -1.2rem; }

.navigation__button:hover .navigation__icon::after {
  top: 1.2rem; }

.navigation__checkbox {
  display: none; }

.navigation__checkbox:checked ~ .navigation__background {
  transform: scale(20); }

.navigation__checkbox:checked + .navigation__button .navigation__icon {
  background-color: transparent;
  box-shadow: 0 0 1.5rem .1rem transparent; }

.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
  transform: rotate(-135deg);
  top: 0; }

.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
  transform: rotate(135deg);
  top: 0; }

.navigation__checkbox:checked ~ .navigation__nav {
  opacity: 1;
  width: auto; }

.navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(1) {
  transform: translate(calc(cos((1 - 1) * -15deg) * -50rem), calc(sin((1 - 1) * -15deg) * -50rem)) scale(1); }

.navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(2) {
  transform: translate(calc(cos((2 - 1) * -15deg) * -50rem), calc(sin((2 - 1) * -15deg) * -50rem)) scale(1); }

.navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(3) {
  transform: translate(calc(cos((3 - 1) * -15deg) * -50rem), calc(sin((3 - 1) * -15deg) * -50rem)) scale(1); }

.navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(4) {
  transform: translate(calc(cos((4 - 1) * -15deg) * -50rem), calc(sin((4 - 1) * -15deg) * -50rem)) scale(1); }

.navigation__checkbox:checked ~ .navigation__nav .navigation__link:nth-of-type(5) {
  transform: translate(calc(cos((5 - 1) * -15deg) * -50rem), calc(sin((5 - 1) * -15deg) * -50rem)) scale(1); }

.navbar {
  position: relative;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  z-index: 2000; }
  @media (max-width: 37.5em) {
    .navbar {
      padding: 0;
      flex-wrap: wrap;
      justify-content: center; } }
  @media (max-width: 23.75em) {
    .navbar {
      padding: 0;
      flex-wrap: wrap;
      justify-content: center; } }
  .navbar__item {
    position: relative; }
  .navbar__scanner {
    height: 100%; }
    .navbar__scanner--bg {
      width: 100%;
      background-image: linear-gradient(to right, #FFF8E7 20%, #9D7B0A 50%, #FFF8E7 50%);
      background-size: 200%;
      background-position: 100%;
      padding: 1rem;
      background-clip: text;
      -webkit-background-clip: text;
      transition: background-clip .5s ease-out, -webkit-background-clip .5s ease-out, background-position .5s ease-out; }
    .navbar__scanner--cursor {
      padding: 1rem 0;
      position: absolute;
      top: 0;
      left: 0;
      width: .2rem;
      background-color: #FFF8E7;
      transition: left .5s ease-out,  background-color .5s ease-out; }
  .navbar__link:link, .navbar__link:visited {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: .4rem;
    text-transform: uppercase;
    text-decoration: none;
    color: transparent; }
    @media (max-width: 37.5em) {
      .navbar__link:link, .navbar__link:visited {
        font-size: 1.8rem;
        letter-spacing: .2rem; } }
  .navbar__link:hover > .navbar__scanner--bg {
    background-position: 0%;
    background-clip: text;
    -webkit-background-clip: text; }
  .navbar__link:hover > .navbar__scanner--cursor {
    left: 100%;
    background-color: #9D7B0A; }

.footer {
  position: relative;
  padding: 10rem 2rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20rem;
  align-items: center;
  background-image: linear-gradient(to bottom, transparent, rgba(15, 15, 15, 0.7), rgba(15, 15, 15, 0.8));
  color: #dedede; }
  @media (min-width: 112.5em) {
    .footer {
      gap: 20rem; } }
  @media (max-width: 75em) {
    .footer {
      gap: 20rem;
      padding: 2rem; } }
  @media (max-width: 37.5em) {
    .footer {
      flex-direction: column;
      gap: 2rem; } }
  .footer__legal {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem; }
    .footer__legal__title {
      text-transform: uppercase;
      font-weight: 900;
      text-align: center;
      letter-spacing: .5rem;
      text-decoration: none;
      color: #ccc; }
      @media (max-width: 56.25em) {
        .footer__legal__title {
          letter-spacing: .5rem; } }
    .footer__legal__subtitle {
      margin-top: 1rem;
      text-transform: capitalize;
      font-weight: 700;
      text-align: center;
      font-size: 1.5rem;
      letter-spacing: .3rem; }
      .footer__legal__subtitle:nth-last-child() {
        margin-bottom: 1rem; }
    .footer__legal__text {
      text-align: center;
      font-size: 1.2rem;
      letter-spacing: .2rem;
      font-weight: 400; }
      @media (max-width: 37.5em) {
        .footer__legal__text {
          letter-spacing: .2rem; } }
  .footer__contact {
    position: relative; }
    .footer__contact__title {
      text-transform: uppercase;
      font-weight: 900;
      text-align: center;
      letter-spacing: .5rem; }
      @media (max-width: 37.5em) {
        .footer__contact__title {
          letter-spacing: .5rem; } }
    .footer__contact__text {
      text-align: center;
      color: #9D7B0A;
      font-size: 2.5rem;
      letter-spacing: .4rem; }
      @media (max-width: 37.5em) {
        .footer__contact__text {
          font-size: 1.5rem;
          letter-spacing: .2rem; } }

@keyframes cookies-appear {
  from {
    transform: translate(-50%, 100%); }
  to {
    transform: translate(-50%, 0); } }

.cookies {
  display: flex;
  gap: 2rem;
  background-image: linear-gradient(to right bottom, #0f0f0f, #9D7B0A);
  padding: .5rem 1rem;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%);
  z-index: 0;
  z-index: 1000;
  animation: .8s 1s cookies-appear linear forwards; }
  .cookies__text {
    color: #FFF8E7;
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: .2rem; }
  .cookies__button {
    cursor: pointer;
    color: #FFF8E7;
    font-weight: 300;
    font-size: 1rem;
    letter-spacing: .2rem; }

@keyframes spinner_rotate {
  from {
    transform: translate(-50%, -50%); }
  to {
    transform: translate(-50%, -50%) rotate(360deg); } }

@keyframes disappear {
  0% {
    opacity: 1;
    visibility: visible; }
  90% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 1;
    visibility: hidden; } }

@keyframes rotate_sc {
  0% {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg); }
  70% {
    top: 50%;
    left: 50%; }
  100% {
    top: 20%;
    left: 20%;
    transform: translate(-50%, -50%) rotate(360deg); } }

.loader {
  height: 100vh;
  width: 100%;
  z-index: 2000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  display: grid;
  place-items: center;
  animation: 5s linear disappear forwards;
  z-index: 2000;
  background-color: #0c0909; }
  .loader__container {
    position: relative;
    width: 100%;
    height: 100%; }
  .loader__spinner {
    height: 30%;
    width: auto;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotate_sc 5s ease-in-out forwards; }
  .loader__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    object-fit: contain;
    background-repeat: no-repeat; }
    @media (min-width: 112.5em) {
      .loader__logo {
        width: 40%; } }
    @media (max-width: 75em) {
      .loader__logo {
        width: 55%; } }
    @media (max-width: 56.25em) {
      .loader__logo {
        width: 70%; } }
    @media (max-width: 37.5em) {
      .loader__logo {
        width: 80%; } }

.press-start {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .press-start__content {
    width: 40vw;
    max-width: 50rem;
    aspect-ratio: 3/2;
    background-image: url(../img/Press_Start.png);
    background-size: 150%;
    background-position: center;
    position: relative;
    animation: 2s linear infinite press_start; }
  .press-start__link {
    width: 70%;
    aspect-ratio: 3/2;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); }

.music-heading {
  text-align: center; }

@keyframes disk-animate {
  to {
    transform: translate(-50%, -50%) translateX(30%) rotateZ(40deg);
    z-index: 100;
    box-shadow: inset 0 0 0 1rem #070707, inset 0 0 0 1.2rem #080808, inset 0 0 0 2rem #070707, inset 0 0 0 2.2rem #080808, inset 0 0 0 3rem #070707, inset 0 0 0 3.2rem #080808, inset 0 0 0 4rem #070707, inset 0 0 0 4.2rem #080808, inset 0 0 0 5rem #070707, inset 0 0 0 5.2rem #080808, inset 0 0 0 6rem #070707, inset 0 0 0 6.2rem #080808, inset 0 0 0 7rem #070707, inset 0 0 0 7.2rem #080808, inset 0 0 0 8rem #070707, inset 0 0 0 8.2rem #080808, inset 0 0 0 9rem #070707, inset 0 0 0 9.2rem #080808, inset 0 0 0 10rem #070707, 0.8rem 0 0.8rem 0 rgba(7, 7, 7, 0.7); } }

@keyframes img-animate {
  to {
    transform: translateX(-30%);
    z-index: 101;
    box-shadow: -0.8rem 0 0.8rem 0 rgba(7, 7, 7, 0.7); } }

@media (max-width: 37.5em) {
  div.in-view div.music__cover-disk__disk {
    animation: 1s 1s disk-animate ease-in-out forwards; }
  div.in-view div.music__cover-disk__img {
    animation: 1s 1s img-animate ease-in-out forwards; } }

.music {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem; }
  .music__cover-disk {
    height: 40vh;
    min-height: 30rem;
    aspect-ratio: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center; }
    @media (max-width: 37.5em) {
      .music__cover-disk {
        height: 25vh;
        min-height: 25rem; } }
    .music__cover-disk__img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-size: cover;
      background-position: center;
      transition: all .4s .2s ease-out; }
      .music__cover-disk__img--space-humanity {
        background-image: url(../img/human_space_Cover_1500.jpg); }
      .music__cover-disk__img--new-horizons {
        background-image: url(../img/human_space_New_Horizons.jpg); }
      .music__cover-disk__img--explorer1 {
        background-image: url(../img/human_space_Explorer_1.jpg); }
      .music__cover-disk__img--14 {
        background-image: url(../img/14.jpg); }
      .music__cover-disk__img--13 {
        background-image: url(../img/13.jpg); }
      .music__cover-disk__img--12 {
        background-image: url(../img/12.jpg); }
      .music__cover-disk__img--11 {
        background-image: url(../img/11.jpg); }
      .music__cover-disk__img--10 {
        background-image: url(../img/10.jpg); }
      .music__cover-disk__img--9 {
        background-image: url(../img/9.jpg); }
      .music__cover-disk__img--8 {
        background-image: url(../img/8.jpg); }
      .music__cover-disk__img--7 {
        background-image: url(../img/7.jpg); }
      .music__cover-disk__img--6 {
        background-image: url(../img/6.jpg); }
      .music__cover-disk__img--5 {
        background-image: url(../img/5.jpg); }
      .music__cover-disk__img--4 {
        background-image: url(../img/4.jpg); }
      .music__cover-disk__img--3 {
        background-image: url(../img/3.jpg); }
      .music__cover-disk__img--2 {
        background-image: url(../img/2.jpg); }
      .music__cover-disk__img--1 {
        background-image: url(../img/1.jpg); }
    .music__cover-disk__disk {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 95%;
      width: 95%;
      border-radius: 50%;
      background-position: center;
      background-size: 40%;
      transition: all .6s ease-out;
      box-shadow: inset 0 0 0 1rem #070707, inset 0 0 0 1.2rem #080808, inset 0 0 0 2rem #070707, inset 0 0 0 2.2rem #080808, inset 0 0 0 3rem #070707, inset 0 0 0 3.2rem #080808, inset 0 0 0 4rem #070707, inset 0 0 0 4.2rem #080808, inset 0 0 0 5rem #070707, inset 0 0 0 5.2rem #080808, inset 0 0 0 6rem #070707, inset 0 0 0 6.2rem #080808, inset 0 0 0 7rem #070707, inset 0 0 0 7.2rem #080808, inset 0 0 0 8rem #070707, inset 0 0 0 8.2rem #080808, inset 0 0 0 9rem #070707, inset 0 0 0 9.2rem #080808, inset 0 0 0 10rem #070707; }
      .music__cover-disk__disk--new-horizons {
        background-image: url(../img/human_space_New_Horizons.jpg); }
      .music__cover-disk__disk--explorer1 {
        background-image: url(../img/human_space_Explorer_1.jpg); }
      .music__cover-disk__disk--space-humanity {
        background-image: url(../img/human_space_Cover_1500.jpg); }
      .music__cover-disk__disk--14 {
        background-image: url(../img/14.jpg); }
      .music__cover-disk__disk--13 {
        background-image: url(../img/13.jpg); }
      .music__cover-disk__disk--12 {
        background-image: url(../img/12.jpg); }
      .music__cover-disk__disk--11 {
        background-image: url(../img/11.jpg); }
      .music__cover-disk__disk--10 {
        background-image: url(../img/10.jpg); }
      .music__cover-disk__disk--9 {
        background-image: url(../img/9.jpg); }
      .music__cover-disk__disk--8 {
        background-image: url(../img/8.jpg); }
      .music__cover-disk__disk--7 {
        background-image: url(../img/7.jpg); }
      .music__cover-disk__disk--6 {
        background-image: url(../img/6.jpg); }
      .music__cover-disk__disk--5 {
        background-image: url(../img/5.jpg); }
      .music__cover-disk__disk--4 {
        background-image: url(../img/4.jpg); }
      .music__cover-disk__disk--3 {
        background-image: url(../img/3.jpg); }
      .music__cover-disk__disk--2 {
        background-image: url(../img/2.jpg); }
      .music__cover-disk__disk--1 {
        background-image: url(../img/1.jpg); }
    .music__cover-disk__link:link, .music__cover-disk__link:visited {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 1; }
    .music__cover-disk__link:hover {
      z-index: 102; }
    .music__cover-disk__link:hover ~ .music__cover-disk__disk {
      transform: translate(-50%, -50%) translateX(30%) rotateZ(40deg);
      z-index: 100;
      box-shadow: inset 0 0 0 1rem #070707, inset 0 0 0 1.2rem #080808, inset 0 0 0 2rem #070707, inset 0 0 0 2.2rem #080808, inset 0 0 0 3rem #070707, inset 0 0 0 3.2rem #080808, inset 0 0 0 4rem #070707, inset 0 0 0 4.2rem #080808, inset 0 0 0 5rem #070707, inset 0 0 0 5.2rem #080808, inset 0 0 0 6rem #070707, inset 0 0 0 6.2rem #080808, inset 0 0 0 7rem #070707, inset 0 0 0 7.2rem #080808, inset 0 0 0 8rem #070707, inset 0 0 0 8.2rem #080808, inset 0 0 0 9rem #070707, inset 0 0 0 9.2rem #080808, inset 0 0 0 10rem #070707, 0.8rem 0 0.8rem 0 rgba(7, 7, 7, 0.7); }
    .music__cover-disk__link:hover ~ .music__cover-disk__img {
      transform: translateX(-30%);
      z-index: 101;
      box-shadow: -0.8rem 0 0.8rem 0 rgba(7, 7, 7, 0.7); }

.wrapper {
  display: flex;
  height: 4rem;
  position: relative;
  justify-content: center;
  z-index: 1000; }

.icon {
  text-align: center;
  margin: 1rem 1.7rem;
  position: relative;
  transition: all .3s ease-in-out; }
  @media (max-width: 37.5em) {
    .icon {
      transform: scale(1.4);
      margin: 1rem 2.5rem; } }
  .icon:hover {
    transform: translateY(0.2rem); }
  .icon__img-circle {
    height: 2rem;
    border-radius: 50%;
    padding: 1.2rem;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    box-shadow: 0 0.6rem 0.6rem 0 rgba(51, 51, 51, 0.8);
    transition: box-shadow .3s ease-in-out; }
  .icon__img {
    height: 2rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    text-align: center; }
    .icon__img:hover {
      filter: invert(1); }
    .icon__img--facebook {
      background-image: url(../img/facebook-f.svg); }
    .icon__img--instagram {
      background-image: url(../img/instagram.svg); }
    .icon__img--spotify {
      background-image: url(../img/spotify.svg); }
    .icon__img--deezer {
      background-image: url(../img/deezer.svg); }
    .icon__img--apple {
      background-image: url(../img/apple.svg); }
    .icon__img--youtube {
      background-image: url(../img/youtube.svg); }
    .icon__img--tiktok {
      background-image: url(../img/tiktok.svg); }
  .icon__img:hover ~ .icon__img-circle {
    box-shadow: 0 0.4rem 0.5rem 0 rgba(51, 51, 51, 0.9); }
  .icon__img:hover ~ .icon__img-circle--facebook {
    background-color: #3b5998; }
  .icon__img:hover ~ .icon__img-circle--instagram {
    background-image: radial-gradient(circle at 25% -20%, #405DE6 0%, #5851DB 20%, #833AB4 30%, #C13584 40%, transparent 25%), radial-gradient(circle at 30% 90%, #FFDC80 0%, #FCAF45 10%, #F77737 20%, #F56040 30%, #FD1D1D 37%, #e1306c 40%, #C13584 50%);
    background-position: center;
    background-size: cover; }
  .icon__img:hover ~ .icon__img-circle--spotify {
    background-color: #1DB954; }
  .icon__img:hover ~ .icon__img-circle--deezer {
    background-image: linear-gradient(to right, #ff0000 0%, #ff0000 11.11%, #ffed00 11.11%, #ffed00 22.22%, #ff0092 22.22%, #ff0092 33.33%, #c2ff00 33.33%, #c2ff00 44.44%, #00c7f2 44.44%, #00c7f2 55.55%, #c1f1fc 55.55%, #c1f1fc 66.66%, #ebffac 66.66%, #ebffac 77.77%, #ffc2e5 77.77%, #ffc2e5 88.88%, #ffaaaa 88.88%, #ffaaaa 100%);
    background-position: center;
    background-size: cover; }
  .icon__img:hover ~ .icon__img-circle--apple {
    background-color: #7d7d7d; }
  .icon__img:hover ~ .icon__img-circle--youtube {
    background-color: #bb0000; }
  .icon__img:hover ~ .icon__img-circle--tiktok {
    background-color: #000000; }
  .icon__link:link, .icon__link:visited {
    padding: .6rem 1.2rem;
    line-height: 2rem;
    border-radius: 50%; }

.contact-heading {
  text-align: center; }

.contact__form {
  width: 100%;
  display: flex;
  gap: 2rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem; }
  .contact__form__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    justify-content: center;
    gap: .5rem; }
    .contact__form__item__text {
      font-size: 2rem;
      letter-spacing: .2rem;
      color: #dedede; }
    .contact__form__item__name, .contact__form__item__email, .contact__form__item__message {
      font-size: 1.5rem;
      letter-spacing: .1rem;
      border-radius: 1rem; }
    .contact__form__item__name, .contact__form__item__email {
      width: 30rem;
      padding: .5rem;
      text-align: center; }
    .contact__form__item__message {
      padding: 2rem;
      width: 60%;
      height: 30rem;
      text-align: justify; }
      @media (max-width: 56.25em) {
        .contact__form__item__message {
          width: 80%; } }
      @media (max-width: 37.5em) {
        .contact__form__item__message {
          width: 100%; } }
    .contact__form__item__send {
      padding: .8rem 1rem;
      border-radius: 1rem;
      transition: .2s ease-in-out;
      cursor: pointer;
      font-size: 2rem; }
      .contact__form__item__send:hover {
        transform: scale(1.05); }

@keyframes animate-sc {
  to {
    transform: rotate(3deg); } }

@keyframes rotate-orbit {
  to {
    transform: translate(-50%, -50%) rotate(360deg); } }

@keyframes blinking {
  to {
    box-shadow: 0 0 2rem 0.5rem #5D004C; } }

@keyframes move-bg {
  to {
    background-position: left; } }

.ihm {
  height: 100vh;
  display: grid;
  grid-template: "tm tm btn btn sc" "tm tm . . sc" "tm tm . . earth" "wave tree . phase level" "radar radar radar radar radar";
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  position: relative;
  padding: 3rem;
  z-index: 2; }
  .ihm__bg {
    background-image: url("/img/sky.png");
    background-size: 110%;
    background-position: right;
    z-index: 0;
    position: relative;
    animation: move-bg 60s alternate infinite; }
  .ihm__galaxy {
    width: 100%;
    height: 100%;
    position: absolute;
    display: grid;
    place-items: center;
    z-index: -1; }
    .ihm__galaxy__cont {
      position: relative;
      perspective: 100rem;
      display: flex;
      justify-content: center;
      align-items: center; }
    .ihm__galaxy__sun {
      height: 3rem;
      aspect-ratio: 1;
      background-color: #2de2e6;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 2rem 1rem #2de2e6, 0 0 5rem 3rem rgba(45, 226, 230, 0.8), 0 0 8rem 7rem rgba(45, 226, 230, 0.3), 0 0 20rem 12rem rgba(45, 226, 230, 0.2); }
      .ihm__galaxy__sun__radius {
        height: 150%;
        width: 1px;
        background-color: rgba(45, 226, 230, 0.5);
        position: absolute;
        top: 50%;
        left: 50%; }
        .ihm__galaxy__sun__radius:nth-of-type(1) {
          transform: translate(-50%, -50%) rotate(-10deg);
          height: 160%; }
        .ihm__galaxy__sun__radius:nth-of-type(2) {
          transform: translate(-50%, -50%) rotate(20deg);
          height: 130%; }
        .ihm__galaxy__sun__radius:nth-of-type(3) {
          transform: translate(-50%, -50%) rotate(40deg);
          height: 140%; }
        .ihm__galaxy__sun__radius:nth-of-type(4) {
          transform: translate(-50%, -50%) rotate(80deg);
          height: 170%; }
        .ihm__galaxy__sun__radius:nth-of-type(5) {
          transform: translate(-50%, -50%) rotate(-50deg);
          height: 120%; }
    .ihm__galaxy__orbit {
      position: relative;
      transform: rotateX(70deg) rotateY(-10deg);
      transform-style: preserve-3d;
      height: 20rem;
      aspect-ratio: 1; }
      .ihm__galaxy__orbit__circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: rotate-orbit 10s linear infinite; }
        .ihm__galaxy__orbit__circle:nth-of-type(1) {
          height: 100%;
          aspect-ratio: 1;
          border-radius: 50%;
          border-top: 0.1rem solid rgba(45, 226, 230, 0.5); }
        .ihm__galaxy__orbit__circle:nth-of-type(2) {
          height: 150%;
          aspect-ratio: 1;
          border-radius: 50%;
          border-left: 0.7rem solid rgba(17, 0, 71, 0.9); }
        .ihm__galaxy__orbit__circle:nth-of-type(3) {
          height: 220%;
          aspect-ratio: 1;
          border-radius: 50%;
          border-right: 0.3rem solid rgba(93, 0, 76, 0.8); }
        .ihm__galaxy__orbit__circle:nth-of-type(4) {
          height: 270%;
          aspect-ratio: 1;
          border-radius: 50%;
          border-bottom: 0.4rem solid rgba(77, 0, 205, 0.7); }
  .ihm__tm {
    grid-area: tm;
    padding-bottom: 3rem; }
    .ihm__tm__wrapper {
      height: 100%;
      width: 100%;
      background-color: rgba(77, 0, 205, 0.2);
      border: 3px solid #4D00CD;
      clip-path: polygon(0 0, calc(100% - 5rem) 0, 100% 5rem, 100% 100%, 5rem 100%, 0% calc(100% - 5rem), 0 70%, 5% 65%, 5% 35%, 0 30%);
      padding: 2rem 5rem; }
  .ihm__sc {
    grid-area: sc;
    display: flex;
    justify-content: center;
    align-items: center; }
    .ihm__sc__wrapper {
      background-color: rgba(77, 0, 205, 0.2);
      max-height: 100%;
      width: 100%;
      padding: 1rem;
      position: relative;
      border: 3px solid #4D00CD;
      display: flex;
      align-items: center;
      justify-content: center;
      clip-path: polygon(0 0, calc(100% - 5rem) 0, 100% 5rem, 100% 100%, 5rem 100%, 0% calc(100% - 5rem), 0 70%, 5% 65%, 5% 35%, 0 30%); }
    .ihm__sc__img {
      height: 100%;
      width: 100%;
      transform: rotate(-3deg);
      animation: animate-sc 8s alternate infinite; }
  .ihm__tree {
    grid-area: tree;
    display: flex;
    justify-content: space-evenly; }
    .ihm__tree__video {
      height: 100%;
      border: 1px solid #4D00CD;
      background-color: rgba(77, 0, 205, 0.2);
      clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 2rem 100%, 0% calc(100% - 2rem), 0 30%); }
    .ihm__tree__p {
      color: #ccc;
      text-align: justify;
      font-size: .3rem;
      width: 40%;
      padding: 1rem;
      overflow: hidden;
      border: 1px solid #4D00CD;
      background-color: rgba(77, 0, 205, 0.2);
      clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 2rem 100%, 0% calc(100% - 2rem), 0 30%); }
  .ihm__earth {
    grid-area: earth;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #4D00CD;
    background-color: rgba(77, 0, 205, 0.2);
    clip-path: polygon(0 0, calc(100% - 3rem) 0, 100% 3rem, 100% 100%, 3rem 100%, 0% calc(100% - 3rem), 0 30%);
    margin-bottom: 3rem;
    width: max-content; }
    .ihm__earth__img {
      height: 100%;
      width: 100%;
      object-fit: contain; }
  .ihm__phase {
    grid-area: phase;
    display: flex;
    justify-content: flex-end; }
    .ihm__phase__video {
      height: 100%;
      border: 1px solid #4D00CD;
      background-color: rgba(77, 0, 205, 0.2);
      clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 2rem 100%, 0% calc(100% - 2rem), 0 30%); }
  .ihm__level {
    grid-area: level;
    display: flex;
    justify-content: space-evenly; }
    .ihm__level__video {
      height: 100%;
      border: 1px solid #4D00CD;
      background-color: rgba(77, 0, 205, 0.2);
      clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 2rem 100%, 0% calc(100% - 2rem), 0 30%); }
  .ihm__wave {
    grid-area: wave;
    display: flex;
    justify-content: flex-end; }
    .ihm__wave__video {
      height: 100%;
      border: 1px solid #4D00CD;
      background-color: rgba(77, 0, 205, 0.2);
      clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 2rem 100%, 0% calc(100% - 2rem), 0 30%); }
  .ihm__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: btn; }
    .ihm__btn__link {
      font-size: 2rem;
      letter-spacing: .4rem;
      text-decoration: none;
      color: #dedede;
      background-color: rgba(93, 0, 76, 0.5);
      padding: 1rem 2rem;
      animation: blinking 1s alternate infinite;
      transition: .2s ease-out; }
      .ihm__btn__link:hover {
        box-shadow: 0 0 2rem 0.5rem #5D004C; }
  .ihm__radar {
    grid-area: radar;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 3rem; }
    .ihm__radar__wrapper {
      height: 100%;
      width: 100%;
      padding: 1rem;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between; }
    .ihm__radar__titles {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: .5rem;
      max-width: 33%;
      position: relative; }
    .ihm__radar__title {
      color: #ccc;
      letter-spacing: .2rem;
      font-weight: 300;
      font-size: 1.5rem;
      padding: .5rem 1rem;
      background-color: rgba(45, 226, 230, 0.4);
      cursor: pointer; }
      .ihm__radar__title:hover {
        background-color: #5D004C; }
    .ihm__radar__title:hover ~ .ihm__radar__img {
      transform: translate(-50%, -100%);
      opacity: 1;
      visibility: visible; }
    .ihm__radar__img {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translate(-50%, -50%);
      opacity: 0;
      visibility: hidden;
      height: 20rem;
      width: 20rem;
      background-image: url(/img/HST-SM4.png);
      background-size: contain;
      background-repeat: no-repeat;
      transition: .5s ease-out;
      pointer-events: none;
      z-index: -1; }
    .ihm__radar__icon {
      height: 100%; }
    .ihm__radar__link {
      font-size: 2rem;
      letter-spacing: .4rem;
      text-decoration: none;
      color: #ccc;
      padding: 1rem 2rem;
      background-color: rgba(93, 0, 76, 0.9); }

.section-home {
  padding: 12rem 12rem;
  display: flex;
  justify-content: left;
  align-items: center;
  height: 100vh;
  position: relative; }

.section-home--space-humanity {
  height: auto; }

@keyframes animate-img {
  25% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  75% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  100% {
    clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%); } }

.home__img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30rem;
  /*clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
        animation: 4s 2s animate-img ease-in-out;*/
  transition: .5s ease-in-out;
  cursor: pointer; }
  .home__img:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

.section-about {
  padding: 0rem; }

.section-music {
  padding: 7rem 12rem;
  overflow-x: hidden; }

.section-live {
  padding: 7rem 12rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; }

.section-contact {
  padding: 7rem 8rem; }
  @media (max-width: 56.25em) {
    .section-contact {
      padding: 10rem 5rem; } }
  @media (max-width: 37.5em) {
    .section-contact {
      padding: 10rem 1rem; } }

.section-legal {
  padding: 10rem 5rem; }

.live__flyers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  transition: .3s ease-in-out; }
  .live__flyers__link {
    background-color: #fafafa;
    text-decoration: none; }
  .live__flyers__img {
    width: 40rem;
    cursor: pointer; }
    @media (max-width: 37.5em) {
      .live__flyers__img {
        width: 35rem; } }
    .live__flyers__img:hover {
      filter: contrast(1.3) saturate(1.2); }

.header-bg-humanspace {
  height: 100vh;
  width: 100%;
  background-image: url(../img/human_space_Web_Computer_4K.jpg);
  background-color: #0f0f0f;
  background-size: cover;
  background-position: right;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden; }
  @media (max-width: 37.5em) {
    .header-bg-humanspace {
      background-image: url(../img/human_space_Web_Mobile.jpg); } }
  .header-bg-humanspace__content {
    height: 100%;
    width: 100%;
    object-fit: cover; }
    @media (max-width: 37.5em) {
      .header-bg-humanspace__content {
        object-position: 40% 20%; } }

.spacecraft-alone {
  position: fixed;
  top: 20%;
  left: 20%;
  transform: translate(-50%, -50%);
  height: 30%;
  width: auto;
  object-fit: cover; }

.spacecraft-alone {
  animation-name: spacecraft_animation;
  animation-duration: 1ms;
  /* Firefox requires this to apply the animation */
  animation-direction: alternate;
  animation-timeline: scroll(y);
  animation-timing-function: ease-in-out; }

@keyframes spacecraft_animation {
  0% {
    top: 20%;
    left: 20%; }
  100% {
    top: 80%;
    left: 80%; } }

@keyframes remove_bg {
  0% {
    background-color: #0c0909; }
  95% {
    background-color: #0c0909; }
  100% {
    background-color: #0c090900; } }

.humanspace-home {
  height: 100vh;
  width: 100%;
  position: relative;
  display: grid;
  place-items: center;
  background-color: #0c0909;
  animation: remove_bg 5s forwards; }
  .humanspace-home__container {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center; }
  .humanspace-home__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40%;
    object-fit: contain;
    background-repeat: no-repeat; }
    @media (min-width: 112.5em) {
      .humanspace-home__logo {
        width: 40%; } }
    @media (max-width: 75em) {
      .humanspace-home__logo {
        width: 55%; } }
    @media (max-width: 56.25em) {
      .humanspace-home__logo {
        width: 70%; } }
    @media (max-width: 37.5em) {
      .humanspace-home__logo {
        width: 80%; } }

.mersh {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; }
  .mersh__img {
    object-fit: contain;
    max-width: 90%; }
  .mersh__btn {
    background-color: rgba(255, 248, 231, 0.7);
    color: #0c0909;
    letter-spacing: .4rem;
    font-size: 2.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-decoration: none;
    padding: 1rem 3rem;
    border-radius: 30rem;
    transition: .1s ease-in-out; }
    @media (max-width: 37.5em) {
      .mersh__btn {
        background-color: #fff8e7; } }
    .mersh__btn:hover {
      background-color: #fff8e7;
      transform: translate(-50%, -50%) scale(1.02); }
    .mersh__btn:active {
      background-color: #fff8e7;
      transform: translate(-50%, -50%) scale(0.98); }