/* 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." */

body {
  background-image:url(/images/backgrounds/asterstars.gif);
  background-color:#22002F;
  background-blend-mode: screen;
  color: #86F8F9;
  text-align: center;
  font-family: Typostuck;
  cursor:  url(/images/cursors/sburb2.png), auto !important;
}

.falsebody{
            width: 1147.5px;
            margin: auto;
        }

* {
  scrollbar-color: #F44B99 #86F8F9;
}

a {
  color: #86F8F9;
  cursor:  url(/images/cursors/sburb2.png), auto !important;
}

.navbar a {
            color: #86F8F9;
        }
        
        .navbar a.active{
            color: #F44B99;
        }
        
        .navbar a.active:after{
            content:" ✩";
        }
        
        .navbar li{
            margin:0; 
            line-height:3px; 
            list-style-type:none;
        }
        
        .navbar li img{
            width:20px;
            height:20px;
            margin:5px;
            margin-right:7.5px;
            margin-bottom:0;
            vertical-align:text-bottom;
            image-rendering: pixelated;
        }
        
        ul.sublink {
          font-size: 16px;
          }
        ul.sublink img {
          height: 16px;
          width:16px;
          }

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline wavy;
  filter: drop-shadow(0px 0px 5px #F44B99);
}

        .container {
  display: grid;
  grid-template-columns: 215px 900px;
  grid-template-rows: 195px 500px 50px;
  gap: 7.5px 7.5px;
  padding: 7.5px;
  background-image: url(/images/backgrounds/calispace.jpg);
  background-position: center;
  border:double #B765ED 5px;
  box-sizing: border-box;
  filter: drop-shadow(0px 0px 5px #B765ED);
  grid-template-areas:
    "banner banner"
    "navbar content"
    "navbar footer";
}
.banner { grid-area: banner; background-image:url(/images/banners/taurusbanner1.png); background-size:100%; border:ridge #22002F 5px; box-sizing: border-box; background-position:center;}
.navbar { grid-area: navbar; background-color:#22002F; text-align: left; color:#86F8F9;  background-image:none; font-style:normal; font-size:20px; margin:0; display:block; border:ridge #F44B99 5px; gap:none; width:auto; height:auto; padding:10px; box-sizing: border-box; position:relative;}
.content { grid-area: content; background-image:url(/images/backgrounds/rainbowz.gif); background-size:50%; border:ridge #22002F 5px; box-sizing: border-box;}
.footer { grid-area: footer; background-image:url(/images/backgrounds/rainbowz.gif); background-size:25%; color: #22002F; font-size:25px; line-height:50px; border:ridge #22002F 5px; box-sizing: border-box;}

.zoom {
  animation: textZoom 2s linear infinite;
}

@keyframes textZoom {
  0% {
    transform: scale(100%);
  }
  50% {
    transform: scale(120%);
  }
  100% {
    transform: scale(100%)
  }
}

.rainbow {
  animation: textRainbow 4s linear infinite;
}

@keyframes textRainbow {
  0% {
    color: magenta;
  }
  20% {
    color: orange;
  }
  40% {
    color: yellow;
  }
  60% {
    color: lime;
  }
  80% {
    color: blueviolet;
  }
  100% {
    color: magenta;
  }
}

.rainbowglow {
  animation: rainbowGlowy 4s linear infinite;
}

@keyframes rainbowGlowy {
        0% {
            filter: drop-shadow(0 0 10px magenta);
        }
        20% {
            filter: drop-shadow(0 0 10px orange);
        }
        40% {
            filter: drop-shadow(0 0 10px yellow);
        }
        60% {
            filter: drop-shadow(0 0 10px lime);
        }
        80% {
            filter: drop-shadow(0 0 10px blueviolet);
        }
        100% {
            filter: drop-shadow(0 0 10px magenta);
        }
    }

.hemospectrum {
  animation: textRainbow2 8s linear infinite;
}

@keyframes textRainbow2 {
  0% {
    color: #a20002;
  }
  8.3% {
    color: #a45301;
  }
  16.6% {
    color: #a1a200;
  }
  25% {
    color: #688705;
  }
  33.3% {
    color: #366507;
  }
  41.6% {
    color: #07844a;
  }
  50% {
    color: #008286;
  }
  58.3% {
    color: #014085;
  }
  66.6% {
    color: #0221c9;
  }
  75% {
    color: #420b82;
  }
  83.3% {
    color: #660167;
  }
  91.6% {
    color: #9c014f;
  }
  100% {
    color: #a20002;
  }
}

.bronze {
  color:#A25203;
}

 .marquee {
        animation: marquee 14s linear infinite;
    }
    @keyframes marquee {
        from {
            transform: translateX(100vw);
        }
        to {
            transform: translateX(-100vw);
        }
    }

    .elevatorBox {
        border: 2px solid;
        position:relative;
        overflow:hidden;
        height: 400px;
        width: 100px;
    }

    .elevator {
        animation: elevator 8s linear infinite;
    }
    @keyframes elevator {
        from {
            transform: translateY(100vh);
        }
        to {
            transform: translateY(-100vh);
        }
    }
    
    @media screen and (max-width: 1200px) {
  .hidden {
    display: none;
  }
}

::-moz-selection {
    color:#000;
    background:#F44B99;
}

::selection {
    color:#000;
    background:#F44B99;
}

@font-face {
    font-family: "Old Alternian"; 
    src: url("/fonts/oldalternianfont.ttf") format("truetype");
}

@font-face {
    font-family: "Typostuck"; 
    src: url("/fonts/typostuck.ttf") format("truetype");
}

@font-face {
    font-family: "Reflex"; 
    src: url("/fonts/reflexfont.ttf") format("truetype");
}

@font-face {
    font-family: "Halloween"; 
    src: url("/fonts/halloweenfont.ttf") format("truetype");
}

@font-face {
    font-family: "Aerospacer"; 
    src: url("/fonts/aerospacerfont.ttf") format("truetype");
}