/* internal theme name: borealis */

:root {
    --primary: #01031c24;
    --secondary: #0a053440;
    --highlight: #12e5ff;
    --background: linear-gradient(180deg, #362e53 0%, #030124 49%, #120a1f 100%);
    --bgSize: 100% 300%;
    --bgAnim: scrollGradient 10s infinite;
    --container: #0100113b;
    --border: 3px solid #1c1a3d4d;
    --hoverborder: 3px solid #0d96d070;
    --acolor: #737d8b;
    --ahover: #448edd;
    --bcolor: #0c2169;
    --pcolor: #073d58;
    --header: linear-gradient(176deg, rgb(6 1 35 / 54%), rgb(12 27 62 / 54%) 80%, rgb(10 10 62 / 65%) 100%);
    --hsub: #1f2f601c;
    --textshadowprimary: 0.5px 1.5px 1px #151841db;
    --textshadowsecondary: 1px 1px 1px #08608e;
    --country: 'The bottomless sky';
    --themename: 'Borealis';
    --filter: sepia(0.95) brightness(0.3) saturate(3) hue-rotate(192deg);

/* experimental */
  --font: "Courier New";
}

/* =========== styling changes =========== */

.box, .box.boxInfo, .blog.profile article, .tableRight {
  background: var(--primary) !important;
}

.topLeft, .rightHead, .boxHead, .blogs div:nth-child(1):not(.blogBody *), .tableLeft {
  background: var(--secondary) !important;
}

.blogTitle {margin-bottom: 15px;}
#name, #userWall .tableLeft a[href="/?id=477"] b, .fwiendCount, .player, h3 {
  color: var(--highlight);
  text-shadow: var(--textshadowsecondary);
  font-weight: bold;
} 

body {
  background: var(--background);
  background-attachment: fixed;
  background-size: var(--bgSize);

  animation: var(--bgAnim);
}

@keyframes scrollGradient {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

#container, #footer {
  background: var(--container);
  padding: 10px;
  background-attachment: fixed;
}

#container {padding-bottom: 0px !important;}

button, input[type="submit"], .boxButton {
  background: var(--primary);
  border: var(--border);
  transition: border 0.4s, background 0.6s;
}

#commentInput, audio {opacity: 0.7}

.box:not(#footer), .topLeft, .blog.profile article, .blogCard {
  border-radius: 0px; /* 2px */
  margin-bottom: 20px !important;
  padding: 0 10px;
  border: var(--border);
  position: relative;
  transition: border 0.4s;
  animation: float 5s ease-in-out infinite; 
  animation-play-state: paused;
}

.box:not(#footer):hover, .topLeft:hover, .blogBody .blogs:hover, .blogCard {
  animation-play-state: running;
}

@keyframes float {
  0% {bottom: 9px;}
  50% {bottom: -9px;}
  100% {bottom: 9px;}
}

.box:not(#footer):hover, .topLeft:hover, .blogCard:hover, button:hover, input[type="submit"]:hover, .boxButton:hover { border: var(--hoverborder); }

a, a:not( a[href="/?id=477"] ) b, a:link, a:visited, button, .boxButton, input[type="submit"], .boxButton, #hSub a, #header a, a.logo b { color: var(--acolor); }

a:hover, a:hover:not( a[href="/?id=477"] ) b, a:hover b, .boxButton:hover, button:hover, #header a:hover, #header a:visited:hover, #hSub a:hover, #hSub a:visited:hover, #header .hUp a:hover, button:hover, input[type="submit"]:hover { color: var(--ahover) !important; }

b, .rightHead, h4, .short, .blogCard div, .blogs, h5, h6, .date { color: var(--bcolor); }

p, .shortRight div, ul, td, #footer, #hSub {
  color: var(--pcolor);
  text-shadow: var(--textshadowprimary);
}

p {margin: 4px !important;}

#header {
  background: var(--header);
  backdrop-filter: blur(20px);
}

#hSub {
  background: var(--hsub) !important;
  backdrop-filter: blur(15px);
}

b, a, .short div, button, input[type="submit"], .boxButton, .date { text-shadow: var(--textshadowsecondary); }

#country {font-size: 0px !important;}
#country:before {
  font-size: 15px; 
  content: 'current theme: ' var(--themename);
  position: fixed;
  left: 15px;
  bottom: 18px;
  z-index: 1000;
}
#country:after {font-size: 15px; content: var(--country); display: block; height: 60px; width: 100px;}

img:not(.short .avatar) {
  filter: var(--filter);
  transition: filter 0.8s;
}

.fwiendFace img:hover, .tableLeft img:hover {
  filter: none;
}

::-webkit-scrollbar, ::-webkit-scrollbar-track {
    width: 5px;
    height: 100%;
    background: var(--secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--header);
}

.song__title ~ a img {filter: invert(1) brightness(0.4) !important; transition: filter 0.4s;}
.song__title ~ a:hover img {filter: invert(1) brightness(2) !important;}

/* =========== structural page layout =========== */

body {
  margin: 0px;
  font-size: 15px;
  color: white;
}

.rightHead, .boxHead, .blogs div:nth-child(1):not(.blogBody *) {
  padding: 5px;
  margin: 0 -10px;
}

.blogPost {width: calc( 75% - 23px );}

#footer {
  position: relative;
  z-index: 1000;
  width: calc(100% - 20px);
  backdrop-filter: blur(10px);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.boxButton {
  width: calc( 50% - 38px );
  text-align: center;
}

.short {
  text-align: center;
  padding: 0;
  margin-top: 0;
  width: 100%
}

.player {width: calc(100% - 23px)}

#header {
  height: 26px;
  padding: 5px;
  padding-left: 10px;
  padding-top: 8px;
}

#hSub {
  position: fixed;
  top: 34px;
  width: calc(100% - 15px );
  text-align: center;
  font-size: small !important;
}

/* friend box code - disabled

#top {padding-left: 5px;}

#top > a {
  display: inline-block;
  width: calc(25% - 13px);
  padding: 3px;
  text-decoration: none;
  height: 152px;
  margin: 5px 0;
}

.fwiendFace {
  padding: 3px;
  border: var(--border);
  border-width: 2px;
  height: 100%;
  width: 100%;
  max-width: 100%;
}

.fwiendFace b {
  height: 18px;
  overflow: hidden;
}

*/

.tableLeft img {
  max-height: 128px;
  max-width: 128px;
  margin-left: auto;
  margin-right: auto;
}

#top > a > .fwiendFace {margin: 0}

a[href="#"] + div {max-height: 0; overflow:hidden; transition: max-height 0.8s}
a[href="#"]:focus + div {max-height: 400px;}

.url {display: none;}

.blogBody #footer { display: none; }

div#foolpoolSvmsg {display: none;}

/* =========== experimental =========== */

body, #hSub, #header {
  font-family: var(--font) !important;
}

.logo {display: none;}

#header {
    width: 40px;
    text-align: center;
    right: 15px;
    left: auto;
    border-radius: 0 0 15px 15px;
    border-left: inset var(--hsub);
    border-bottom: inset var(--hsub);
    height: 31px;
    overflow: hidden;
    transition: height 0.6s, color 0.6s;
}

#header:hover { height: 138px; color: var(--bcolor)}

#header:before {
    content: '☰';
    font-weight: bold;
    font-size: 30px;
    position: absolute;
    left: 14.4px;
    top: 2px;
}

#hUp a { font-size: 0 !important; }

#hUp a:after {
  transition: transform 0.4s;
  font-size: 30px;
  position: absolute;
}

#hUp a:hover:after {
  transform: scale(1.4);
}
#hUp a[href="/?settings"]:after {
  content: '☸';
  left: 15px;
  top: 71px;
  color: var(--acolor);
}

#hUp a[href="?msg=receive&type=list"]:after {
  content: '☎';
  top: 38px;
  left: 13px;
  color: var(--acolor);
}

#hUp a[href="?msg=receive&type=list"] + a:after {
    content: '⚑';
    left: 17px;
    top: 105px;
  color: var(--acolor);
}

#hUp a[href="?login"]:after {
    content: '⚿';
    left: 13px;
    top: 101px;
  color: var(--acolor);
}

#hUp a[href="?signup"]:after {
    content: '⚻';
    top: 41px;
    left: 15px;
    font-size: 40px;
  color: var(--acolor);
}

#hUp .blinkRed:after, 
#hUp .blinkYellow:after, 
#hUp .blinkGreen:after, 
#hUp .blinkViolet:after {
  content: '✪';
  font-size: 20px;
  position: static;
  float: left;
  margin-left: -24px;
  margin-top: -1px;
  margin-bottom: 7.8px;
  width: 43px;
}

body, #container {padding-top: 0 !important}

#hSub {
    position: sticky;
    top: 0;
    width: 648px;
    height: 18px;
    border-radius: 0 0 20px 20px;
    text-align: center;
    font-size: small !important;
    left: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 32px;
}

#hSub a {
/*  font-size: 0px; */
  transition: font-size 0.4s;
}
#hSub a:hover {
  font-size: 15px;
}

.extended:not(#a) {
  position: fixed;
  z-index: 10000;
  left: 100px;
  top: 0;
  animation: none;
 /* display: none; */
  margin: 0;
  font-size: 0;
  border-radius: 0 0 15px 15px !important;
  border: inset var(--primary) !important;
  border-width: 0 2px 2px 0 !important;
}

.extended h3 a:after {
  content: '✎';
  font-size: 35px;
}

.topLeft {
  position: fixed; 
  width: 300px; 
  padding: 1.5%;
  right: -180px;
  top: 137px;
  z-index: 5;
  transition: right 0.8s;
}

.topLeft:hover {right: 5px;}

.topRight {width: 100%; max-width: 700px; margin: auto; padding: 1.5%; float: none;}

.boxInfo.box:not(#a) {
  font-size: 0;
  border: none;
  border-radius: 15px;
  height: 57px;
}

.topLeft .boxButton {
  position: absolute;
  font-size: 0;
  background: none;
  background-image: none !important;
  border: 2px inset var(--primary);
  border-radius: 50%;
  height: 40px;
  width: 40px;
  padding: 0;
  transition: left 0.8s, transform 0.4s;
}

.topLeft .boxButton:after {
  position: relative;
  bottom: 1px;
  transition: left 0.8s, transform 0.4s, color 0.2s;
}

.topLeft .boxButton:hover {transform: scale(1.2); border: var(--hoverborder)}

#add {left: 8px;}
#add:after {content: '⛨'; font-size: 30px;}
.boxinfo a[href*="unfwiend"] #add:after {content: '♠';}

#add:hover { color: #5ed55e !important; }
.boxinfo a[href*="unfwiend"] #add:hover { color: #c61902 !important; }
.topLeft:hover #add {left: 39px;}

#sMsg {left: 44px}
#sMsg:after {content: '☏'; font-size: 30px;}
#sMsg:hover { color: #598cff !important; }
.topLeft:hover #sMsg {left: 101px;}

#block {left: 82px;}
#block:after {content: '⛛'; font-size: 30px; top: 1px;}
#block:hover { color: #ff9700 !important; }
.topLeft:hover #block {left: 172px;}

#report {left: 113px;}
#report:after {content: '⚠'; font-size: 30px; bottom: 4px;}
#report:hover { color: #d52c2c !important; }
.topLeft:hover #report {left: 230px;}

.box.fwiends:not(#a) {
  position: fixed;
  border: none;
  border-right: var(--border);
  left: 0;
  top: 0;
  width: 90px;
  animation: none;
  height: 100%;
  font-size: 0;
  padding: 0;
  transition: width 0.4s;
}

.box.fwiends:not(#a):hover {border-right: var(--hoverborder); width: 200px;}

.fwiends .rightHead {
  height: 60px;
}

#top > a {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 0;
  text-decoration: none;
  height: 70px;
  margin: 0;
  margin-bottom: 20px;
  border-radius: 50%;
  border: inset 2px var(--primary);
  overflow: hidden;
  left: 0px;
  transition: left 0.2s, border 0.6s;
}

#top > a:hover {left: 10px; border: var(--hoverborder);}
#commentInput ~ input[type="submit"]:hover {border: var(--hoverborder); transform: scale(1.15);}

.fwiendFace {
  padding: 0;
  border: none;
  height: 100%;
  width: 100%;
  max-width: 100%;
}

#top img {
  width: 70px;
  height: 70px;
}

#commentInput {
  border-radius: 20px;
  overflow: hidden;
  resize: vertical;
  padding: 10px;
  width: 150px;
  height: 30px;
  transition: width 0.8s, height 0.6s, margin-right 0.8s;
  margin-right: calc(50% - 179px / 2);
  text-align: center;
}

#commentInput:focus {
  width: calc(100% - 45px);
  height: 120px;
  margin-right: 12px;
}

.comments .boxHead ~ form {
  height: auto;
  position: relative;
  margin: -5px;
  padding-bottom: 6px;
}

#commentInput ~ input[type="submit"] {
  height: 48px;
  width: 48px;
  position: absolute;
  right: 15px;
  bottom: 12px;
  border-radius: 50%;
  border: inset 2px var(--primary);
  transition: transform 0.4s;
}

.songName b {display: none;}

.player:not(#a) {
  border: none;
  border-radius: 15px;
  animation: none;
  position: fixed;
  right: 5px;
  width: 214px;
  bottom: -13px;
  z-index: 50;
}

.player:not(#a):hover {
  border: none;
}

.short {height: 170px}

.short tr {position: relative;}

.short td:not(.shortRight) {
  position: absolute;
  right: -12px;
  top: 0px;
  border-radius: 50%;
  overflow: hidden;
  transform: scale(0.9);
  height: auto;
}

.shortRight {float: left;}

.tableLeft {width: 20%; text-align: center;}

.tableLeft > a > div {max-width: 127px; margin-left: auto; margin-right: auto;}

#userWall tbody {display: block;}

.tableRight {width: 60%;}

.tableLeft a[href="/?id=477"] b {font-size: 12px;}

.fwiends .rightHead::after {
    content: 'Friends';
    font-size: 15px;
    position: absolute;
    top: 50px;
    left: 11px;
}

.fwiendCount {
  font-size: 30px;
  position: absolute;
  top: 12px;
  left: 11px;
}

.fwiendFace b {
  left: -100px;
  transition: left 0.6s;
}

.fwiends:hover .fwiendFace b {
    position: fixed;
    z-index: 40;
    left: 86px;
    font-size: 12px;
}

#top {width: 70px;}

#name {margin-left: 60px;}

#viewFriends a {
  font-size: 16px;
  position: fixed;
  left: 8px;
  transition: transform 0.4s, left 0.3s;
}

#viewFriends a:hover {transform:scale(1.3); left:24px;}

#viewFriends a:before {content: 'View '}

blockquote {
  background: #00000033;
  padding: 10px;
  display: inline-table;
  border-radius: 20px;
}

blockquote + h4 {display:none;}

#avatar + div {
    text-align: center;
    position: fixed;
    right: calc(50% - 21px);
    top: 5px;
}

#avatar {margin-right: 0 !important; width: 182px}