:root {
/*                                              Colors        */
    --BackgroundColor: rgba(0, 0, 0, 1);
    --TextColor: rgba(135, 160, 185, 1);
    --TextHighlightColor: rgba(195, 220, 245, 1);
    --TextLinkColor: rgba(120, 185, 120, 1);
    --TextLinkVisitedColor: rgba(100, 165, 100, 0.75);
    --TextLinkHoverColor: rgba(255, 255, 255, 1);
    --TextLinkActiveColor: rgba(255, 255, 255, 1);
    --TextH3Color: rgba(150, 100, 150, 1);
    --TitleColor: rgba(255, 255, 255, 1);
    --MainTextSize: 24rem;
}

@font-face {
    font-family:"Barlow Condensed";
    src:
      local("BarlowCondensed-Regular"),
      url("fonts/BarlowCondensed-Regular.ttf") format("Truetype");
      font-weight: normal;
      font-style: normal;
      font-display:swap;
  }
  
  @font-face {
    font-family:"Barlow Condensed";
    src:
      local("BarlowCondensed-Italic"),
      url("fonts/BarlowCondensed-Italic.ttf") format("Truetype");
      font-weight: normal;
      font-style: italic;
      font-display:swap;
  }
  
  @font-face {
    font-family:"Barlow Condensed";
    src:
      local("BarlowCondensed-SemiBold"),
      url("fonts/BarlowCondensed-SemiBold.ttf") format("Truetype");
      font-weight: bold;
      font-style: normal;
      font-display:swap;
  }
  
  @font-face {
    font-family:"Barlow Condensed";
    src:
      local("BarlowCondensed-SemiBoldItalic"),
      url("fonts/BarlowCondensed-SemiBoldItalic.ttf") format("Truetype");
      font-weight: bold;
      font-style: italic;
      font-display:swap;
  }
  
  @font-face {
    font-family:"Bebas Neue";
    src:
      local("BebasNeue-Regular"),
      url("fonts/BebasNeue-Regular.ttf") format("Truetype");
      font-weight: normal;
      font-style: normal;
      font-display:swap;
  }




html {
    font-size: 5.25%;
}
body {
    background-color: var(--BackgroundColor);
    color: var(--TextColor);
    font-family: 'Barlow Condensed';
    font-size: var(--MainTextSize);
}

a:link {
    text-decoration:none;
    font-weight: 600;
    font-size: var(--MainTextSize);
    color: var(--TextLinkColor);
    text-transform: uppercase;
    transition: text-shadow 0.5s;
}

a:visited {
    text-decoration:none;
    color: var(--TextLinkVisitedColor);
}

a:hover {
    text-decoration:none;
    color: var(--TextLinkHoverColor);
    text-shadow:
        -1px 0 1px rgb(255, 49, 148),
        -2px 0 1px rgb(255, 49, 148, 0.5),
        -3px 0 1px rgb(255, 49, 148, 0.5),
        1px 0 1px rgb(49, 255, 255),
        2px 0 1px rgb(49, 255, 255, 0.5),
        3px 0 1px rgb(49, 255, 255, 0.5);
}

a:active {
    text-decoration:none;
    color: var(--TextLinkActiveColor);
}

p {
    text-indent: 2.5ch;
    padding: 0;
    margin-top: 0;
}

b {
    font-weight: 400;
    color: rgba(185,160,135,1);

}

h3 {
    color: var(--TextH3Color);
    font-size: 30rem;
    width: 100%;
    border-bottom-style: solid;
    border-bottom-width: 2rem;
    border-bottom-color: var(--MainTextColor);
    text-align: end;
    line-height: 26rem;
    margin-top: 0;
    text-transform: uppercase;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

text-hl {
    color: var(--TextHighlightColor);
    text-shadow:
        -1px -1px 8rem rgba(150, 100, 150, 0.75),
        1px 1px 8rem rgba(150, 100, 150, 0.75);
}

body-note {
border-style: solid;
border-width: 1rem;
border-color: var(--TextHighlightColor);
padding: 15rem;
width: 50%;
display: block;
margin-left:auto;
margin-right:auto;
font-size: 18rem;
}

img {
max-width: 100%;
max-height:auto;
}


.sidetext {
    font-size: 50rem;
    letter-spacing: 3.5rem;
    text-orientation: mixed;
    writing-mode: sideways-lr;
    color: var(--TitleColor);
    float: left;
    margin-right: 20rem;
    text-align: center;
    vertical-align: middle;
    font-family: 'Bebas Neue';
}

.sidetexttable {
    margin-left: -100rem;
    vertical-align: top;
}


hr {
    width: 50%;
    background: linear-gradient(to right, var(--BackgroundColor), var(--TextHighlightColor), var(--BackgroundColor));
    height: 2rem;
    border: 0;
    margin-bottom: 60rem;
    margin-top: 60rem;

}

.maincontent {
    width: 90%;
    border-width: 2rem;
    border-top-color: var(--TextLinkHoverColor);
    border-left-color: var(--TextLinkHoverColor);
    border-right-color: var(--TextLinkVisitedColor);
    border-bottom-color: var(--TextLinkVisitedColor);
    vertical-align: top;
    height: 95%
}

.section {
    column-count: 2;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30rem;
    margin-bottom: 30rem;
    vertical-align: top;
    column-fill: balance;
    max-width: 1080px;
}

.sectionspan {
    column-count: 1;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30rem;
    margin-bottom: 30rem;
    vertical-align: top;
    max-width: 1080px;
}


.titletext {
    z-index: -1;
    color: var(--TitleColor);
    font-family: 'Bebas Neue';
    font-size: 60rem;
    letter-spacing: 10rem;
    text-shadow:
        -1px -1px 8rem var(--TextHighlightColor),
        1px 1px 8rem var(--TextHighlightColor);
    text-align: center;
    margin-top: 20rem;
}

details {
    margin-bottom: 30rem;
  }
  
  summary {
    color: var(--TextH3Color);
    font-size: 30rem;
    width: 100%;
    border-bottom-style: solid;
    border-bottom-width: 2rem;
    border-bottom-color: var(--MainTextColor);
    text-align: end;
    line-height: 26rem;
    margin-top: 0;
    text-transform: uppercase;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Bebas Neue';
    cursor: pointer;
  }
  
  details[open] summary {
    color: var(--TextH3Color);
    font-size: 30rem;
    width: 100%;
    border-bottom-style: solid;
    border-bottom-width: 2rem;
    border-bottom-color: var(--MainTextColor);
    text-align: end;
    line-height: 26rem;
    margin-top: 0;
    text-transform: uppercase;
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Bebas Neue';
  }

.attention {
    color: rgb(255, 255, 255); 
    text-shadow: 0 0 0px rgb(0, 0, 0);
    animation: pulse 3s linear normal infinite;
    display: inline;
    margin-left: auto;
    margin-right: auto;
    font-size: 30rem;

}

@keyframes pulse {
    0%,100% { text-shadow: 
        -1px 0 5px rgba(255, 49, 148, 1), 
        -2px 0 5px rgba(255, 49, 148, 1), 
        -3px 0 5px rgba(255, 49, 148, 1), 
        1px 0 5px rgba(49, 255, 55, 1), 
        2px 0 5px rgba(49, 255, 55, 1), 
        3px 0 5px rgba(49, 255, 55, 1);}
    50% { text-shadow: 0 0 0px rgb(0, 0, 0); }
  }
  /* Respect user's motion preferences */
  
  @media (prefers-reduced-motion: reduce) {
    .glow-text { animation: none; }
  }