/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your HTML content. */
/* was #751115, #02723a, #014b5a, #00206a, #190d3e, #3a103e // was #e02d34 50% done, #03e474 50% done, #0197b4 50% done, #0040d4 50% done, #321b7d 50% done, #75207c 50% done */
/* was Cosmic Night #0f2027, #203a43, #2c5364 */
  
  body { background-attachment: fixed;
  background: linear-gradient(to bottom, #0f2027, #203a43, #2c5364);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: lavender; /* black */
  cursor: url('https://file.garden/anaNfo-1EEBDJQTF/sym430.cur'), default; /* I CAN't GET ANIMATED CURSORS TO WORK */
  font-family: verdana;
  height: 100vh;
  width: 100vw; }
  
  html, body { margin: 0;
  padding: 0;
  font-family: 'Canarina'; }
  
  #templogo { display: block;
  margin: auto;
  margin-top: 20px; }
  #templogo:hover {
  animation: wiggle 0.5s infinite; }
    
  .container { background-color: #190d3e;
   height: 520px;
   width: 1200px;
   overflow-y: auto;
   padding: 20px;
   border: 5px groove #8093F1;
   border-radius: 16px;
   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
   text-align: justify;
   position: relative;
   right: -550px; }
  .footer { background-color: #2c5364; /*was #f1f1f1*/
   text-align: center;
   padding: 05px;
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%; }
  .footer2 { font-size: 12px;
   color: lavender; /*was #c17a83*/
   margin-top: 55px;
   text-align: center; }
  .hazard-background { height: 30px;
   color: white;
   padding: 5px;
   background-image: repeating-linear-gradient(
   -55deg, #000, #000 20px, #ffb101 20px, #ffb101 40px ); }
   /* replacing marquee with scrolling hazard tape */
  .marquee { overflow: hidden;
   position:relative;
   white-space: nowrap;
   border: 4px solid black;
   box-sizing:border-box;
   width: 100vw;
   max-width: 800vw;
   background: repeating-linear-gradient(-45deg, yellow, yellow 20px, black 20px, black 40px ); }
   /* inner content that scrolls */
  .marquee-content { display: inline-block;
   padding-left: 100%;
   animation: scroll 50s linear infinite;
   font-size: 1.5rem;
   font-weight: bold;
   color: lavender;
   text-shadow: 3px 3px 4px black; /* was yellow ??? */ }
  .section { display: none; }
  .section.active { display: block; }
  .section-title { font-size: 1.4em;
   color: lavender;
   margin-bottom: 10px;
   text-align: center;
   font-weight: bold; }
  .text { font-size: 1.1em;
   color: lavender;
   margin-bottom: 15px; }
  .text a { text-decoration: none;
   color:lavender; }
  .text a:hover { font-style: italic;
   color: #8093f1; }
  .text span { font-weight: bold;
   color: lavender; }
  .title { font-size: 24px;
   color: lavender;
   margin-bottom: 10px;
   text-align: left;
   font-family: "04B_30"; }
   
  @keyframes scroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-100%); }}
      
  @keyframes shake {
      0% { transform: translate(1px, 1px) rotate(0deg); }
      10% { transform: translate(-1px, -2px) rotate(-1deg); }
      20% { transform: translate(-3px, 0px) rotate(1deg); }
      30% { transform: translate(3px, 2px) rotate(0deg); }
      40% { transform: translate(1px, -1px) rotate(1deg); }
      50% { transform: translate(-1px, 2px) rotate(-1deg); }
      60% { transform: translate(-3px, 1px) rotate(0deg); }
      70% { transform: translate(3px, 1px) rotate(-1deg); }
      80% { transform: translate(-1px, -1px) rotate(1deg); }
      90% { transform: translate(1px, 2px) rotate(0deg); }
      100% { transform: translate(1px, -2px) rotate(-1deg); }}
      
  @keyframes wiggle {
      0% { transform: rotate(0deg); }
      15% { transform: rotate(3deg); }
      30% { transform: rotate(-3deg); }
      45% { transform: rotate(2deg); }
      60% { transform: rotate(-2deg); }
      75% { transform: rotate(1deg); }
      100% { transform: rotate(0deg); }}
      
      /* The Music Player */
      .controls{ font-size:12px; /* size of controls */
       text-align:center;
       width:100px;
       height:20px;
       text-decoration: none;
       filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black); }
      
      /*-- "and here im making everything wiggle for no reason" // href=wiggle.css deleted because ohmgod - Jollie */