@font-face {
font-family: 'Adler';
  src: url('/fonts/Adler.ttf') format("truetype");}
@font-face {
  font-family: "VeteranTypewriter";
  src: url("/fonts/VeteranTypewriter.ttf") format("truetype");
}
@font-face {
  font-family: "Deutschische";
  src: url("/fonts/Deutschische.otf") format("opentype");
}
@font-face {
  font-family: "Fantaisie";
  src: url("/fonts/FantaisieArtistique.ttf") format("truetype");
}
@font-face {
  font-family: "OverdriveSunset";
  src: url("/fonts/Overdrive Sunset.otf") format("opentype");
}
@font-face {
  font-family: "Scratchy";
  src: url("/fonts/SCRATCHL.ttf") format("truetype");
}
@font-face {
font-family: 'Prozak';
src: url('/fonts/prozak.ttf') format("truetype");
}
@font-face {
font-family: 'SpecialElite';
src: url('/fonts/SpecialElite.ttf') format("truetype");
}
@font-face {
font-family: 'DirtyEnough';
src: url('/fonts/DirtyEnough.ttf') format("truetype");
}


    .mgcontainer {width:22%;height:auto;margin:1% auto;float:left;}
    .mgcontainer1 {width:65%;height:auto;margin:1% auto;float:left;}
    .mgcontainer2 {width:13%;height:500px;margin:1% auto;float:left;}

::selection {
  background: #270011;
  color: #e5d1f2;
}
::-moz-selection {
  background: #270011;
  color: #e5d1f2;
}
::-webkit-selection {
  background: #270011;
  color: #e5d1f2;}

@-webkit-keyframes color-change {
    0% { color: #633d5c; }
    50% { color: #741d1d; }
    100% { color: #633d5c; }
}
@-moz-keyframes color-change {
    0% { color: #633d5c; }
    50% { color: #741d1d; }
    100% { color: #633d5c; }
}
@keyframes color-change {
    0% { color: #633d5c; }
    50% { color: #741d1d; }
    100% { color: #633d5c; }
}

.rbar, .rbar2 {margin-top: -20px;}
.rbar {margin-bottom: -20px;}

body {
  font-family: Verdana, Helvetica;
  color: #ffccdd;
  background-color: #010001;
  background-image: url("/images/backgroundsemitransparent3a.png");
  background-repeat: repeat;
  cursor: url("/graphics/Cursor1.png"), auto;
    scrollbar-color: #98d5c2 #090909;
scrollbar-width: thin;
}

h1 {
  font-family: "Deutschische";
  color: #833b53;
  text-shadow:
    -1px -1px 0 #270011,
    1px -1px 0 #270011,
    -1px 1px 0 #270011,
    1px 1px 0 #270011;
}

h2 {
  font-family: "OverdriveSunset";
  color: #a9375a;
  text-shadow:
    -1px -1px 0 #270011,
    1px -1px 0 #270011,
    -1px 1px 0 #270011,
    1px 1px 0 #270011;
}

h3, h4, h5, h6 {
  font-family: "Adler";
  color: #98d5a8;
  text-shadow:
    -1px -1px 0 #270011,
    1px -1px 0 #270011,
    -1px 1px 0 #270011,
    1px 1px 0 #270011;
}

.microheader {font-family:"Prozak";font-size:15px;letter-spacing:11px;}

p {
  font-size: 13px;
  font-family: "VeteranTypewriter";
}

a {
  font-family: "Fantaisie";
  color: #98d5a8;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

a:hover {
  color: #dcf1e1;
  cursor: url("/graphics/Cursor2.png"), auto;
}
.form
{float:left;max-width:90px;margin:3px;}

.shift{
   -webkit-animation: color-change 6s infinite;
    -moz-animation: color-change 6s infinite;
    animation: color-change 6s infinite;
}

.headerimg {position: absolute;margin-left: 85%;height: 10rem;width: 10rem;margin-top: -4rem;}

.headerimg img {height:100%;width:100%;}

.headerimg:hover {filter:brightness(90%);}

:root {/*
    made in chrome, or webkit based browsers... (=`ω´=)
    it's basically useless in firefox (•ิ_•ิ) (tabs don't work)
    still looks nice as deco though ~

        ==== customization ====

        color scheme ! will affect the... case(?) and tab color
        can use #hex, rgb(0,0,0), colorname, etc */
        --overall-color: #5948d0;

        /* welcome image / background ?
        i love using a png for this */
        --welcome-image: url("https://file.garden/ak17KIAGvWtlLayE/Art/Website/azurespin.gif");

        /* custom tab titles ! */
        --tab-1-title: "FUN FACT";
        --tab-2-title: "DID YOU KNOW?";
        --tab-3-title: "DID YOU KNOW?";
        --tab-4-title: "DID YOU KNOW?";

        /* text that goes after every tab ! 
        use '\A' without quotes to form a line break */
        --tab-1-content: "I am deeply passionate \A about aquatics!";
        --tab-2-content: "Goldfish can keep memories for at least 3-5 months!";
        --tab-3-content: "Livebearer fish can give live birth!";
        --tab-4-content: "The painted mantis shrimp has a punch force equal to a 22-caliber bullet. Ouch!";

        /* thumbnails ! make sure you put your image
        link INSIDE the quotation marks.... please */
        --tab-1-thumbnail: url("https://file.garden/ak17KIAGvWtlLayE/Art/Website/icon1.png");
        --tab-2-thumbnail: url("https://file.garden/ak17KIAGvWtlLayE/Art/Website/icon2.png");
        --tab-3-thumbnail: url("https://file.garden/ak17KIAGvWtlLayE/Art/Website/icon3.png");
        --tab-4-thumbnail: url("https://file.garden/ak17KIAGvWtlLayE/Art/Website/icon4.gif");
    }

.iframecontainer {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

.iframecontainer2 {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.iframecontainer3 {
  position: relative;
  overflow: hidden;
  width: 100%;
  text-shadow:none;
}
.iframecontainer3 p {
  font-family:'Courier New';
  letter-spacing:0;}

.iframecontainer3 h4,h5,h6 {
  font-family:'Courier New';}
/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.responsive-iframe2 {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
}

.responsive-iframe2:hover {
cursor:url('/graphics/Cursor1.png'),auto;}

body {color:#ffccdd;text-shadow: -1px -1px 0 #270011, 1px -1px 0 #270011, -1px 1px 0 #270011, 1px 1px 0 #270011;background-color:#010001;font-family:'Courier New';
background-image:url('/images/background10.png');background-size: contain;}
* {
  box-sizing: border-box;
  text-align:center;
cursor:url('/graphics/Cursor1.png'),auto;}
.game-container{
  display:flex;
  gap:20px;
  justify-content:center;
  padding:20px;
}
@media (max-width: 1400px) {
.mgcontainer, .mgcontainer1 {width:100%;height:auto;margin:1% auto;float:left;}
.mgcontainer2 {width:100%;height:500px;margin:1% auto;float:left;}
.responsive-iframe2 {
  width: 312px;
  height: 320px;
  aspect-ratio: 1 / 1;
}}