/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
    font-family: Melancholy;
    font-style: normal;
    font-weight: 400;
    src: url(https://rawcdn.githack.com/Oneriwien/WorldAnvilPersonalFonts/4b2704e0b45ba6f12eb76a10c85c527b0f383e8b/Melancholy.otf);
}

:root {
    --airH: 45;
    --airS: 72%;
    --airL: 55%;

    --AirGlass: hsla(var(--airH), var(--airS), calc(var(--airL) + 25%), 0.45);
    --AirBright: hsla(var(--airH), var(--airS), calc(var(--airL) + 25%), 1);
    --AirNormal: hsla(var(--airH), var(--airS), var(--airL), 1);
    --AirDark: hsla(var(--airH), var(--airS), calc(var(--airL) - 28%), 1);
    --AirPitch: hsla(var(--airH), var(--airS), calc(var(--airL) - 45%), 1);
    --AirDim: hsla(var(--airH), var(--airS), calc(var(--airL) - 45%), 0.75);

    --decayH: 315;
    --decayS: 58%;
    --decayL: 40%;

    --DecayGlass: hsla(var(--decayH), var(--decayS), calc(var(--decayL) + 25%), 0.45);
    --DecayBright: hsla(var(--decayH), var(--decayS), calc(var(--decayL) + 25%), 1);
    --DecayNormal: hsla(var(--decayH), var(--decayS), var(--decayL), 1);
    --DecayDark: hsla(var(--decayH), var(--decayS), calc(var(--decayL) - 22%), 1);
    --DecayPitch: hsla(var(--decayH), var(--decayS), calc(var(--decayL) - 32%), 1);
    --DecayDim: hsla(var(--decayH), var(--decayS), calc(var(--decayL) - 32%), 0.75);

    --earthH: 30;
    --earthS: 75%;
    --earthL: 53%;

    --EarthGlass: hsla(var(--earthH), var(--earthS), calc(var(--earthL) + 25%), 0.45);
    --EarthBright: hsla(var(--earthH), var(--earthS), calc(var(--earthL) + 25%), 1);
    --EarthNormal: hsla(var(--earthH), var(--earthS), var(--earthL), 1);
    --EarthDark: hsla(var(--earthH), var(--earthS), calc(var(--earthL) - 25%), 1);
    --EarthPitch: hsla(var(--earthH), var(--earthS), calc(var(--earthL) - 44%), 1);
    --EarthDim: hsla(var(--earthH), var(--earthS), calc(var(--earthL) - 44%), 0.75);

    --fireH: 0;
    --fireS: 70%;
    --fireL: 50%;

    --FireGlass: hsla(var(--fireH), var(--fireS), calc(var(--fireL) + 23%), 0.45);
    --FireBright: hsla(var(--fireH), var(--fireS), calc(var(--fireL) + 23%), 1);
    --FireNormal: hsla(var(--fireH), var(--fireS), var(--fireL), 1);
    --FireDark: hsla(var(--fireH), var(--fireS), calc(var(--fireL) - 25%), 1);
    --FirePitch: hsla(var(--fireH), var(--fireS), calc(var(--fireL) - 41%), 1);
    --FireDim: hsla(var(--fireH), var(--fireS), calc(var(--fireL) - 45%), 0.75);

    --iceH: 180;
    --iceS: 54%;
    --iceL: 72%;

    --IceGlass: hsla(var(--iceH), var(--iceS), calc(var(--iceL) + 25%), 0.45);
    --IceBright: hsla(var(--iceH), var(--iceS), calc(var(--iceL) + 15%), 1);
    --IceNormal: hsla(var(--iceH), var(--iceS), var(--iceL), 1);
    --IceDark: hsla(var(--iceH), var(--iceS), calc(var(--iceL) - 38%), 1);
    --IcePitch: hsla(var(--iceH), var(--iceS), calc(var(--iceL) - 62%), 1);
    --IceDim: hsla(var(--iceH), var(--iceS), calc(var(--iceL) - 62%), 0.75);

    --lifeH: 128;
    --lifeS: 74%;
    --lifeL: 35%;

    --LifeGlass: hsla(var(--lifeH), var(--lifeS), calc(var(--lifeL) + 25%), 0.45);
    --LifeBright: hsla(var(--lifeH), var(--lifeS), calc(var(--lifeL) + 25%), 1);
    --LifeNormal: hsla(var(--lifeH), var(--lifeS), var(--lifeL), 1);
    --LifeDark: hsla(var(--lifeH), var(--lifeS), calc(var(--lifeL) - 22%), 1);
    --LifePitch: hsla(var(--lifeH), var(--lifeS), calc(var(--lifeL) - 28%), 1);
    --LifeDim: hsla(var(--lifeH), var(--lifeS), calc(var(--lifeL) - 28%), 0.75);

    --lightH: 0;
    --lightS: 0%;
    --lightL: 80%;

    --LightGlass: hsla(var(--lightH), var(--lightS), calc(var(--lightL) + 25%), 0.45);
    --LightBright: hsla(var(--lightH), var(--lightS), calc(var(--lightL) + 25%), 1);
    --LightNormal: hsla(var(--lightH), var(--lightS), var(--lightL), 1);
    --LightDark: hsla(var(--lightH), var(--lightS), calc(var(--lightL) - 45%), 1);
    --LightPitch: hsla(var(--lightH), var(--lightS), calc(var(--lightL) - 74%), 1);
    --LightDim: hsla(var(--lightH), var(--lightS), calc(var(--lightL) - 74%), 0.75);

    --shadowH: 275;
    --shadowS: 45%;
    --shadowL: 44%;

    --ShadowGlass: hsla(var(--shadowH), var(--shadowS), calc(var(--shadowL) + 25%), 0.5);
    --ShadowBright: hsla(var(--shadowH), var(--shadowS), calc(var(--shadowL) + 25%), 1);
    --ShadowNormal: hsla(var(--shadowH), var(--shadowS), var(--shadowL), 1);
    --ShadowDark: hsla(var(--shadowH), var(--shadowS), calc(var(--shadowL) - 24%), 1);
    --ShadowPitch: hsla(var(--shadowH), var(--shadowS), calc(var(--shadowL) - 34%), 1);
    --ShadowDim: hsla(var(--shadowH), var(--shadowS), calc(var(--shadowL) - 34%), 0.75);

    --stormH: 172;
    --stormS: 75%;
    --stormL: 34%;

    --StormGlass: hsla(var(--stormH), var(--stormS), calc(var(--stormL) + 20%), 0.5);
    --StormBright: hsla(var(--stormH), var(--stormS), calc(var(--stormL) + 20%), 1);
    --StormNormal: hsla(var(--stormH), var(--stormS), var(--stormL), 1);
    --StormDark: hsla(var(--stormH), var(--stormS), calc(var(--stormL) - 20%), 1);
    --StormPitch: hsla(var(--stormH), var(--stormS), calc(var(--stormL) - 26%), 1);
    --StormDim: hsla(var(--stormH), var(--stormS), calc(var(--stormL) - 26%), 0.75);

    --waterH: 220;
    --waterS: 75%;
    --waterL: 45%;

    --WaterGlass: hsla(var(--waterH), var(--waterS), calc(var(--waterL) + 25%), 0.5);
    --WaterBright: hsla(var(--waterH), var(--waterS), calc(var(--waterL) + 25%), 1);
    --WaterNormal: hsla(var(--waterH), var(--waterS), var(--waterL), 1);
    --WaterDark: hsla(var(--waterH), var(--waterS), calc(var(--waterL) - 25%), 1);
    --WaterPitch: hsla(var(--waterH), var(--waterS), calc(var(--waterL) - 36%), 1);
    --WaterDim: hsla(var(--waterH), var(--waterS), calc(var(--waterL) - 36%), 0.75);
}

body {
  background-image: url("https://ravare.neocities.org/Images/Textures/dark-metal.jpg");
  color: black;
  font-family: Verdana;
  margin: 0px;
}

hr {
  border: 2px solid RGB(30, 30, 30);
  margin-left: 24px;
  margin-right: 24px;
}

/* Headers */
H1 {
    font-size: 120px;
    line-height: 100px;
    font-family: Melancholy;
    font-weight: 100;
    text-shadow: 1px 1px 2px RGBA(0, 0, 0, 0.3);
    color: RGB(30, 30, 30);
    padding: 0;
    margin: 0;
    letter-spacing: -6px;
}

.h1-line {
  font-size: 90px;
  line-height: 20px;
  margin-bottom: 10px;
  letter-spacing: -2px;
}

p {
  margin: 0;
}

/* Sections */
.section-modules {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;    /* Centers vertically */
    flex-wrap: wrap;
}

.section-module {
  position: relative;
  display: inline-block;
  width: 100%;
  background: linear-gradient(45deg, rgba(205,196,149,0.2) 0%, rgba(225,216,169,0.7) 40%, rgba(205,196,149,0.2) 100%);
  border: 4px solid RGB(30, 30, 30);
  box-shadow: inset 0px 0px 15px 0px #000000;
  text-align: center;
  margin-bottom: 8px;
}

.section-module:before {
    content: "";
    background: linear-gradient(45deg, rgba(0,0,0,0) 2%,  RGB(30, 30, 30) 2%, RGB(30, 30, 30) 2.5%, rgba(0,0,0,0) 2.5%, rgba(0,0,0,0) 3%, RGB(30, 30, 30) 3%, RGB(30, 30, 30) 3.5%, rgba(0,0,0,0) 3.5%, rgba(0,0,0,0) 4%, RGB(30, 30, 30) 4%, RGB(30, 30, 30), 4.5%, rgba(0,0,0,0) 4.5%);
    width:100%;
    height: 100%;
    display:block;
    position: absolute;
    top: 0;
    left: 0;
    z-index:3;
    pointer-events: none;
}

@media (min-width: 800px) {
  .section-module {
    width: 30vw;
    padding: 16px;
    margin: 8px;
  }
}

/* Power Modules */
.power-module {
    display: flex;
    justify-content: center;
    align-items: center;
}

.power-left-section, .power-right-section {
  display: inline-block;
  margin: 12px 36px 12px 36px;
}

.power-top, .power-bottom {
  content: "";
  position: relative;
  height: 20px;
  width: 154px;
  background: linear-gradient(90deg, black 0%, gray 20%, black 100%);
  transition: all 0.3s;
}

.power-top:before {
  content: "";
  background-color: #606060;
  border-radius: 50%;
  width:100%;
  height: 10px;
  display:block;
  position: absolute;
  top: -4px;
  left: 0;
}

.power-top:after {
  content: "";
  background: linear-gradient(90deg, black 0%, gray 20%, black 100%);
  border-radius: 50%;
  width:100%;
  height: 10px;
  display:block;
  position: absolute;
  bottom: -5px;
  left: 0;
}

.power-bottom:before {
  content: "";
  background: RGB(30,30,30);
  border-radius: 50%;
  width: calc(100% - 4px);
  height: 10px;
  display:block;
  position: absolute;
  top: -5px;
  left: 2px;
  z-index: 2;
}

.power-bottom:after {
  content: "";
  background: linear-gradient(90deg, black 0%, gray 20%, black 100%);
  border-radius: 50%;
  width:100%;
  height: 10px;
  display:block;
  position: absolute;
  top: 14px;
  left: 0;
  border-bottom: 3px solid black;
  transition: all 0.3s;
}

.power-left, .power-right {
  content: "";
  position: relative;
  height: 350px;
  width: 150px;
  border-left: 2px solid black;
  border-right: 2px solid black;
  background: var(--battery0);
  color: black;

  --b-empty: rgba(0,0,0,0);

  --battery0: linear-gradient(0deg, var(--b-empty) 0%, var(--b-empty) 9.6%, black 10%, var(--b-empty) 10.4%, var(--b-empty) 19.6%, black 20%, var(--b-empty) 20.4%, var(--b-empty) 29.6%, black 30%, var(--b-empty) 30.4%, var(--b-empty) 39.6%, black 40%, var(--b-empty) 40.4%, var(--b-empty) 49.6%, black 50%, var(--b-empty) 50.4%, var(--b-empty) 59.6%, black 60%, var(--b-empty) 60.4%, var(--b-empty) 69.6%, black 70%, var(--b-empty) 70.4%, var(--b-empty) 79.6%, black 80%, var(--b-empty) 80.4%, var(--b-empty) 89.6%, black 90%, var(--b-empty) 90.4%, var(--b-empty) 99.6%);

  --battery1: linear-gradient(0deg, var(--b-charge) 0%, var(--b-charge) 9.6%, black 10%, var(--b-empty) 10.4%, var(--b-empty) 19.6%, black 20%, var(--b-empty) 20.4%, var(--b-empty) 29.6%, black 30%, var(--b-empty) 30.4%, var(--b-empty) 39.6%, black 40%, var(--b-empty) 40.4%, var(--b-empty) 49.6%, black 50%, var(--b-empty) 50.4%, var(--b-empty) 59.6%, black 60%, var(--b-empty) 60.4%, var(--b-empty) 69.6%, black 70%, var(--b-empty) 70.4%, var(--b-empty) 79.6%, black 80%, var(--b-empty) 80.4%, var(--b-empty) 89.6%, black 90%, var(--b-empty) 90.4%, var(--b-empty) 99.6%);

  --battery2: linear-gradient(0deg, var(--b-charge) 0%, var(--b-charge) 9.6%, black 10%, var(--b-charge) 10.4%, var(--b-charge) 19.6%, black 20%, var(--b-empty) 20.4%, var(--b-empty) 29.6%, black 30%, var(--b-empty) 30.4%, var(--b-empty) 39.6%, black 40%, var(--b-empty) 40.4%, var(--b-empty) 49.6%, black 50%, var(--b-empty) 50.4%, var(--b-empty) 59.6%, black 60%, var(--b-empty) 60.4%, var(--b-empty) 69.6%, black 70%, var(--b-empty) 70.4%, var(--b-empty) 79.6%, black 80%, var(--b-empty) 80.4%, var(--b-empty) 89.6%, black 90%, var(--b-empty) 90.4%, var(--b-empty) 99.6%);

  --battery3: linear-gradient(0deg, var(--b-charge) 0%, var(--b-charge) 9.6%, black 10%, var(--b-charge) 10.4%, var(--b-charge) 19.6%, black 20%, var(--b-charge) 20.4%, var(--b-charge) 29.6%, black 30%, var(--b-empty) 30.4%, var(--b-empty) 39.6%, black 40%, var(--b-empty) 40.4%, var(--b-empty) 49.6%, black 50%, var(--b-empty) 50.4%, var(--b-empty) 59.6%, black 60%, var(--b-empty) 60.4%, var(--b-empty) 69.6%, black 70%, var(--b-empty) 70.4%, var(--b-empty) 79.6%, black 80%, var(--b-empty) 80.4%, var(--b-empty) 89.6%, black 90%, var(--b-empty) 90.4%, var(--b-empty) 99.6%);

  --battery4: linear-gradient(0deg, var(--b-charge) 0%, var(--b-charge) 9.6%, black 10%, var(--b-charge) 10.4%, var(--b-charge) 19.6%, black 20%, var(--b-charge) 20.4%, var(--b-charge) 29.6%, black 30%, var(--b-charge) 30.4%, var(--b-charge) 39.6%, black 40%, var(--b-empty) 40.4%, var(--b-empty) 49.6%, black 50%, var(--b-empty) 50.4%, var(--b-empty) 59.6%, black 60%, var(--b-empty) 60.4%, var(--b-empty) 69.6%, black 70%, var(--b-empty) 70.4%, var(--b-empty) 79.6%, black 80%, var(--b-empty) 80.4%, var(--b-empty) 89.6%, black 90%, var(--b-empty) 90.4%, var(--b-empty) 99.6%);

  --battery5: linear-gradient(0deg, var(--b-charge) 0%, var(--b-charge) 9.6%, black 10%, var(--b-charge) 10.4%, var(--b-charge) 19.6%, black 20%, var(--b-charge) 20.4%, var(--b-charge) 29.6%, black 30%, var(--b-charge) 30.4%, var(--b-charge) 39.6%, black 40%, var(--b-charge) 40.4%, var(--b-charge) 49.6%, black 50%, var(--b-empty) 50.4%, var(--b-empty) 59.6%, black 60%, var(--b-empty) 60.4%, var(--b-empty) 69.6%, black 70%, var(--b-empty) 70.4%, var(--b-empty) 79.6%, black 80%, var(--b-empty) 80.4%, var(--b-empty) 89.6%, black 90%, var(--b-empty) 90.4%, var(--b-empty) 99.6%);

  --battery6: linear-gradient(0deg, var(--b-charge) 0%, var(--b-charge) 9.6%, black 10%, var(--b-charge) 10.4%, var(--b-charge) 19.6%, black 20%, var(--b-charge) 20.4%, var(--b-charge) 29.6%, black 30%, var(--b-charge) 30.4%, var(--b-charge) 39.6%, black 40%, var(--b-charge) 40.4%, var(--b-charge) 49.6%, black 50%, var(--b-charge) 50.4%, var(--b-charge) 59.6%, black 60%, var(--b-empty) 60.4%, var(--b-empty) 69.6%, black 70%, var(--b-empty) 70.4%, var(--b-empty) 79.6%, black 80%, var(--b-empty) 80.4%, var(--b-empty) 89.6%, black 90%, var(--b-empty) 90.4%, var(--b-empty) 99.6%);

  --battery7: linear-gradient(0deg, var(--b-charge) 0%, var(--b-charge) 9.6%, black 10%, var(--b-charge) 10.4%, var(--b-charge) 19.6%, black 20%, var(--b-charge) 20.4%, var(--b-charge) 29.6%, black 30%, var(--b-charge) 30.4%, var(--b-charge) 39.6%, black 40%, var(--b-charge) 40.4%, var(--b-charge) 49.6%, black 50%, var(--b-charge) 50.4%, var(--b-charge) 59.6%, black 60%, var(--b-charge) 60.4%, var(--b-charge) 69.6%, black 70%, var(--b-empty) 70.4%, var(--b-empty) 79.6%, black 80%, var(--b-empty) 80.4%, var(--b-empty) 89.6%, black 90%, var(--b-empty) 90.4%, var(--b-empty) 99.6%);

  --battery8: linear-gradient(0deg, var(--b-charge) 0%, var(--b-charge) 9.6%, black 10%, var(--b-charge) 10.4%, var(--b-charge) 19.6%, black 20%, var(--b-charge) 20.4%, var(--b-charge) 29.6%, black 30%, var(--b-charge) 30.4%, var(--b-charge) 39.6%, black 40%, var(--b-charge) 40.4%, var(--b-charge) 49.6%, black 50%, var(--b-charge) 50.4%, var(--b-charge) 59.6%, black 60%, var(--b-charge) 60.4%, var(--b-charge) 69.6%, black 70%, var(--b-charge) 70.4%, var(--b-charge) 79.6%, black 80%, var(--b-empty) 80.4%, var(--b-empty) 89.6%, black 90%, var(--b-empty) 90.4%, var(--b-empty) 99.6%);
  
  --battery9: linear-gradient(0deg, var(--b-charge) 0%, var(--b-charge) 9.6%, black 10%, var(--b-charge) 10.4%, var(--b-charge) 19.6%, black 20%, var(--b-charge) 20.4%, var(--b-charge) 29.6%, black 30%, var(--b-charge) 30.4%, var(--b-charge) 39.6%, black 40%, var(--b-charge) 40.4%, var(--b-charge) 49.6%, black 50%, var(--b-charge) 50.4%, var(--b-charge) 59.6%, black 60%, var(--b-charge) 60.4%, var(--b-charge) 69.6%, black 70%, var(--b-charge) 70.4%, var(--b-charge) 79.6%, black 80%, var(--b-charge) 80.4%, var(--b-charge) 89.6%, black 90%, var(--b-empty) 90.4%, var(--b-empty) 99.6%);
  
  --battery10: linear-gradient(0deg, var(--b-charge) 0%, var(--b-charge) 9.6%, black 10%, var(--b-charge) 10.4%, var(--b-charge) 19.6%, black 20%, var(--b-charge) 20.4%, var(--b-charge) 29.6%, black 30%, var(--b-charge) 30.4%, var(--b-charge) 39.6%, black 40%, var(--b-charge) 40.4%, var(--b-charge) 49.6%, black 50%, var(--b-charge) 50.4%, var(--b-charge) 59.6%, black 60%, var(--b-charge) 60.4%, var(--b-charge) 69.6%, black 70%, var(--b-charge) 70.4%, var(--b-charge) 79.6%, black 80%, var(--b-charge) 80.4%, var(--b-charge) 89.6%, black 90%, var(--b-charge) 90.4%, var(--b-charge) 99.6%);
}

.power-left {
  --b-charge: var(--IceNormal);
  background: var(--battery7);
}

.power-left-section .power-bottom:before {
  background: var(--IceNormal);
  filter: brightness(0.5);
}

.power-right {
  --b-charge: var(--StormNormal);
  background: var(--battery7);
}

.power-right-section .power-bottom:before {
  background: var(--StormDark);
}

.power-left:before, .power-right:before {
  content: "";
  background: linear-gradient(90deg, black 0%, gray 20%, black 100%);
  width:100%;
  height: 100%;
  display:block;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
  z-index:2;
  transition: all 0.3s;
}

:is(.power-left-section, .power-right-section):hover :is(.power-left, .power-right):before {
      opacity: 0.7;
}

.power-left:after, .power-right:after {
  content: "";
  background-image: url("https://ravare.neocities.org/Images/Ravare%20ReLogo_Ic_Bl.svg");
  background-repeat: no-repeat;
  background-position: center;
  width:100%;
  height: 200px;
  display:block;
  position: absolute;
  top: 0;
  left: 0;
  z-index:-1;
}

/* Protocol Module */
.protocols-list {
  text-align: left;
  height: 340px;
  border: 4px solid RGB(30, 30, 30);
  box-shadow: inset 0px 0px 15px 0px #000000;
  margin: 28px;
  padding: 12px;
  background: RGBA(150, 150, 150, 0.4);
  overflow-y: scroll;
}

.center-protocol {
  text-align: center;
  font-size: 14px;
  padding-top: 4px;
  padding-bottom: 4px;
  margin-bottom: 16px;
  border-bottom: 1px dashed black;
}