body {
font-family: Bahnschrift Light;
background-size: 400% 400%;
color: white;
background: linear-gradient(-45deg, #500000, orange 170%);
}

body:before {
    display: block;
    content: url(https://i.imgur.com/xisvlki.gif);
    text-align: center;
    margin-top: 15px;
}

#header .logo span {
  position: static!important;
}
#header #hUp a, #header .logo, .boxButton:before {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' shape-rendering='geometricPrecision' width='226' height='102' viewBox='0 0 2660 1201'%3E%3Cdefs%3E%3Cpath id='bell' d='M276 245c0 7-6 12-12 12h-45c0 34-50 34-50 0h-44c-7 0-13-5-13-12 24-21 32-51 32-82 0-22 18-40 42-44-6-14 18-19 18-4l-1 4c23 4 42 22 42 44 0 31 7 61 31 82z'/%3E%3Cpath id='mail' d='M1412 170v78c0 9-7 16-15 16h-145c-9 0-16-7-16-16v-78c6 6 63 45 68 49 19 13 32 6 50-7 5-4 51-34 58-42zm0-29c0 11-8 20-16 27-12 8-59 42-67 44-11 4-21-6-30-12-14-10-49-32-58-44-11-14-4-31 11-31h145c8 0 15 7 15 16z'/%3E%3C/defs%3E%3Cuse xlink:href='%23bell' fill='%23E8E'/%3E%3Cuse xlink:href='%23bell' fill='%23FFC107' x='375'/%3E%3Cuse xlink:href='%23bell' fill='%238BC34A' x='750'/%3E%3Cuse xlink:href='%23mail' fill='%23FFF'/%3E%3Cpath fill='%23FFF' d='M1756 194c6 0 11 5 11 11v66c0 7-5 12-11 12h-110c-7 0-11-5-11-12v-66c0-9 8-11 14-11 0-30-4-53 15-73 33-33 88-9 88 36 0 11-22 11-22 0 0-38-59-38-59 0v37h85z'/%3E%3Cpath fill='%23FFF' d='M2104 178c-28 28-76 8-76-31 0-40 48-59 76-32 17 18 17 45 0 63zm79 27l43 1v28l-43 1-1 43h-28l-1-43-43-1v-28l43-1 1-43h28l1 43zm-85 26c0 20 26 15 44 15v27c-5 4-11 6-19 6h-101c-38 0-33-43-25-67 8-26 31-33 39-27 41 33 72-2 78-2 10 0 18 4 24 11-41 0-40-2-40 37z'/%3E%3Cpath fill='%23FFF' d='M2447 165c20-21-9-48-28-28-33 33-40 42-27 55s29 7 55-27zm95 60l-12 12-13-12-10 10c9 9 26 23 26 30 0 8-12 18-20 10l-70-71c-50 38-99-6-67-57 31-50 97-47 97 2 0 14-4 26-13 39l37 37 10-10-12-14 11-11 36 35z'/%3E%3Cuse xlink:href='%23mail' fill='%2303A9F4' x='-1127' y='375'/%3E%3Cpath fill='%238BC34A' d='M629 577c13 20 19 76-12 76-76 0-135 19-111-62 15-49 42-13 65-13 25 0 39-29 58-1zm-29-76c8 8 12 17 12 29 0 11-4 21-12 29s-18 12-29 12c-12 0-21-4-29-12s-12-18-12-29c0-12 4-21 12-29 8-9 17-13 29-13 11 0 21 4 29 13z'/%3E%3Cpath fill='%23FFC107' d='M960 624c0-26 5-22-22-22-5 0-3 11-3 22 0 6 10 4 22 4l3-4zm0-37c0-5 3-45 1-47-3-2-24-2-27 0-2 2 1 42 1 47s23 2 24 2l1-2zm-1-91l75 138c5 9-2 19-11 19H872c-9 0-16-10-11-19l75-138c5-9 18-9 23 0z'/%3E%3Cpath fill='%23B71C1C' d='M1383 571c0-12-4-22-10-32l-81 81c40 26 91-3 91-49zm-108 32l81-81c-52-35-115 27-81 81zm125-64a83 83 0 01-108 108c-83-35-57-159 32-159 34 0 63 20 76 51z'/%3E%3Cpath fill='%23FFF' d='M318 1024h-24v-23h12v-12h47v12h12v35h-12v12h12v47h-12v11h-47v-11h-12v-24h24v24h23v-47h-23v-12h23v-35h-23v23zm-94 24h11v-12h12v-35h-23v47zm11 58h-23v-11h23v-12h12v-35h-12v11h-23v-11h-12v-47h12v-12h47v12h12v82h-12v12h-24v11z'/%3E%3Cpath fill='%23FFF' d='M118 930c-25 0-47 18-47 35v71h70v23h47v-70h12v-12h71v12h23v-12h59a61 61 0 00-59-35c-19 0-39 6-52 18-9-18-26-30-48-30-15 0-30 6-40 17-8-15-20-17-36-17z'/%3E%3Ccircle fill='%23FFF' cx='294' cy='874' r='54'/%3E%3Ccircle fill='%23FFF' cx='194' cy='883' r='35'/%3E%3Ccircle fill='%23FFF' cx='118' cy='889' r='29'/%3E%3C/svg%3E") 0 0 no-repeat;
}
div#header,
div#hSub {
  font-family: Bahnschrift SemiBold;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  padding: 0 8px;
  border: 0;
  width: 100%;
  height: auto;
  font-size: 0;
  top: 0;
  left: 0;
  font-family: inherit;
  -webkit-text-fill-color: initial;
}

div#header {
  position: sticky;
  height: 98px;
  background: none;
  color: #f8f8f2;
  overflow: visible;
}

#header .logo span {
  display: none;
}

#header .logo {
  display: inline-block;
  margin: 11px 0 11px 8px;
  padding: 0;
  width: 38px;
  height: 38px;
  border: 1px solid #FFF;
  background-position: 0 -64px;
}

#hUp {
  display: inline-block;
  margin-top: 14px !important;
  margin-right: 0 !important;
  font-size: 0 !important;
  position: static !important;
}

#header #hUp a {
  display: inline-block;
  font-size: 0;
  margin: 0 8px 0 0;
  padding: 0;
  width: 32px;
  height: 32px;
  animation: none;
  text-decoration: none;
  position: relative;
  vertical-align: top;
}
#header #hUp a:after {
  content: "";
  display: none;
  background: #444;
  color: #EEE;
  white-space: nowrap;
  font-size: 12px;
  width: auto;
  line-height: 18px;
  position: absolute;
  top: 32px;
  right: 0;
  margin-top: 56px;
  padding: 6px 10px;
  transition-timing-function: linear;
  transition-duration: 2s;
}
#header #hUp a:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
#header #hUp a:hover:after {
  display: block;
}

#header #hUp a[href*="review."] {
  background-position: 0px 0;
  display: none;
}

#header #hUp a[href*="review."]:after {
  content: "New Comments!";
  color: #EE82EE;
}

#header #hUp a[href*="requests."] {
  background-position: -32px 0;
  display: none;
}

#header #hUp a[href*="requests."]:after {
  content: "New Fwiend Requests!";
  color: #FFC107;
}

#header #hUp a[href*="all."] {
  background-position: -64px 0;
  display: none;
}

#header #hUp a[href*="all."]:after {
  content: "New Fwiends!";
  color: #8BC34A;
}

#header #hUp a[href*="mailbox."] {
  background-position: -96px 0;
}

#header #hUp a[href*="mailbox."]:after {
  content: "MailBox";
}

#header #hUp a[href*="logout."] {
  background-position: -128px 0;
}

#header #hUp a[href*="logout."]:after {
  content: "Logout";
}

#header #hUp a[href*="signup."] {
  background-position: -160px 0;
}

#header #hUp a[href*="signup."]:after {
  content: "SignUp";
}

#header #hUp a[href*="login."] {
  background-position: -192px 0;
}

#header #hUp a[href*="login."]:after {
  content: "Login";
}

#header #hUp a[href*="mailbox."] ~ a[href*="mailbox."] {
  display: none;
}

#header #hUp a[href*="mailbox."] span {
  background: #F00;
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  bottom: 3px;
  right: 3px;
  border-radius: 50%;
}

div#hSub {
  position: sticky;

  background: none;
  color: #f8f8f2;
  top: 60px;
  height: 38px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  scrollbar-width: thin;
  z-index: 350;
}

#hSub::-webkit-scrollbar {
  height: 2px;
  background: transparent;
}

#hSub::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
}

#hSub a {
  font-family: Bahnschrift SemiBold;
  display: inline-block;
  text-transform: uppercase;
  color: inherit;
  font-size: 16px;
  line-height: 38px;
  margin: 0 8px 0 0;
  padding: 0 8px;
}

#hSub .sep {
  display: none;
  color: inherit;
}

#container {
  padding-top: 10px;
}

@media screen and (min-width: 240px) {
  #header #hUp a:first-child {
    display: inline-block;
  }
}
@media screen and (min-width: 360px) {
  #header #hUp a[href] {
    display: inline-block;
  }
}
@media screen and (min-width: 960px) {
  div#header {
    height: 60px;
  }

  #header #hUp a:after {
    margin-top: 4px;
  }

  #container {
    padding-top: 96px;
  }

  div#hSub {
    width: auto;
    top: 11px;
    left: 62px;
    background: none;
  }
}
@media screen and (min-width: 1080px) {
  #hSub .sep {
    display: inline;
  }
}

@media screen and (max-height: 720px) {
  div#header,
div#hSub {
    position: absolute;
  }
}

.topLeft, .topRight {
text-align: center;
}

img#avatar.avatar, div#imgPreview img {
border-radius: 10px;
height: 150px;
}

.boxInfo {
background-color: white;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid 2px #69c;
}

.boxInfo > div.boxHead {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

div.url.box {
background-color: white;
padding: 0px;
}

.extended.box, .box.blurbs, .box.fwiends, .box.comments {
background-color: rgba(0,0,0,0.3);
backdrop-filter: blur(5px;);
border: 1px solid #000;
color: white;
}

h2#name.uName {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}

#sMsg.boxButton {
    background-image: url(https://i.imgur.com/c04wTPq.png);
}

#add.boxButton {
    background-image: url(https://i.imgur.com/NNbOY7v.png);
}

#report.boxButton {
    background-image: url(https://i.imgur.com/H4Sqxlt.png);
}

#block.boxButton {
    background-image: url(https://i.imgur.com/AvELFPk.png);
}

div.boxHead {
background: linear-gradient(to right, #6699cc, #80c0ff);
}

div.rightHead {
background: linear-gradient(to right, #fc9, #ffe3c7);
}

.songTitle {
    display: block;
    animation: marquee 20s linear infinite;
}

@keyframes marquee {
0% {left: -500px;}
100% {left: 500px;}
}

.fwiendFace img {
    height: 100px;
    width: 100px;
    object-position: top;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 0 .3rem #000;
    background-color: #0005;
}
@keyframes float {
    0% {
        transform: translateY(-10%);
    }
    50% {
        transform: translateY(10%);
    }
    100% {
        transform: translateY(-10%);
    }
}
@media only screen and (min-width: 769px) {
    #top>a .fwiendFace {
        animation: float 4s ease-in-out infinite;
    }
}
#top>a:nth-child(1)>.fwiendFace, #top>a:nth-child(5)>.fwiendFace {
    animation-delay: 0ms !important;
}
#top>a:nth-child(2)>.fwiendFace, #top>a:nth-child(6)>.fwiendFace {
    animation-delay: 400ms !important;
}
#top>a:nth-child(3)>.fwiendFace, #top>a:nth-child(7)>.fwiendFace {
    animation-delay: 800ms !important;
}
#top>a:nth-child(4)>.fwiendFace, #top>a:nth-child(8)>.fwiendFace {
    animation-delay: 1000ms !important;
}

.fwiendFace b {
display: none;
}

.tableLeft {
background-color: #171717;
}

.tableRight {
background-color: #363636;
}