Allllll{
cursor: url("../images/cursor.png"), default;
}
nav {text-align:center
}
nav#navAlt{width:15rem;position:sticky;align-self:flex-start;top:0;margin:3rem
}
nav#navAlt>div{margin:10px auto
}
nav#nav{width:18rem;padding:5px;margin:1em
}
nav#nav a{text-decoration:none
}
.wrapper{display:flex
}
.navLink{overflow:hidden;font-size:calc(var(--body-font-size)/1.2);margin:1em 0;text-transform:uppercase;color:var(--secondary);width:8rem
}
.navLink>div{height:40px;max-width:50px;text-align:center;justify-content:center;margin:5px auto
}
.navLink>#home{background:var(--homeLink)50%/contain no-repeat
}
.navLink>#about{background:var(--aboutLink)50%/contain no-repeat
}
.navLink>#gallery{background:var(--galleryLink)50%/contain no-repeat
}
.navLink>#shrines{background:var(--shrinesLink)50%/contain no-repeat
}
.navLink>#code{background:var(--codeLink)50%/contain no-repeat
}
.navLink>#blog{background:var(--blogLink)50%/contain no-repeat
}
.navLink>#links{background:var(--linksLink)50%/contain no-repeat
}
.navLink>#microblog{background:var(--microblogLink)50%/contain no-repeat
}
.navLink>#library{background:var(--libraryLink)50%/contain no-repeat
}
.navLink>#nexus{background:var(--nexusLink)50%/contain no-repeat
}
.navWrapper{border:2px solid var(--secondary);padding:1em .2em;background-color:var(--tertiary);box-shadow:6px 6px var(--secondary_muted)
}
footer{z-index:9000;position:fixed
}
footer#footer{bottom:0;left:0;width:100%;background-color:var(--tertiary);border-top:2px solid var(--secondary)
}
footer#footer ul{list-style:none;display:flex;padding:0 5px;margin:0;height:2.6rem
}
footer#footer ul li{margin:auto 0
}
footer#footer ul li:first-child{flex:1
}
footer#footer ul li a{padding:0 10px;display:inline-flex;text-decoration:none
}
footer#footer ul li a:hover,footer#footer ul li a.selected{color:var(--secondary_muted)
}
#footer-button{font:var(--body-font);font-size:1rem;padding:0 20px;border:2px solid var(--secondary);color:var(--tertiary)
}
#footer-button:hover,#footer-button:focus{background-color:var(--secondary);color:var(--tertiary)
}
.modal{background-color:var(--secondary_muted);display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;opacity:100%;overflow:auto;-webkit-animation-name:fadeIn;-webkit-animation-duration:.4s;animation-name:fadeIn;animation-duration:.4s
}
.modal-content{position:fixed;bottom:35px;aspect-ratio:1/cos(30deg);clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);background-color:var(--tertiary);width:400px;border:1px solid var(--secondary);margin-left:35%;margin-bottom:15%;border-radius:10px;-webkit-animation-name:slideIn;-webkit-animation-duration:.4s;animation-name:slideIn;animation-duration:.4s
}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px;border-bottom:1px solid var(--secondary_muted)
}
.modal-body{display:flex;aspect-ratio:1/cos(30deg);clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
}
.modal-bio{text-align:center;margin:.8rem
}
.modal-bio ul{padding:0;margin:0;list-style:none;text-align:left
}
.modal-bio img{width:100px;border-radius:50px;border:1px solid var(--secondary_muted)
}
.modal-bio img:hover{filter:drop-shadow(0 0 20px var(--secondary_muted))
}
.modal-list{border-left:1px solid var(--secondary_muted);flex:1
}
.modal-list>a+a{border-top:1px solid var(--secondary_muted)
}
.modal-list a:hover{color:var(--primary);background-color:var(--secondary_muted)
}
.modal-menu a:active{background-color:var(--secondary_muted);color:var(--primary)
}
.modal-menu{display:flex;justify-content:space-between;line-height:1;padding:10px 20px;font-weight:700;text-decoration:none
}
.modal-footer{display:flex;justify-content:flex-end;padding:1rem;border-top:1px solid var(--secondary_muted)
}
.close{color:var(--secondary);float:right;font-size:3rem;font-weight:700
}
.close:hover,.close:focus{color:var(--secondary_muted);text-decoration:none;cursor:url("../images/cursor.ico"), default;
}
@-webkit-keyframes slideIn{from{bottom:-300px;opacity:0}to{bottom:0;opacity:1}
}
@keyframes slideIn{from{bottom:-300px;opacity:0}to{bottom:0;opacity:1}
}
@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}
}
.grid{position:relative;width:80%;margin:1rem auto 5rem
}
.grid .item{position:absolute;margin:1rem;z-index:1
}
.grid .item.muuri-item-hidden{z-index:0
}
.grid .item.muuri-item-releasing{z-index:2
}
.grid .item.muuri-item-dragging{z-index:3
}
.grid .item.small{width:clamp(15rem,15vw,17rem)
}
.grid .item.medium{width:clamp(16rem,16vw,20rem)
}
.grid .item.hex{height:clamp(16rem,16vw,20rem);
}
.grid .item.smallarge{width:clamp(22rem,22vw,29rem)
}
.grid .item.large{width:clamp(42rem,42vw,44rem)
}
.grid .item.xlarge{width:clamp(62rem,62vw,64rem)
}
#more {display: none;
}
@font-face{font-family:franxurter;src:url(../fonts/FranxurterTotallyFat.ttf);font-display:fallback
}
@font-face{font-family:national park;src:url(../fonts/NationalPark-Medium.otf);font-display:fallback
}
@font-face{font-family:national park;src:url(../fonts/NationalPark-Bold.otf);font-weight:700;font-display:fallback}@font-face{font-family:distro;src:url(../fonts/distro.heavy.ttf);font-display:fallback
}
@font-face{font-family:nunito;src:url(../fonts/NunitoRegular.ttf);font-display:fallback
}
@font-face{font-family:clayo;src:url(../fonts/CLAYO.ttf);font-display:fallback
}
@font-face{font-family:clayo;src:url(../fonts/CLAYO-Italic.ttf);font-style:italic
}
@font-face{font-family:clayo;src:url(../fonts/CLAYO-Semibold.ttf);font-weight:700
}
@font-face{font-family:kirom;src:url(../fonts/Kirom.ttf);font-display:fallback
}
@font-face{font-family:pixel gamer;src:url(../fonts/PixelGamer-Regular.otf);font-display:fallback
}
@font-face{font-family:tickerbit;src:url(../fonts/Tickerbit-regular.otf);font-display:fallback
}
@font-face{font-family:delius;src:url(../fonts/Delius-Regular.ttf);font-display:fallback
}
@font-face{font-family:LiquidCrystal-Light;src:url(../fonts/LiquidCrystal-Light.otf);font-display:regular
}
@font-face{font-family:odinsspear;src:url(../fonts/odinsspear.ttf);font-display:regular
}
:root,		:root.pink{--primary:#530081;--secondary:#d14cff;--secondary_muted:#ff0000;--tertiary:#0e0313;--body-font:"delius", "cour";--body-font-size:0.85rem;--header-font:"OctoberCrow.ttf", "Serif";--header-font-size:clamp(1.9rem, 1.8vw, 1.2vw);--homeLink:url("../images/icons/nav/pink/MoonStarPurp.svg");--aboutLink:url("../images/icons/nav/pink/about.svg");--galleryLink:url("../images/meteor-rain.gif");--shrinesLink:url("../images/icons/nav/pink/SingleStar.svg");--codeLink:url("../images/satellite.gif");--blogLink:url("../images/eclipses.gif");--linksLink:url("../images/icons/nav/pink/hurricane.svg");--microblogLink:url("../images/icons/nav/pink/Thunderstorm.svg");--libraryLink:url("../images/icons/nav/pink/Blackhole.svg");--nexusLink:url("../images/icons/nav/pink/nexus.png")
			}
			:root.blue{--primary:#c8f0ff;--secondary:#ff58a0;--secondary_muted:#ff58a0ac;--tertiary:#f8edfb;--body-font:"Nunito", "Arial";--body-font-size:0.85rem;--header-font:"Franxurter", "Arial Black";--header-font-size:clamp(2.1rem, 2.2vw, 1.8vw);--homeLink:url("../images/icons/nav/blue/home.png");--aboutLink:url("../images/icons/nav/blue/about.png");--galleryLink:url("../images/icons/nav/blue/gallery.png");--animationLink:url("../images/icons/nav/blue/animation.png");--codeLink:url("../images/icons/nav/blue/code.png");--blogLink:url("../images/icons/nav/blue/blog.png");--linksLink:url("../images/icons/nav/blue/links.png");--microblogLink:url("../images/icons/nav/blue/microblog.png");--libraryLink:url("../images/icons/nav/blue/library.png");--nexusLink:url("../images/icons/nav/blue/nexus.png")
			}
			:root.yellow{--primary:#ffebc8;--secondary:#fc6203;--secondary_muted:#fc62039c;--tertiary:#fcf6ef;--body-font:"Clayo", "Arial";--body-font-size:0.8rem;--header-font:"Kirom", "Arial";--header-font-size:clamp(1.6rem, 2vw, 1.5vw);--homeLink:url("../images/icons/nav/yellow/home.png");--aboutLink:url("../images/icons/nav/yellow/about.png");--galleryLink:url("../images/icons/nav/yellow/gallery.png");--animationLink:url("../images/icons/nav/yellow/animation.png");--codeLink:url("../images/icons/nav/yellow/code.png");--blogLink:url("../images/icons/nav/yellow/blog.png");--linksLink:url("../images/icons/nav/yellow/links.png");--microblogLink:url("../images/icons/nav/yellow/microblog.png");--libraryLink:url("../images/icons/nav/yellow/library.png");--nexusLink:url("../images/icons/nav/yellow/nexus.png")
			}
			:root.black{--primary:#171717;--secondary:#903db9;--secondary_muted:#8a45acbb;--tertiary:#ffffffea;--body-font:"Tickerbit", "Arial";--body-font-size:0.78rem;--header-font:"Pixel Gamer", "Courier";--header-font-size:clamp(1.9rem, 2vw, 1.5vw);--homeLink:url("../images/icons/nav/black/home.png");--aboutLink:url("../images/icons/nav/black/about.png");--galleryLink:url("../images/icons/nav/black/gallery.png");--animationLink:url("../images/icons/nav/black/animation.png");--codeLink:url("../images/icons/nav/black/code.png");--blogLink:url("../images/icons/nav/black/blog.png");--linksLink:url("../images/icons/nav/black/links.png");--microblogLink:url("../images/icons/nav/black/microblog.png");--libraryLink:url("../images/icons/nav/black/library.png");--nexusLink:url("../images/icons/nav/black/nexus.png")
			}
			:root.green{--primary:#cef8d2;--secondary:#dd3a78;--secondary_muted:#f14c8ba5;--tertiary:#fef2f9;--body-font:"Delius", "Arial";--body-font-size:0.85rem;--header-font:"Relmond", "Arial Black";--header-font-size:clamp(1.7rem, 3.6766rem + -6.325vw, 0.11875rem);--homeLink:url("../images/icons/nav/green/home.png");--aboutLink:url("../images/icons/nav/green/about.png");--galleryLink:url("../images/icons/nav/green/gallery.png");--animationLink:url("../images/icons/nav/green/animation.png");--codeLink:url("../images/icons/nav/green/code.png");--blogLink:url("../images/icons/nav/green/blog.png");--linksLink:url("../images/icons/nav/green/links.png");--microblogLink:url("../images/icons/nav/green/microblog.png");--libraryLink:url("../images/icons/nav/green/library.png");--nexusLink:url("../images/icons/nav/green/nexus.png")
			}
.search{position:relative;margin:0 auto;display:flex;box-shadow:6px 6px var(--secondary_muted);z-index:1
}
.search .searchTerm{width:100%;line-height:140%;border:2px solid var(--secondary);border-right:none;padding:5px;height:40px;outline:none;color:var(--secondary)
}
.search .searchTerm:focus{color:var(--secondary)
}
.search .searchButton{border:2px solid var(--secondary);color:var(--secondary);text-align:center;justify-content:center;cursor:pointer;font-size:20px;margin:0;height:40px;width:40px
}
.search .searchButton:hover{color:var(--primary)
}
.searchResults{list-style:none;padding:0;margin:0;background-color:var(--secondary);box-shadow:6px 6px var(--secondary_muted)
}
.searchResults li{text-align:left;padding:.5em;color:var(--tertiary)
}
.searchResults li a{color:var(--tertiary)
}
.searchResults li a:hover{color:var(--primary)
}
.searchResults li a:visited{color:var(--tertiary)
}
.hcards{aspect-ratio:1/cos(30deg);clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);border:10px solid var(--secondary);color:var(--secondary);background-image:url("../images/reneg.png");box-shadow:6px 6px var(--secondary_muted);word-wrap:break-word;overflow:hidden
}
.cards{border:2px solid var(--secondary);color:var(--secondary);background-image:url("../images/reneg.png");box-shadow:6px 6px var(--secondary_muted);word-wrap:break-word;overflow:hidden
}
.Solcards{border:2px solid var(--secondary);color:var(--secondary);background-color:black;box-shadow:6px 6px var(--secondary_muted);word-wrap:break-word;overflow:hidden
}
.cardsTitle{font-weight:700;font-style:italic;word-wrap:break-word;color:var(--secondary);
}
.cardsHeader{cursor:grab;height:2.5rem;background-color:var(--secondary);color:var(--tertiary);
}
.hcardsHeader{height:2px; cursor:grab;background-color: var(--secondary));color: var(--tertiary);
}
.cardsControls{font-size:1em;padding:3px;color:var(--tertiary);display:flex;justify-content:space-between
}
.hcardsControls{font-size:1em;padding:3px;color:var(--tertiary);display:flex;justify-content:space-between;
}
.cardsControls>div{padding:1px
}
.hcardsControls>div{padding:1.25em;
}
.cardsBody{padding:1.25em
}
.hcardsBody{padding: 4em;
}
.comment{text-align:left;padding:.5em;color:var(--tertiary)
}
.reply{text-align:left;padding:.5em;color:var(--tertiary)
}
.thumbnail{max-width:100%
}
.sort-btn{text-align:center;padding:0 5px;margin-left:0
}
.sort-btn li{font-size:.8rem;display:inline-block;padding:5px;margin:5px;border:2px solid var(--secondary);cursor:pointer;transition:all .3s ease-in-out
}
.sort-btn li:hover,.sort-btn li.active{color:var(--primary);background-color:var(--secondary);border-color:var(--primary)
}
@media screen and (max-width:768px){.item.small,.item.medium,.item.smallarge,.item.large
{
width:80vw!important;margin:1.2rem auto
}
nav{padding:1.5rem 0}nav#nav{float:none;width:80%;margin:0 auto}.navLink{width:25vw}nav#navAlt{float:none;position:relative;width:60vw;margin:0 auto;justify-content:center}.wrapper{display:block}.theme-button{height:3.3rem!important;width:3.3rem!important}.modal-content{width:90vw}.banner img{justify-content:center}
}
#microblog_recent{display:flex;flex-wrap:wrap;border:var(--secondary)1px solid;padding:5px}#microblog_recent .profilePic{float:left;width:40px;height:40px;border-radius:50%;margin:1px 10px
}
#microblog_recent .profilePic:hover{filter:drop-shadow(0 0 20px var(--secondary))}#microblog_recent .postContent{display:block;margin-bottom:0}#microblog_recent .postContent .postText{padding:.5em}#microblog_recent .postContent .postImage{display:flex;align-content:center;max-width:100%;padding:.5em
}
.comment {color: light-dark(red, pink);font-style: italic;
}
.youtube-player{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;background:#000;margin:5px
}
.youtube-player iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;background:0 0
}
.youtube-player img{object-fit:cover;display:block;left:0;bottom:0;margin:auto;max-width:100%;width:100%;position:absolute;right:0;top:0;border:none;height:auto;cursor:pointer;transition:.4s all
}
.youtube-player img:hover{filter:brightness(75%)
}
.youtube-player .play{height:48px;width:68px;left:50%;top:50%;margin-left:-34px;margin-top:-24px;position:absolute;background:url(https://i.ibb.co/j3jcJKv/yt.png)no-repeat;cursor:pointer
}
iframe.pet{width:100%;height:24em;color:var(--secondary)
}
iframe.yt{height:100%;width:100%
}
::-webkit-scrollbar{width:8px;height:8px;position:fixed;right:12px;z-index:1
}
::-webkit-scrollbar-track{box-shadow:0;border-radius:0;background-color:var(--tertiary)
}
::-webkit-scrollbar-thumb{background:var(--secondary);border-radius:0
}
.post ::-webkit-scrollbar-track{border-left:0 solid var(--secondary)
}
body.lb-disable-scrolling{overflow:hidden
}
.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(opacity=80);opacity:.8;display:none
}
.lightbox{position:absolute;left:0;width:100%;z-index:10000;text-align:center;line-height:0;font-weight:400;outline:none
}
.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px
}
.lightbox a img{border:none
}
.lb-outerContainer{position:relative;*zoom:1;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff
}
.lb-outerContainer:after{content:"";display:table;clear:both
}
.lb-loader{position:absolute;top:43%;left:0;height:25%;width:100%;text-align:center;line-height:0
}
.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif)no-repeat
}
.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10
}
.lb-nav>a{outline:none;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)
}
.lb-nav.lb-container>.nav{left:0
}
.lb-nav>a.lb-prev,.lb-nav>a.lb-next{height:100%;cursor:pointer;display:block
}
.lb-nav>a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png)0 48% no-repeat;filter:alpha(opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s
}
.lb-nav>a.lb-prev:hover{filter:alpha(opacity=100);opacity:1
}
.lb-nav>a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png)100% 48% no-repeat;filter:alpha(opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav>a.lb-next:hover{filter:alpha(opacity=100);opacity:1
}
.lb-dataContainer{margin:0 auto;padding-top:5px;*zoom:1;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px
}
.lb-dataContainer:after{content:"";display:table;clear:both
}
.lb-dataContainer .lb-data{padding:0 4px;color:#ccc
}
.lb-dataContainer .lb-data>.lb-details{width:85%;float:left;text-align:left;line-height:1.1em
}
.lb-dataContainer .lb-data>.lb-details>.lb-caption{font-size:13px;font-weight:700;line-height:1em
}
.lb-dataContainer .lb-data>.lb-details>.lb-caption>a{color:#4ae
}
.lb-dataContainer .lb-data>.lb-details>.lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999
}
.lb-dataContainer .lb-data>.lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png)100% 0 no-repeat;text-align:right;outline:none;filter:alpha(opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s
}
.lb-dataContainer .lb-data>.lb-close:hover{cursor:pointer;filter:alpha(opacity=100);opacity:1
}
@font-face{font-family:material icons;font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)format("woff2")
}
.material-icons{font-family:material icons;font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-moz-osx-font-smoothing:grayscale;color:var(--secondary)
}
#aWrap{display:flex;flex-wrap:nowrap;align-items:center;box-sizing:border-box;width:100%;padding:10px;background:var(--tertiary);border:2px solid var(--secondary)
}
#aWrap input[type=range]{box-sizing:border-box;width:60%;appearance:none;border:none;outline:none;box-shadow:none;text-align:center;padding:0;margin:0;background:0
}
#aWrap input[type=range]::-webkit-slider-thumb{appearance:none
}
#aWrap input[type=range]::-webkit-slider-runnable-track{background:var(--secondary)}#aWrap input[type=range]::-moz-range-track{background:var(--secondary)
}
#aWrap input[type=range]::-webkit-slider-thumb{width:16px;height:16px;margin:1px;border-radius:50%;border:1px solid var(--secondary);background:var(--tertiary)
}
#aWrap input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:2px solid var(--secondary);background:var(--tertiary)
}
#aPlay{padding:0;margin-top:5px;border:0;cursor:pointer
}
#aPlay:hover{background:0 0
}
#aCron{color:var(--secondary);margin:0 10px
}
#aList{position:relative;width:100%;height:22rem;overflow:scroll;margin-top:10px;padding:10px;color:var(--secondary);background-color:var(--tertiary);border:2px solid var(--secondary)
}
.aRow{word-wrap:break-word;display:inline-block;cursor:pointer;padding:10px
}
.aRow.now{color:var(--secondary);background-color:var(--primary);width:100%}.theme-button{height:clamp(2.85rem,2vw,1vw);width:clamp(2.85rem,2vw,1vw);border-radius:50%;border:none
}
.theme-button:hover{color:var(--secondary)
}
.theme-button:active,.theme-button:focus{border:1px solid var(--secondary)
}
.btn-border{border:1px solid var(--secondary)!important
}
#pink{background-color:#ff0000
}
#blue{background-color:#d7e6ff
}
#yellow{background-color:#ffe0b8
}
#black{background-color:#dfc9ff
}
#green{background-color:#cbf5d3
}
@keyframes marquee{0%{transform:translate(0,0)}100%{transform:translate(-100%,0)}
}
#musicplayer{display:grid;grid-template-columns:20px auto;align-items:center;width:100%;font-size:.8rem;line-height:140%;background:var(--tertiary);border:2px solid var(--secondary);box-shadow:6px 6px var(--secondary_muted)}#musicplayer:hover .overlay{opacity:1;transition:.3s ease}#musicpixel{width:34px;padding:8px;position:relative;min-height:20px;background:var(--tertiary);border-right:2px solid var(--secondary)}.overlay{opacity:0;position:absolute;top:0;left:0;text-align:center;width:100%;height:100%;transition:.3s ease;background:var(--primary)}.playpause{position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);color:var(--secondary)}.playpause:hover{cursor:pointer}#musictitle{overflow:hidden;white-space:nowrap;display:inline-block;width:calc(100% - 10px - 1px);margin-left:calc(10px + 3px)}.marquee{display:inline-block;padding-left:100%;animation:marquee 8s linear infinite;font-size:.8rem
}
#videoplayer{display:grid;grid-template-columns:20px auto;align-items:center;width:100%;font-size:.8rem;line-height:140%;background:var(--tertiary);border:2px solid var(--secondary);box-shadow:6px 6px var(--secondary_muted)
}
#videoplayer:hover .overlay{opacity:1;transition:.3s ease
}
.overlay{opacity:0;position:absolute;top:0;left:0;text-align:center;width:100%;height:100%;transition:.3s ease;background:var(--primary)
}
.playpause{position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);color:var(--secondary)
}
.playpause:hover{cursor:pointer
}
#musictitle{overflow:hidden;white-space:nowrap;display:inline-block;width:calc(100% - 10px - 1px);margin-left:calc(10px + 3px)
}
#videotitle{overflow:hidden;white-space:nowrap;display:inline-block;width:calc(100% - 10px - 1px);margin-left:calc(10px + 3px)
}
.marquee{display:inline-block;padding-left:100%;animation:marquee 8s linear infinite;font-size:.8rem
}
#HCB_comment_box,.btn,input#hcb_submit,.hcb-comment-tb button,#HCB_comment_box input,#HCB_comment_box input.btn,#HCB_comment_box select,#HCB_comment_box textarea,span.date{font-family:var(--body-font)!important
}
.home-desc,.hcb-icon{display:none!important
}
.hcb-comment-tb button{color:var(--secondary)!important
}
#hcb_submit,input#hcb_submit{color:var(--tertiary)!important;background-color:var(--secondary)!important;border:none!important
}
#HCB_comment_box .comment a img{margin:0 0 8px;border-left:1px solid!important;padding-left:5px!important
}
.preview{display:flex;flex-wrap:nowrap;max-width:100%;gap:.4em
}
.preview>img{margin:5px
}
.preview p{margin:5px 0
}
pre code{font-size:smaller;background-color:transparent
}
code{font-size:smaller;color:var(--secondary);background-color:var(--primary);padding:0 3px
}
textarea{resize:vertical;width:100%;min-height:8vh;border:1px solid var(--secondary);border-radius:5px;font-size:.8em
}
textarea::-webkit-scrollbar{display:none
}
.gist{max-width:100%
}
.gist .blob-wrapper.data{max-height:15em;overflow:auto
}
.gist ::-webkit-scrollbar{width:4px;height:4px
}
.stats-box{display:flex;flex-wrap:wrap
}
.stats{border:1px solid var(--secondary);background-color:var(--tertiary);box-shadow:.1em .1em .2em var(--secondary);margin:0 10px 10px 0;padding:8px;height:2.5em
}
.box{display:flex;flex-direction:column;border:1px solid var(--secondary);box-shadow:.1em .1em .2em var(--secondary);background-color:var(--tertiary);min-width:100px;z-index:100;padding:0 10px;word-wrap:break-word
}
.box-small{border:1px solid var(--secondary);box-shadow:.1em .1em .2em var(--secondary);background-color:var(--tertiary);padding:10px;margin:10px;word-wrap:break-word
}
.scrollbox{max-height:15em;overflow-y:scroll;overflow-x:hidden
}
.large-scrollbox{max-height:35em;overflow-y:scroll;overflow-x:hidden
}
.banner{display:flex;justify-content:center;overflow-x:hidden
}
.banner a{text-decoration:none;justify-content:center
}
.banner p{margin:0
}
.banner img{padding:1px;max-width:100%;max-height:100%
}
#RPGMaker table,#neossg table,#ncring table{color:var(--secondary);background:0 0;border:none
}
#RPGMaker table td,#neossg table td,#ncring table td{padding:0;border:none
}
#safont{width:160px;height:65px
}
#neossg{margin:0 auto;padding:5px;background-image:linear-gradient(-225deg,#522aff 0%,#d916eb 50%,#522aff 100%);background-size:auto;background-clip:border-box;background-size:200%;color:#44107a;background-clip:text;-webkit-text-fill-color:transparent;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:textclip 2s linear infinite;display:inline-block;text-shadow:none;text-decoration:none;vertical-align:baseline
}
#neossg a{text-decoration:none
}
@keyframes textclip{to{background-position:200%}
}
#neossg .webring-prev{text-align:right
}
#neossg .webring-info{text-align:center
}
#neossg .webring-next{text-align:left
}
table{margin:0 auto
}
table tr td{padding:5px
}
.webring-prev{text-align:right
}
.webring-info{text-align:center
}
.webring-next{text-align:left
}
.webring-links{font-size:small
}
a{text-decoration:none
}
*{box-sizing:border-box;padding:0;margin:0
}
html{scrollbar-color:var(--secondary_muted)var(--primary)
}
body{background-image: url("../images/starfieldbg.gif");font-family:var(--body-font);font-size:var(--body-font-size);line-height:1.5;transition:background-color .2s ease
}
body a,body a:visited{color:var(--secondary);text-decoration:underline
}
body a:hover{color:var(--secondary_muted);text-decoration:none
}
body ::selection{color:var(--primary);background:var(--secondary_muted)
}
h1,h2,h3,h4,h5,h6{font-family:var(--header-font);line-height:1.1;font-weight:400
}
h1{font-size:var(--header-font-size)
}
h2{font-size:calc(var(--header-font-size)/1.1)
}
h3{font-size:calc(var(--header-font-size)/1.2)
}
h4{font-size:calc(var(--header-font-size)/1.3)
}
h5{font-size:calc(var(--header-font-size)/1.4)
}
h6{font-size:calc(var(--header-font-size)/1.5)
}
p{margin:10px 0
}
ul,ol{margin:5px 0 5px 30px
}
hr{border:1px solid var(--secondary);margin:1em 0
}
mark{color:var(--secondary);background-color:var(--primary)
}
::selection{color:var(--primary);background:var(--secondary_muted)
}
blockquote{margin:10px 0 10px 10px;padding:0 0 0 10px;border-left:solid 1px var(--secondary)
}
pre{overflow:scroll
}
#btn-back-to-top{font-size:1.5rem
}
.arrows{text-align:center;font-size:1.1rem;padding:5px;background-color:var(--tertiary);border:2px solid var(--secondary);box-shadow:6px 6px var(--secondary_muted)
}
.columns{display:grid;margin:auto;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;align-items:center;justify-items:center
}
.small{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))
}
.row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start
}
.space-between{justify-content:space-between
}
.centered{justify-content:center
}
.img-fluid{height:auto;max-width:100%
}
.blocks{display:flex;flex-direction:column;flex-basis:100%;flex:1
}
button{transition:all .3s ease-in-out;color:var(--secondary);background-color:var(--tertiary);border:2px solid var(--secondary);cursor:pointer;padding:0;margin:5px
}
button:hover,button.active{color:var(--primary);background-color:var(--secondary);border-color:var(--primary)
}
img.emoji{height:1.3rem;width:1.3rem
}
#preloader{align-items:center;width:100%;display:flex;position:fixed;height:100vh;justify-content:center;left:0;top:0;transition:opacity 500ms;z-index:9999;background:black no-repeat 50%;
}
.svg-frame {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.svg-frame svg {
  position: absolute;
  transition: .5s;
  z-index: calc(1 - (0.2 * var(--j)));
  transform-origin: center;
  width: 344px;
  height: 344px;
  fill: none;
}

.svg-frame:hover svg {
  transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i)));
}

.svg-frame svg #center {
  transition: .5s;
  transform-origin: center;
}

.svg-frame:hover svg #center {
  transform: rotate(-30deg) translateX(45px) translateY(-3px);
}

#out2 {
  animation: rotate16 7s ease-in-out infinite alternate;
  transform-origin: center;
}

#out3 {
  animation: rotate16 3s ease-in-out infinite alternate;
  transform-origin: center;
  stroke: #ff0;
}

#inner3,
#inner1 {
  animation: rotate16 4s ease-in-out infinite alternate;
  transform-origin: center;
}

#center1 {
  fill: #ff0;
  animation: rotate16 2s ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes rotate16 {
  to {
    transform: rotate(360deg);
  }
}
.parallax {
  /* The image used */
  background-image: url("Space.gif");

  /* Set a specific height */
  min-height: 100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
table{color:var(--primary);background:var(--secondary_muted);border:1px solid var(--primary);font-size:12pt;border-collapse:collapse
}
table thead th,table tfoot th{color:var(--primary);background:rgba(0,0,0,.178)
}
table caption{padding:.5em
}
table th,table td{padding:.5em;border:1px solid var(--primary)}
/** This stuff is necessary !! **/
.explode > p {
  position: absolute;
  cursor: inherit;
}

.explode {
  transform: translate(-10px,-20px);
  position: absolute;
  pointer-events: none;
}
.overfay {
  display: flex;
  flex-direction: row;
}

.radio-wrapper {
  position: relative;
  height: 38px;
  width: 84px;
  margin: 3px;
}

.radio-wrapper .input {
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
}

.btn {
  --primary: #ff184c;
  --shadow-primary: #fded00;
  --color: white;
  --font-size: 9px;
  --shadow-primary-hue: 180;
  --shadow-secondary-hue: 60;
  --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
  --clip: polygon(11% 0, 95% 0, 100% 25%, 90% 90%, 95% 90%, 85% 90%, 85% 100%, 7% 100%, 0 80%);
  --border: 5px;
  --shimmy-distance: 5;
  --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
  --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
  --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
  color: var(--color);
  text-transform: uppercase;
  font-size: var(--font-size);
  letter-spacing: 3px;
  position: relative;
  font-weight: 900;
  width: 100%;
  height: 100%;
  line-height: 38px;
  text-align: center;
  transition: background 0.2s, 0.3s;
}

.input:checked + .btn {
  --primary: #8B00FF;
  --shadow-primary: #00e572;
}

.input:hover + .btn {
  --primary: #cc133c;
  --font-size: 11px;
}

.btn:after, .btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: var(--clip);
  z-index: -1;
}

.btn:before {
  background: var(--shadow-primary);
  transform: translate(var(--border), 0);
}

.btn:after {
  background: var(--primary);
}

.btn__tag {
  position: absolute;
  padding: 1px 4px;
  letter-spacing: 1px;
  line-height: 1;
  bottom: -5%;
  right: 5%;
  font-weight: normal;
  color: hsl(0, 0%, 0%);
  font-size: var(--label-size);
}

.btn__glitch {
  position: absolute;
  top: calc(var(--border) * -1);
  left: calc(var(--border) * -1);
  right: calc(var(--border) * -1);
  bottom: calc(var(--border) * -1);
  background: var(--shadow-primary);
  text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
  clip-path: var(--clip);
  animation: glitch 2s infinite;
  display: none;
}

.input:hover + .btn .btn__glitch {
  display: block;
}

.input:checked + .btn .btn__glitch {
  display: block;
  animation: glitch 5s infinite;
}

.btn__glitch:before {
  content: '';
  position: absolute;
  top: calc(var(--border) * 1);
  right: calc(var(--border) * 1);
  bottom: calc(var(--border) * 1);
  left: calc(var(--border) * 1);
  clip-path: var(--clip);
  background: var(--primary);
  z-index: -1;
}

@keyframes glitch {
  0% {
    clip-path: var(--clip-one);
  }

  2%, 8% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }

  6% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  9% {
    clip-path: var(--clip-two);
    transform: translate(0, 0);
  }

  10% {
    clip-path: var(--clip-three);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  13% {
    clip-path: var(--clip-three);
    transform: translate(0, 0);
  }

  14%, 21% {
    clip-path: var(--clip-four);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  25% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  30% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }

  35%, 45% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * -1%));
  }

  40% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * 1%));
  }

  50% {
    clip-path: var(--clip-six);
    transform: translate(0, 0);
  }

  55% {
    clip-path: var(--clip-seven);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }

  60% {
    clip-path: var(--clip-seven);
    transform: translate(0, 0);
  }

  31%, 61%, 100% {
    clip-path: var(--clip-four);
  }
}

.number {
  background: var(--shadow-primary);
  color: #323232;
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: 1px;
  position: absolute;
  width: 15px;
  height: 6px;
  top: 0;
  left: 81%;
  line-height: 6.2px;
}
/* ---- tsparticles container ---- */

#container {
    position: relative;
    min-height: 600px;
}

canvas {
    display: block;
    min-height: 600px;
    /* @media (max-width: 992px) {
        min-height: 800px;
    }
    @media (max-width: 992px) {
        min-height: 800px;
    } */
}

#tsparticles {
    height: 100%;
    background-color: none;
}

#africa-wrapper {
    position: relative;
    height: 100%;
    min-height: 600px;
}

#max {
    min-height: 600px;
}