Something went wrong. Try again.
silliest site on the web*
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364@font-face { font-family: SetoFont; src: url('/fonts/setofont.woff'); }
body { background-color: var(--bg); color: var(--fg); text-align:center; font-family: SetoFont; overflow-x: hidden;
}
.topbox { background-color: var(--bg0); width: 40%; min-height: 10vh; margin: auto; border-radius: 1em; display: flex; align-items: center; justify-content: center; padding:10px;}
.lefticon { height: 200px;}
.headtext { font-size: 70px; margin-left: 20px;}
.box { background-color: var(--bg2); width: 40%; margin: auto; border-radius: 1em; font-size:20px; margin-top:20px; padding:20px; text-align:left;}
.box b { font-size:30px;}
a { text-decoration:none;}
a:link, a:visited{ color: var(--aqua); transition: color 0.2s;}
a:hover { color: var(--bright-aqua);}
.trans { background: linear-gradient( 90deg, hsl(196deg 94% 67%) 0%, hsl(210deg 54% 77%) 8%, hsl(307deg 21% 77%) 17%, hsl(349deg 79% 82%) 25%, hsl(350deg 84% 88%) 33%, hsl(351deg 89% 94%) 42%, hsl(0deg 0% 100%) 50%, hsl(351deg 89% 94%) 58%, hsl(350deg 84% 88%) 67%, hsl(349deg 79% 82%) 75%, hsl(307deg 21% 77%) 83%, hsl(210deg 54% 77%) 92%, hsl(196deg 94% 67%) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
::selection { color: var(--bg); background: var(--fg); -webkit-text-fill-color: var(--bg);}
i { color:var(--blue); font-size:10px;}
.no:link, .no:visited, .no:hover{ color: var(--fg);}
.links { text-align:center; width:80%; margin:auto;}
.links .link { display:inline-block; width:50px; height:50px; font-size:30px; text-align:center; margin:5px;}
.link a { color:var(--purple); transition: color 0.3s;}
.link a:hover { color:var(--bright-purple);}
.invisible { color:transparent;}
.invisible:link, .invisible:visited, .invisible:hover{ color:transparent;}
.splash { color:var(--yellow); right:33%; top:55px; font-size:20px; position: absolute; /* Takes the element out of the normal flow */ animation: pulserotate 2s infinite;}
.banners { text-align:center; -ms-interpolation-mode: nearest-neighbor; image-rendering: crisp-edges; image-rendering: pixelated;}
.banners img { margin:5px;}
@keyframes pulserotate { 0% { transform: scale(1) rotate(10deg);
} 50% { transform: scale(1.1) rotate(11deg); } 100% { transform: scale(1) rotate(10deg); }}
@keyframes pulse { 0% { transform: scale(1) ;
} 50% { transform: scale(1.1); } 100% { transform: scale(1); }}
.footer { background-color:var(--bg1); width:100vw; display:block; margin-top:30px; height:100px; left: 0px; position: absolute; padding:10px;}
.footer div { width:50vw; margin:auto; text-align:left;}
@media screen and (max-width: 1280px){
.topbox { width:90% }
.headtext { font-size:40px; }
.box { width:90% }
.splash { right:0; top:0; position: relative; /* Takes the element out of the normal flow */ animation: none; animation: pulse 2s infinite;
}
.mobilebox { background-color: var(--bg2); width: 90%; margin: auto; border-radius: 1em; font-size:20px; margin-top:20px; padding:20px; text-align:center; }
.links { width:99%; }
.weather > div:nth-child(1) { padding-top:15px; font-size:10px; } .weather > div:nth-child(2) { padding-top:1px; font-size:15px; } .weather > div:nth-child(4) { font-size:17px; }
.footer div { width:100vw; text-align:center; font-size:15px; }
}
.supersecret { position: fixed; top:50%; left: 50%; transform: translate(-50%, 0) rotate(45deg); pointer-events:none; font-size:50px; color:transparent;
}
/* beware the man who speaks in hands. */
.lastfm { background-color:var(--bg4); display:inline-block; padding:15px; border-radius:0.5em; overflow:hidden;}
.lastfm b { color:var(--fg2); font-size:17px;}
.lastfm .listening b{ color:var(--fg);}
.lastfm .listening{ animation: pulse 2.5s infinite;}
.lastfm .albumcover { width:300px; height:300px; margin:auto; overflow:hidden; filter: drop-shadow(5px 5px 5px #000); align-content: center;}
.lastfm .albumcover img{ border-radius:0.3em; max-height:300px; max-width:300px; width: auto; transition: filter 0.2s;
}
.lastfm .albumcover img:hover {filter:brightness(80%);}
.weather { display:inline-block; float:left;}
.weather > div:nth-child(1) { margin-top:-30px;}
.weather > div:nth-child(2) { margin-top:-25px;}
.weather > div:nth-child(3) { margin-top:-20px; margin-bottom:-25px;}
.weatherparent { height:130px; overflow:hidden;}
.weathericon { display:inline-block; float:right;
}
.weathericon img { width:125px; max-height:100%;}
.pastsong { font-weight:bold; text-overflow:ellipsis; white-space:nowrap; max-width:30%; display: inline-block; overflow:hidden;}
.pastartist { font-style: italic; text-overflow:ellipsis; white-space:nowrap; max-width:35%; display: inline-block; overflow:hidden;}