@import url(fonts.css);

/*MAIN CONFIGURATION*/
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  padding: var(--body-padding);
  font-size: var(--font-size);
  line-height: var(--line-height);
}

/*--DEFAULT--*/
  p {padding: var(--p-padding)}

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  ul[role=list],
  ol[role=list] {
    list-style: none;
  }

  html:focus-within {
    scroll-behavior: smooth;
  }

  a:not([class]) {
    text-decoration-skip-ink: auto;
  }

  img,
  picture {
    max-width: 100%;
    display: block;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  textarea {
    background: #000;
    color: #fff;
    border: 1px solid #fff;
  }

  .flow>*:where(:not(:first-child)) {
    margin-top: var(--flow-spacer, 1em);
  }

/*--UTILITY--*/
  /*flexbox*/
    .flex {
      display: flex;
      gap: var(--gap, 1rem);
    }

    .flex-justifycenter {
      justify-content: center;
    }

    .flex-aligncenter {
      align-items: center;
    }

    .flex-alignstart {
      align-items: flex-start;
    }

    .flex-wrap {
      flex-wrap: wrap;
    }

    .flex-row {
      flex-direction: row;
    }

    .flex-column {
      flex-direction: column;
    }

    /* These classes are here when I want to quickly adjust the flex layout. */

    /* for 50/50 layouts (equal distribution) */
    .flex-50 {
      width: 50%;
    }
    
    /* For 70/30 layouts */
    .flex-70 {
      width: 70%;
    }

    .flex-30 {
      width: 30%;
    }
    
    /* For 80/20 layouts */
    .flex-80 {
      width: 80%
    }

    .flex-20 {
      width: 20%;
    }

    /* For 60/40 layouts */ 
    .flex-60 {
      width: 60%;
    }

    .flex-40 {
      width: 40%;
    }
 
  /*iframe*/
    .fullframe {
      width: 100%;
      height: 100%;
      padding: none;
      border: none;
    }

  /*padding and margins*/
    .no-margins {margin: 0 !important;} 
    .no-padding {padding: 0 !important;}
    
    /* padding (general) */
      .p-05em { padding: 0.5em;}
      .p-1em { padding: 1em;}

    /* bottom padding */
    .pb-05em {
      padding-bottom: 0.5em;
    }

  /*text formatting*/
    .text-bold {
      font-weight: bold;
    }

    .text-right {
      text-align: right;
    }

    .text-left {
      text-align: left;
    }

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

    .no-underline {
      text-decoration: none;
    }
  /*text formatting*/

  /*no selection*/
    .noselect {
      -webkit-touch-callout: none;
      /* iOS Safari */
      -webkit-user-select: none;
      /* Safari */
      -khtml-user-select: none;
      /* Konqueror HTML */
      -moz-user-select: none;
      /* Old versions of Firefox */
      -ms-user-select: none;
      /* Internet Explorer/Edge */
      user-select: none;
    }

  /*lists*/
    .no-list-bullet {
      list-style-type: none;
    }

    .no-list-bullet li {
      list-style-type: none;
    }

/*--ELEMENTS--*/
  /*aero button*/
    .aero {
      background-color: #00ffeab9;
      background: radial-gradient(farthest-corner at bottom center,
              rgba(255, 255, 255, 0.7),
              transparent),
          linear-gradient(to bottom, #00ffeab9, #00ff2fb9);
      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
      border: 1px solid #00ffeab9;
      color: rgba(50, 26, 17, 0.952);

      padding: 1ex 1em;
      position: relative;
      text-shadow: 0 2px 0.5em #0003;

      text-decoration: none;
      display: inline-block;
      box-sizing: border-box;
    }

    .aero::after {
      content: "";
      position: absolute;
      top: 8%;
      height: 40%;
      width: 95%;
      background: linear-gradient(to bottom,
              rgba(255, 255, 255, 0.8),
              rgba(255, 255, 255, 0.1));
      border-radius: 10em;
      left: 2.5%;
    }

    .aero .muted {
      color: rgba(50, 26, 17, 0.244);
    }

    button.aero {
      border-radius: 1em;
      transition: all .10s;
    }

    button.aero:hover {
      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
      filter: brightness(70%);
    }

    button.aero:active {
      transform: translate(1px, 1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    }

  /*tree-styled lists*/
    .tree {
      --spacing: 1.5rem;
      --radius: 10px;
    }

    .tree li {
      display: block;
      position: relative;
      padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
    }

    .tree ul {
      margin-left: calc(var(--radius) - var(--spacing));
      padding-left: 0;
      display: flex;
    }

    .tree ul li {
      border-left: 2px solid #ddd;
    }

    .tree ul li:last-child {
      border-color: transparent;
    }

    .tree ul li::before {
      content: '';
      display: block;
      position: absolute;
      top: calc(var(--spacing) / -2);
      left: -2px;
      width: calc(var(--spacing) + 2px);
      height: calc(var(--spacing) + 1px);
      border: solid #ddd;
      border-width: 0 0 2px 2px;
    }

    .tree summary {
      display: block;
      cursor: pointer;
    }

    .tree summary::marker,
    .tree summary::-webkit-details-marker {
      display: none;
    }

    .tree summary:focus {
      outline: none;
    }

    .tree summary:focus-visible {
      outline: 1px dotted #000;
    }

    .tree li::after,
    .tree summary::before {
      content: '';
      display: block;
      position: absolute;
      top: calc(var(--spacing) / 2 - var(--radius));
      left: calc(var(--spacing) - var(--radius) - 1px);
      width: calc(2 * var(--radius));
      height: calc(2 * var(--radius));
      border-radius: 50%;
      background: #ddd;
    }

    .tree summary::before {
      z-index: 1;
      background: #696 url('expand-collapse.svg') 0 0;
    }

    .tree details[open]>summary::before {
      background-position: calc(-2 * var(--radius)) 0;
    }

  /*tooltips*/
    .tooltip {
      position: relative;
    }

    .tooltip .tooltiptext {
      background-color: black;
      color: var(--base_accent);
      border: 1px solid var(--base_accent);
      visibility: hidden;
      text-align: center;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
    }

    .tooltip .tooltiptext {
      width: var(--tooltip-width);
      padding: 5px;
      bottom: 110%;
      left: 50%;
      margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
    }

  /*popups*/
    .popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, .7);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: scale(0, 0)
    }

    .popup .popup-content {
      width: 70dvw;
      height: 80dvh;
      background: #000;
      border: 1px solid #fff;
      padding: 5px;
      position: relative
    }

    .popup .popup-content iframe {
      width: 100%;
      height: 100%;
      border: none
    }

    .popup:target {
      transform: scale(1, 1);
      z-index: 999
    }

    .close {
      position: absolute;
      top: 0;
      right: 10px;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .close::after {
      content: "x";
      color: #fff;
      font-size: 20px
    }

  /*tags and text*/
    .tag { padding: 2px;
      color: #000;
      text-decoration: none;}

    .red {background: red;}
    .orange {background: orange;}
    .yellow {background: yellow;}
    .lime {background: lime;}
    .cyan {background: cyan;}
    .blue {background: blue;}
    .pink {background: magenta;}
    .purple {background: purple;}
    .blacktext {color: black;}
    .text-cyan {color: cyan;}

    /*rainbow text*/
      .rainbowtext_static {
        text-shadow: 0em -0.09em var(--text);
        background: linear-gradient(to right, #9e3735, #865062, #352552, #0f4672, #125963, #275c29, #60661b, #8b5d13, #752810);
        background-clip: border-box;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .rainbowtext_animated {
        text-shadow: 3px 0px 1px white;
        background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, yellow, #ff3399, #6666ff);
        background-size: auto;
        background-clip: border-box;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: LSD 30s ease-in-out infinite;
        background-size: 400% 100%;
      }

      .LSDtext {
        background: linear-gradient(to right, #6666ff, #0099ff, #00ff00, yellow, #ff3399, #6666ff);
        background-size: auto;
        background-clip: border-box;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: LSD 30s ease-in-out infinite;
        background-size: 400% 100%;
      }
  
  /*Loading Screen*/
    .loadingScreen {
      position: fixed;
      z-index: 1000;
      width: 100%;
      height: 100vh;
      background-color: var(--base-colour3);
      color: var(--text-colour);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: display 1s;
    }
  
  /* If you want to bounce images, be my guest! */
    #bounce {
      position: absolute;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 1000;
      transition: transform 0.2s ease-in-out;
    }

/*--ANIMATIONS--*/
  @keyframes bounce {
    0% {scale: 1 1;}
    10% {scale: 0.8 1.1;}
    40% {scale: 1.1 0.9;}
    100% {scale: 1 1;}
  }

  @keyframes FadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

  @keyframes FlyIn {
    0% {transform: translateY(-2em);}
  }

  @keyframes float1 {
    0%, 100% {transform: translate(0em, 1em); filter: drop-shadow(0px 8px 2px #00000055);}
    50% {transform: translate(0em, -1em); filter: drop-shadow(0px 20px 6px #00000055);}
  }

  @keyframes float2 {
    0%, 100% {transform: translate(0em, .5em); filter: drop-shadow(0px 8px 2px #00000055);}
    50% {transform: translate(0em, -.5em); filter: drop-shadow(0px 20px 6px #00000055);}
  }

  @keyframes pulse {
    0%, 100% {transform: scale(1);}
    50%  {transform: scale(0.95);}
  }

  @keyframes pulse2 {
    0%, 100% {transform: rotate(-3deg) translate(0px, 0px);}
    50%  {transform: rotate(2deg) translate(0px, 8px);}
  }

  @keyframes hue-rotate {
    from {
    filter: hue-rotate(0deg);
    }

    to {
    filter: hue-rotate(360deg);
    }
  }