@font-face {
     font-family: byte;
     src: url(https://dl.dropbox.com/s/p8bxivlkgybb21h/Px437_MBytePC230_EGA%5B1%5D.ttf);
}
 @font-face {
     font-family: werd;
     src: url(https://dl.dropbox.com/s/1kjgqm86fvnstaw/WerdnasReturn.ttf);
}
 body {
     background-image: url("/siteImg/oldhome2bg.png");
     background-repeat: repeat;
     background-size: 22em;
     font-family: byte;
     width: 65em;
     margin: auto;
     margin-top: 1.5em;
}
 .grid-container {
     display: grid;
     grid-template-areas: 'header header header header header header' 'menu main main main main right' 'footer footer footer footer footer footer';
     gap: 7px;
     border-radius: 6px;
     padding: 5px;
}
 .top {
     grid-area: header;
     width: 100%;
}
 .left {
     grid-area: menu;
     width: 14em;
}
 .main {
     grid-area: main;
     width: 36.2em;
}
 .right {
     grid-area: right;
     width: 14em;
}
 .footer {
     grid-area: footer;
     width: 100%;
}
 .section {
     background-color: white;
     border: 1px solid black;
     border-radius: 6px;
}
 .left > .section {
     margin-bottom: 7px;
}
 .right > .section {
     margin-bottom: 7px;
}
 .tab {
     text-align: left;
     border-bottom: 1px solid black;
     border-radius: 6px 6px 0 0;
     padding: 1px;
     background: linear-gradient(90deg, rgba(255,150,221,1) 0%, rgba(255,206,150,1) 12.5%, rgba(255,242,150,1) 25%, rgba(192,255,150,1) 37.5%, rgba(150,234,255,1) 50%, rgba(150,167,255,1) 62.5%, rgba(186,150,255,1) 75%, rgba(255,150,253,1) 87.5%, rgba(255,150,221,1) 100%);
}
 .content {
     margin: 0.2em;
}
 .head {
     font-family: werd;
     font-size: 1.5em;
     margin: 0.1em;
}
 .boxed {
     border: 1px solid #989898;
     border-radius: 6px;
     padding: 2px;
     overflow: auto;
     position: relative;
     z-index: 10;
     background: white;
}
 a {
     color: #2D96FF;
     display: inline-block;
     transition: .3s ease;
     z-index: 40;
}
 a:hover {
     transform: translateY(-9%);
     z-index: 40;
}
 #footerrr img {
     height: 5em;
}
 #gotw {
     text-align: center;
}
 #gotw img {
     height: 9.25em;
	 max-width: 13em;
}
 #todo .content {
     padding: 7px;
}
 #todo .boxed {
     height: 7em;
     font-size: 0.9em;
     overflow: auto;
}
 .pill {
     border: 1px solid #989898;
     border-radius: 10px;
     padding: 3px;
     line-height: 1.7em;
}
 #maintab .content {
     padding: 6px;
}
 .rainbow {
     background: linear-gradient(90deg, rgba(255,150,221,1) 0%, rgba(255,206,150,1) 12.5%, rgba(255,242,150,1) 25%, rgba(192,255,150,1) 37.5%, rgba(150,234,255,1) 50%, rgba(150,167,255,1) 62.5%, rgba(186,150,255,1) 75%, rgba(255,150,253,1) 87.5%, rgba(255,150,221,1) 100%);
}
 #cboxWarning {
     writing-mode: vertical-rl;
     text-orientation: mixed;
     font-family: windows;
     font-size: 1.2em;
     position: absolute;
     z-index: 40;
     margin-left: 9.6em;
     margin-top: 0.3em;
     height: 10em;
}
 .gifcap {
     overflow: hidden;
     text-overflow: ellipsis;
     display: block;
     max-width: 13em;
     white-space: nowrap;
	 margin: 0.1em auto;
}
 @keyframes blink {
     0% {
         opacity: 1;
    }
     50% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 .moreContent {
     margin: 0.2em;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.15s ease-out;
     transition-delay: 0;
}
 #coolSiteButtons {
     height: 12.25em;
     overflow: auto;
}
 #coolSiteButtons a:hover {
     transform: translateY(-4%);
}
 #cboxTab {
     position: absolute;
     z-index: 999;
     font-size: 0.9em;
     margin-top: -11.5em;
     margin-left: 20em;
     width: 8em;
}
 #okayWgatDoICallThis {
     font-size: 0.9em;
     display: inline-block;
     margin-top: 0.1em;
}
 #outlinksLinks {
     line-height: 1.125em;
     font-size: 1.2em;
}
 @-moz-document url-prefix() {
     #cboxTab {
         line-height: 0.8em;
    }
     #webrings .boxed {
         overflow-x: hidden;
         overflow-y: scroll;
    }
     #okayWgatDoICallThis {
         font-size: 0.8em!important;
         line-height: 0.8em!important;
         margin-top: 0.1em;
    }
     .tab {
         line-height: 0.8em;
    }
     .collapsible {
         line-height: 0.8em;
    }
     #outlinks .head {
         margin: -0.05em;
    }
     #outlinksLinks {
         line-height: 1.1em;
    }
	#coolSiteButtons {
		 height: 13.1em;
		 overflow: auto;
	}
	#gotw img {
		 height: 8.05em;
	}
}
 #banner {
     width: 65%;
     margin: auto;
}
 #bannerKonata {
     position: absolute;
     margin-left: -10em;
     width: 10em;
}
 #bannerLogo {
     width: 100%;
}
 #blinkies .content {
     margin-bottom: -0.1em;
}
 #navKonata {
     position: absolute;
     z-index: 1;
     margin-left: 5.4em;
     width: 12em;
     margin-top: 0em;
}
 .navLinks {
     line-height: 1.2em;
     font-size: 1.1em;
     margin-left: 0.5em;
     position: relative;
     z-index: 5;
     margin-bottom: -0.2em;
	 padding-bottom: 5px;
}
 .navLinks a {
     display: block;
}
 .navLinks a::before {
     content: url('thing.png');
}
 #gotw .content a {
     font-size: 0.8em;
}
 #coolSiteButtons img {
     height: 31px;
}
 .mainDivider {
     width: 33%;
}
 #mainKonataA {
     float: right;
     width: 8.5em;
}
 #mainBasicInfo {
     width: 25.5em;
     height: 8.2em;
}
 #updatesHead {
     position: absolute;
     z-index: 15;
     margin-top: 0.2em;
     margin-left: 0.3em;
     width:9em;
}
 #cupNoodle {
     float: right;
     z-index: 15;
     position: relative;
     width: 15em;
     margin-top: 0.7em;
}
 #mainUpdates {
     width: 19em;
     height: 7em;
     margin-top: 1.4em;
     position: relative;
     z-index: 5;
     padding-top: 1em;
}
 #backgroundRainbow {
     position: absolute;
     z-index: 1;
     width: 36em;
     margin-left: -0.55em;
     margin-top: -1em;
}
 #smallRainbow {
     position: absolute;
     width: 4.5em;
     transform: rotate(-15deg);
     margin-top: 0.5em;
     margin-left: -0.2em;
}
 #opilaBird {
     width: 11em;
     position: absolute;
     margin-top: 1em;
     margin-left: -1.5em;
     z-index: 15;
}
 #pinkDog {
     position: absolute;
     z-index: 10;
     width: 4.7em;
     margin-top: 7.5em;
     margin-left: 11.8em;
}
 #blueDog {
     position: absolute;
     z-index: 10;
     width: 6em;
     margin-top: 8.3em;
     margin-left: 6em;
     transform: scaleX(-1);
}
 #aboutHead {
     position: absolute;
     z-index: 15;
     margin-top: -0.1em;
     margin-left: 16.5em;
     width: 9em;
}
 #mainAbout {
     width: 18em;
     height: 10em;
     margin-top: 1.4em;
     z-index: 1;
     margin-left: 16.5em;
}
 #wereQueer {
     z-index: 15;
     position: absolute;
     margin-left: 19.55em;
     margin-top: 0.4em;
     width: 13em;
}
 #mainCbox {
     position: relative;
     margin-top: 0.7em;
     margin-bottom: 0.2em;
     z-index: 70;
     border: 1px solid #989898;
     border-radius: 6px;
}
 #cboxTabContent {
     margin: 0.05em;
}
 #mainKonataB {
     position: absolute;
     z-index: 99;
     margin-left: 5.5em;
     width: 13em;
     margin-top: 1.9em;
}
 #music .content em {
     font-size: 0.9em;
}
 #musicing {
     margin-top: 0.2em;
     width: 100%;
     height: 2em;
     filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
}
 #constructionGuy {
     position: absolute;
     z-index: 15;
     margin-top: -0.5em;
     margin-left: 11em;
     width: 2em;
}
 #buttons {
     margin-bottom: 0;
}
 #onYrSite {
     font-size: 0.85em;
     line-height: 1.3em;
}
 #staticButton {
     position: absolute;
     margin-left: 6em;
}
 #movingButton {
     position: absolute;
}
 #buttons .content textarea {
     width: 15.2em;
     max-width: 15.2em;
     box-sizing: border-box;
     height: 5.5em;
     margin-top: 2.7em;
     margin-left: 0.5em;
}
 #footerrr .content marquee {
     margin-top: 0.3em;
     margin-bottom: -0.1em;
}
#xenicsOfTheNet span.mobileText {
	  display: none;
}
#mobileNav {
	  display: none;
}
@media screen and (max-width: 799px) {
	body {
	  width: 98%;
	  margin: auto;
	}
	.grid-container {
	  display: flex;
	  flex-wrap: wrap;
	  grid-template-areas: none;
	  gap: 0;
	  border-radius: 0;
	  padding: 0;
	}
	.top, .left, .right, .main, .footer {
	  width: 100%;
	}
	.top {
	  order: 1;
	}
	#mobileNav {
	  order: 2;
	}
	.main {
	  order: 3;
	}
	.left {
	  order: 4;
	}
	.right {
	  order: 5;
	}
	.footer {
	  order: 6;
	}
	#banner {
	  width: 100%;
	}
	#bannerLogo {
	  width: 100%;
	  margin: 1em 0em 1em 0em;
	  display: inline-block;
	}
	#bannerKonata {
	  display: none;
	}
	#blinkies {
	  display: none;
	}
	#nav {
	  display: none;
	}
	#mobileNav {
	  position: relative;
	  display: block;
	  width: 99%;
	  text-align: center;
	  margin: auto auto 0.5em auto;
	}
	#mobileNav .navLinks a {
	  display: inline-block;
	  padding: 8px 3px;
	  border: 2px solid #0A68A4;
	  font-weight: bold;
	  margin: 0.2em 0em 0.2em 0em;
	  border-radius: 1em;
	  color: #0A68A4!important;
	  text-decoration: none!important;
	  width: 20.2%;
	  text-align: center;
	  font-size: 0.9em;
	  letter-spacing: -0.1em;
	}
	#mobileNav .navLinks a::before {
	  content: '';
	}
	#gotw, #outlinks, #music, #todo, #buttons, #webrings, #footerrr {
	  margin: 0.5em auto auto auto;
	}
	#gotw .content {
	  font-size: 1.5em;
	}
	#gotw .content a {
		display: block;
		width: auto;
		height: 1em;
	}
	.main {
	  height: auto;
	}
	#mainBasicInfo {
	  border: none;
	  height: auto;
	  position: relative;
	  width: 98.5%;
	  text-align: center;
	}
	#mainKonataA { 
	  display: block;
	  position: relative;
	  float: none;
	  margin: 0.5em auto;
	}
	#cupNoodle {
	  display: block;
	  float: none;
	  margin: 0.5em auto;
	  position: relative;
	}
	#updatesHead {
	  display: block;
	  float: none;
	  margin: 0.5em auto -1.2em auto;
	  position: relative;
	}
	#mainUpdates {
	  display: block;
	  float: none;
	  margin: auto;
	  position: relative;
	  width: 98%;
	  height: 15em;
	}
	#aboutHead {
	  display: block;
	  float: none;
	  margin: 12em auto -1.5em auto;
	  position: relative;
	}
	#mainAbout {
	  display: block;
	  float: none;
	  margin: auto;
	  position: relative;
	  width: 98%;
	  height: auto;
	  border: none;
	  text-align: center;
	}
	#backgroundRainbow {
	  width: 97.5%;
	}
	#pinkDog {
	  margin: 0;
	  margin-top: 6.25em;
	  right: 2em;
	}
	#blueDog {
	  margin: 0;
	  margin-top: 7em;
	  right: 7em;
	}
	#opilaBird {
	  margin: 0;
	}
	#smallRainbow {
	  display: none;
	}
	#mainCbox {
	  display: block;
	  position: relative;
	  width: 98%;
	  height: 20em;
	  margin: 0.5em auto 0.5em auto;
	}
	#cboxTab {
	  display: block;
	  position: relative;
	  width: 98%;
	  margin: auto;
	}
	#mainKonataB {
	  display: block;
	  position: relative;
	  margin: 0.5em auto -3em auto;
	}
	#wereQueer {
	  display: block;
	  position: relative;
	  margin: auto;
	}
	#outlinks {
	  text-align: center;
	}
	#outlinks #coolSiteButtons {
	  width: 82%;
	  margin: auto auto 0.5em auto;
	}
	#constructionGuy {
	  right: 0.5em;
	}
	#music {
	  display: none;
	}
	#webrings .content {
	  text-align: center;
	}
	#buttons .content {
	  text-align: center;
	}
	#buttons .content textarea {
	  max-width: 98%;
	  max-height: 10em;
	  width: 99em;
	  margin: auto;
	}
	#buttons #staticButton, #buttons #movingButton {
	  display: inline-block;
	  margin: auto;
	  position: relative;
	}
	.pill {
	  width: auto;
	  padding: 0px 8px;
	}
}