.Header {
  --logo-aspect-ratio: 2;
}


.BackLight {
    background-color: rgb(67 55 70 / 45%);
}

.BackLightFadeOut {
    background: linear-gradient( to bottom, rgb(67 55 70 / 45%) 0%, rgb(45 37 53 / 0%) 100%);
}

.BackLightFadeOut2 {
    background: linear-gradient( to bottom, rgb(67 55 70 / 45%) 0%, rgb(45 37 53 / 20%) 100%);
}

.BackDark {
    background-color: rgb(44 22 66 / 46%);
}

.BackPurpleLight {
    background-color: #271433ab;
}

.BackPurpleLightGradIn {
    background: linear-gradient(to bottom, #11091710 0%, #27143387 10%, #220d2fd6 20%);
}

.BackPurpleDark {
    background-color: #0e0315f0;
}

.BackPurpleDarkGradOut {
    background: linear-gradient( to bottom, #0e0315f0 0%, #0e0315aa 75%, #0e031514 100%);
}

.BackPurple {
    background-color: rgb(30 9 51 / 94%);
}

.BackPurpleGradOut {
    background: linear-gradient( to bottom, rgb(30 9 51 / 94%) 0%, rgb(30 9 51 / 20%) 100%);
}

.BackPurpleGradIn {
    background: linear-gradient( to bottom, rgb(100 73 128 / 34%) 0%, rgb(64 13 80 / 77%) 12%)
}

.BackFullBlack {
    background-color: #000000;
}

.BackLightGrad {
    background: linear-gradient( to bottom, rgb(100 100 100 / 22%) 0%, rgb(45 45 45 / 68%) 33%);
}

.BackLight2 {
    background-color: rgba(128, 128, 128, 0.3);
}

.BackDark2 {
    background-color: rgb(15 10 21 / 76%);
    /*
    background:linear-gradient(
        to bottom, 
        rgb(20 8 35 / 33%) 0%,
        rgb(20 8 35 / 74%) 100%
        );
*/
}

.BackDarkFade {
    background: linear-gradient( to bottom, rgb(45 37 53 / 29%) 0%, /* rgba(128,128,128,0) 20%,*/
    rgb(45 37 53 / 0%) 100%);
}

.BackDarkPurpleGrad {
    background: linear-gradient( -45deg, rgba(112, 28, 216, 0.29) 0%, rgba(45, 37, 53, 0.29) 100%);
}

.BackDarkGray {
    background-color: #222227e8;
}

.BackDarkGray2 {
    background-color: #21202799;
}

.BackBlack {
    /*background-color: rgba(0,0,0,0.6);*/
    background-color: rgb(10 10 10 / 60%);
}

.BackGradAB {
    background: linear-gradient( to bottom, rgba(128, 128, 128, 0) 0%, rgba(69, 72, 105, 0.4) 100%);
}

.BackGradAC {
    background: linear-gradient( to bottom, rgba(128, 128, 128, 0) 66%, rgb(17 19 45 / 75%) 100%);
}

.BackGradCC {
    background: rgb(17 19 45 / 75%);
}

.BackGradAB2 {
    background: linear-gradient( to bottom, rgba(128, 128, 128, 0) 0%, #20184885 100%);
}

.BackColorB {
    background-color: rgb(69 72 105 / 40%);
}

.BackColorB2 {
    background-color: #20184885;
}

.BackGradBA {
    background: linear-gradient( to bottom, rgba(69, 72, 105, 0.4) 0%, /* rgba(128,128,128,0) 20%,*/
    rgba(128, 128, 128, 0.3) 100%);
}

.BackGradBA2 {
    background: linear-gradient( to bottom, #20184885 0%, /* rgba(128,128,128,0) 20%,*/
    rgba(128, 128, 128, 0.3) 100%);
}

/* burger menu appears */
@media screen and (max-width: 73em) {
  .Header {
    --logo-height: 5rem;
  }
  .DesktopMenu li {
    font-size: 1.5rem;
  }
  .Header.Top .LogoText {
    font-size: 2.2rem;
    margin-left: 1.5rem;
  }
}

/* burger menu appears */
@media screen and (max-width: 63em) {
  .Header .LogoLink {
    /* margin-top: 2.5rem; */
  }
  .Header .BurgerMenu {
    display: block;
    cursor: pointer;
  }
  .Header .DesktopMenu {
    display: none;
  }
}

@media screen and (max-width: 27em) {
  .Header {
    --logo-height: 4rem;
  }
  .Header.Top .LogoText {
    font-size: 2rem;
    margin-left: 1.2rem;
  }
}

.IntroGradBack {
background: linear-gradient(
  180deg,
  rgba(33, 10, 23, 0.5) 0%,
  rgba(27, 4, 73, 0.5) 57%,
  rgba(59, 10, 123, 0.5) 80%,
  rgba(59, 10, 123, 0) 100%
);

}
.IntroGradBackFade {
background: linear-gradient(
  180deg,
  rgba(33, 10, 23, 0) 0%,
  rgba(33, 10, 23, 0.5) 10%,
  rgba(27, 4, 73, 0.5) 57%,
  rgba(59, 10, 123, 0.5) 90%,
  rgba(59, 10, 123, 0) 100%
);

}