.body {
  background-repeat: repeat;
  background-attachment: fixed;
  background-color: #000000;
  overflow-x: hidden;
  overflow-y: auto;
}
a{ text-decoration: none;
    color:#000000
}
.wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow-x:hidden;
  overflow-y:hidden;
}
.title{
  display: flex;
  position: absolute;
  width:100px;
  height:190px;
  transform: translate(px, px);
  margin-top: 68px;
  margin-left: 470px;
  z-index:90;
}
.city{
  display:flex;
  position: absolute;
  flex-direction:row;
  margin-top:10px;
  margin-left:30px;
  font-family:"Brose";
  text-align:center;
}
.center {
  display: flex;
  position: absolute;
  flex-wrap:nowrap;
  text-align: left;
  height:525px;
  width: 900px;
  overflow: hidden;
  margin-top: 195px;
  margin-left: 480px;
  padding:10px;
  background-color:rgb(0, 0, 0);
  background-image:url(https://ughbees.neocities.org/Old%20Page%201/STIPPLE2.png);
  z-index:-1;
  opacity:.5;
  border: 2px double #ee0786;
  border-radius: 20px 20px 20px 20px;
}
.block {
  position: absolute;
  margin-top: 195px;
  margin-left: 480px;
  width: 925px;
  height: 550px;

}
.block:before, .block:after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  border-radius: 20px 20px 20px 20px;
  background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094,
    #0000ff, #00ff00,#ffff00, #ff0000);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  z-index: -1;
  animation: steam 60s linear infinite;
}
@keyframes steam {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.block:after {
  filter: blur(50px);
}
.sidebar-1{
  display: flex;
  position: absolute;
  flex-direction: column;
  width:200px;
  height:355px;
  font-size: 1em;
  margin-top: 431px;
  margin-left: 230px;
  padding: 0px 0px;
  font-family: sans-serif;
  word-wrap: break-word;
  z-index:1;
  border-top: 12px double #721162;
  border-left: 10px double #ee0ac8;
  border-right: 10px double #0003bd;
  border-bottom: none;
  border-radius: 20px 20px 20px 20px;
  box-shadow: 0 1px 9.5px 2.5px #3b0e49;
  /* background-image:url(https://ughbees.neocities.org/Main%20Page%20Images/paper1.jpg); */
  overflow:hidden;
}
.cbutton{
  display:flex;
  position:absolute;
  flex-direction:column;
  z-index: index 1;
  text-align: center;
  margin-top: 10px;
  margin-left:395px;
  font-family:Oxanium;
  transition-duration: 0.4s;
}
.tv{
  display: flex;
  position: absolute;
  height:180px;
  padding: 10 0px;
  top: 135px;
  margin-left:114px;
  z-index:2;
}
.tvtext{
  display: table;
  position: absolute;
  height:fit-content;
  width:150;
  padding: 0 10px;
  top: 400px;
  margin-left:243px;
  z-index:-2;
  font-family:pixel;
  font-size: 6px;
  background-color:rgb(0, 0, 0);
  color:#ffffff;
}
.tvscreen{
  display: flex;
  position: absolute;
  background-color:rgb(0, 0, 0);
  width:150px;
  height:110px;
  top: 310px;
  margin-left:243px;
  z-index:-5;
}
.tvscreen img{
  width: 100%;
  height: 100%;
}
.bookshelf{
  display: flex;
  position: absolute;
  width:200px;
  height:250px;
  font-size: 1em;
  padding: 0 0px;
  transform: translate(px, 0px);

}
.sidebar-2{
  display: flex;
  position: absolute;
  flex-direction:column;
  width:200px;
  height:650px;
  font-size: 1em;
  margin-top: 190px;
  margin-left: 1380px;
  padding: 0px 30px;
  color: #000000;
  text-transform: none;

}
.planet1{
  display: flex;
  float:right;
  position: absolute;
  height:fit-content;
  width:fit-content;
  z-index: 3;
}
.planet2{
  display: flex;
  float:right;
  position: absolute;
  height:fit-content;
  z-index:3;
  transform: translate(45px,30px);
 font-family:oxanium;

}
.planet3{
  display: flex;
  float:right;
  position: absolute;
  height: fit-content;
  z-index:1;
  transform: translate(40px,160px);
  font-family:;
  text-align:center;
}
.planet4{
  display: flex;
  float:right;
  position: absolute;
  height: fit-content;
  z-index:1;
  transform: translate(20px,300px);
  font-family:oxanium;
}
.about-bee{
  display: flex;
  position: absolute;
  flex-direction:column;
  width:450px;
  height:240px;
  margin-top: 213px;
  margin-left: 500px;
  padding:  1px;
  justify-items:left;
  font-family:"Oxanium";
  z-index:-1;
  border-radius: 20px 20px 20px 20px;
  background-image:url(https://ughbees.neocities.org/Old%20Page%201/paper2.jpg);
  border: 3px solid #ff0000;
}
.pfp{
  display: flex;
  position: absolute;
  float: left;
  width: 120px;
  height: 120px;
  margin-top: 10px;
  margin-left: 10px;
  border-radius: 20px 20px 20px 20px;
  border: 2px solid #000000;

}
.pfp img{
  width: 100%;
  height:100%;
  border-radius: 20px 20px 20px 20px;
}
.beetext{
  display: flex;
  position: absolute;
  flex-direction:column;
  width:265px;
  height: 200px;
  margin-top: 10px;
  margin-left: 155px;
  margin-right: 12px;
  padding: 10px;
  overflow:scroll;
  overflow-y: hidden;
  overflow-x: hidden;
  background-image:url(https://ughbees.neocities.org/Old%20Page%201/stars.png);
  border: 1px double #000000;
  border-radius: 20px 20px 20px 20px;
  font-family:Oxanium;
  font-weight:bold;
  color:#eceff3;
}
.aquarium{
  display: flex;
  position: absolute;
  z-index:5;
  margin-top:220px;
  margin-left:525px;
  outline:none;
  font-family:"Aquawave";

}
.to-do{
  display: flex;
  overflow:scroll;
  overflow-x: hidden;
  position: absolute;
  flex-direction: column;
  width:150px;
  height:230px;
  font-size: 1em;
  font-family:Oxanium;
  font-weight:bold;
  color:#eceff3;
  padding: 20px;
  transform: rotate(-0deg);
  border: 10px solid #4b0f43;
  border-radius: 20px ;
  z-index:2;
  margin-left:970px;
  margin-top:219px;
  background-image:url(https://ughbees.neocities.org/Old%20Page%201/stars.png);
  background-clip:padding-box;

}
.chattable{
  display:flex;
  position:absolute;
  width:260px;
  height:200px;
  margin-top:520px;
  margin-left:500px;
  z-index:2
}
.art-gallery{
   display: flex;
  position: absolute;
  width:130px;
  height:250px;
  margin-bottom:1;
  transform: translate(820px, 630px);
  padding: 10px 10px;
}
.art{
  display: fixed;
  position: absolute;
  width:200px;
  height:145px;
  font-size: 20px;
  transform: translate(877px, 690px);
  background-color: #000000;
  z-index:1;
  font-family:pixel;
  font-weight:bold;
  color:#eceff3;
}
.art marquee{
  width: 100%;
  height:100%;
}
.art img{
    width: 100%;
    height:100%;
}
.string{
  display: flex;
  position: absolute;
  width:130px;
  height:120px;
  transform: translate(855px, 555px);
  padding: 10px 10px;
  z-index:-1;
  outline:none;
}
.vampire-nest{
  display: flex;
  position: absolute;
  width:fit-content;
  height:220px;
  transform: translate(575px, 260px);
  outline:none;
  z-index:1;
  font-family:"Gothic Mother";
}
.decor{
  display: flex;
  position: absolute;
  width:fit-content;
  height:fit-content;
  font-size: 1em;
  transform: translate(2px, 235px);
  margin-top:-95px;
  margin-left:8px;
  z-index: -1;
}
.void{
display: flex;
  position: absolute;
  width:1;
  height:100px;
  padding: 0px 0px;
  margin-top:780px;
  margin-left:50px;
  z-index:1;
  transform: rotate(40deg);
  font-family:"Spiral";
}
.imood{
   position:absolute;
   margin-top:60px;
   margin-left: 2;
}
.header{
  display: absolute;
  position:fixed;
  width:100%;
  height:20px;
  z-index:-10;
  color:#fff;
  font-size:10;
  font-family:"oxanium"

}
.counter{
  position:absolute;
  margin-top:170px;
  margin-left:1150px;
  z-index:3;
}
.alien{
position:absolute;
height:10px;
margin-top:810px;
margin-left:1710px;
opacity:0;
}
.alien:hover{
  opacity:1;
}
.alien2{
position:absolute;
margin-top:250px;
margin-left:280px;
}
.rob{
position:absolute;
margin-top: 460px;
margin-left:500.5px;
z-index:3;
}
.thecollective{
  opacity:0;
  outline:auto;

}
.thecollective:hover{
  opacity:1
}
.tomo{
  position:absolute;
  z-index:3;
  margin-top: 470px;
  margin-left:925px;
}
.fish{
 position:absolute;
  z-index:3;
  margin-top: 513px;
  margin-left:920.5px;
}
.vampbutton{
  position:absolute;
  margin-top: -53.5px;
  margin-left:305px;
  z-index:3;
}
.Doll img{
  position:absolute;
  margin-top:350px;
  margin-left:600px;
  z-index:5;
}
.stardiv{
  position:absolute;
  margin-top:300px;
  margin-left:900px;
  z-index:-5;
  rotate:90deg;

}
.stardiv2{
  position:absolute;
  margin-top:300px;
  margin-left:-460px;
  z-index:-5;
  rotate:-90deg;
}
.tinybees{
  position:absolute;
  margin-left:125px;
  margin-top:-135px;
}
.music{
  position:absolute;
  color:#ffffff;
  font-size:15;
  background-color:black;
  margin-top:658px;
  margin-left:240px;
  z-index: 5;
}
.kylo{
  position:absolute;
  margin-left:803px;
  margin-top:560px;
}
.guestbook{
  position:absolute;
}
/* IMAGE TEXT HOVER  */

.vampire-nest span {
  opacity: 0;
  position: absolute;
  top: 100px;
  left: 70px;
  transform: translate(0, 0%);
  z-index:99;
  font-size:45px;
  color: #e20f0f;
  filter: drop-shadow(1px 1px 0 rgb(0, 0, 0))
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);

}
.vampire-nest:hover span, .imgtxt:focus span {
  opacity: 1;
}
.vampire-nest:hover img, .imgtxt:focus img {

  animation: shake 2s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.bat span{
    opacity: 0;
    top: 5px;
  }
.planets span {
  opacity: 0;
  position: absolute;
  top:60px;
  left: 50px;
  transform: translate(0, 0%);
  z-index: 99;
  font-size: 50px;
  color: #f08409;
  background: radial-gradient(circle farthest-corner at top center, #FFA81D 0%, #FF5C10 50%, #FFE41A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
   filter: drop-shadow(1px 1px 0 rgb(0, 0, 0))
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);

}
.planets:hover span, .planets:focus span {
  opacity: 1;
}
.planets:hover img, .planets:focus img {
}
.planetst span {
  opacity: 0;
  position: absolute;
  top:35px;
  left: -20px;
  transform: translate(0, 0%);
  z-index: 99;
  font-size: 20px;
  color: #FFF;
  filter: drop-shadow(1px 1px 0 rgb(0, 0, 0))
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.planetst:hover span, .planets:focus span {
  opacity: 1;
}
.planetst:hover img, .planets:focus img {
  /* add hover effects like transform or filter to your images here! */
}
.aquarium span {
  opacity: 0;
  position: absolute;
  top: 50px;
  left: 25px;
  transform: translate(0%, 0%);
  z-index: 1;
  font-size: 50px;
  color: #458fe4;
  filter: drop-shadow(1px 1px 0 rgb(0, 0, 0))
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);
}
.aquarium:hover span, .imgtxt:focus span {
  opacity: 1;
  z-index: 99;
}
.aquarium:hover img, .imgtxt:focus img {
    animation: shake 0.5s;
    animation-iteration-count: infinite;
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.city span {
    opacity: 0;
    position: absolute;
    top: 40px;
    left: 10px;
    padding-top:70px;
    transform: translate(0, 0%);
    z-index: 99;
    font-size: 20px;
    color: #df9e11fa;
    filter: drop-shadow(1px 1px 0 rgb(17, 14, 2))
      drop-shadow(-1px 1px 0 rgb(216, 13, 114))
      drop-shadow(1px -1px 0 rgb(19, 6, 190))
      drop-shadow(-1px -1px 0 rgb(10, 201, 26));
}
.city:hover span, .city:focus span {
    opacity: 1;
}
.city:hover img, .city:focus img {
   animation: blink .5s linear 0;
   animation-iteration-count: infinite;
}
@keyframes blink{
      25% {
        opacity: 0.5;
      }
      50%{
        opacity:0
      }
      75%{
        opacity:0.5;
      }
}

.void span {
    opacity: 0;
    position: absolute;
    top: 0;
    left: -2px;
    z-index: 99;
    font-size: 45px;
    color: #b8da3f;
    filter: drop-shadow(1px 1px 0 rgb(0, 0, 0))
      drop-shadow(-1px 1px 0 black)
      drop-shadow(1px -1px 0 black)
      drop-shadow(-1px -1px 0 black);
}
.void:hover span, .imgtxt:focus span {
opacity: 1;
}
.void:hover img, .imgtxt:focus img {
    /* add hover effects like transform or filter to your images here! */
}
.tv span {
   opacity: 0;
  position: absolute;
  top: 30px;
  left: 17px;
  transform: translate(0%, 0%);
  z-index: 99;
  font-size: 50px;
  color: #458fe4;
  filter: drop-shadow(1px 1px 0 rgb(0, 0, 0))
          drop-shadow(-1px 1px 0 black)
          drop-shadow(1px -1px 0 black)
          drop-shadow(-1px -1px 0 black);

}
.tv:hover span, .imgtxt:focus span {
      opacity: 1;
      z-index: 99;
}

.bookshelf span {
  opacity: 0;
  position: absolute;
  top: 100px;
  left: 50px;
  transform: translate(0, 0%);
  z-index:99;
  font-size:45px;
  color: #e9d94f;
  filter: drop-shadow(1px 1px 0 rgb(0, 0, 0))
    drop-shadow(-1px 1px 0 black)
    drop-shadow(1px -1px 0 black)
    drop-shadow(-1px -1px 0 black);

}
.bookshelf:hover span, .imgtxt:focus span {
  opacity: 1;
}
/* Cursor */



/* Fridge */
.TheFridge{
  display: flex;
  position:absolute;
  margin-left:1205px;
  margin-top:205px;
  color: rgb(0, 0, 0);
  z-index:99;
  font-family:beam;
  font-size:35px;
}
.fridgebox{
  display: flex;
  overflow:scroll;
  overflow-x: hidden;
  position: absolute;
  flex-direction: column;
  padding:-10px;
  width:140px;
  height:230px;
  border-radius: 20px 0px 0px 20px;
  z-index: 2;
  margin-left:1200px;
  margin-top:240px;
  padding-right: 40px;
  box-shadow: 0 1px 9.5px 2.5px #837878;
  white-space:wrap;
}
#fbackground {
  position: absolute;
  left: 0; right: 0;
  z-index: -1;
  background-image: url('https://assets.codepen.io/5085433/fridge.jpg');
  background-size: cover;
  padding-bottom: 140%;
  width: 100%;
}
#fbackground-middle {
  position: absolute;
  z-index: -1;
  background-image: url('https://assets.codepen.io/5085433/line.jpg');
  background-size: contain;
  left: 0;
  right: 0;
  top: 0;
  margin-top: 140%;
  bottom: 0;
}

.fupdates {
  width:170px;
  white-space:none;
  padding: 3px;
  /* increase this number to make the fridge bigger */
  padding-bottom: 500em;
}

.fupdates img{
  height:20px;
}

.fupdates p{
  margin-top:0px;
  margin-bottom:0px;
  background-color:rgba(126, 12, 31, 0);
  white-space:normal;
  
}









/* Chattable */

@keyframes glow {
  from {
    box-shadow: 0 0 5px rgb(94, 238, 10);
 }
  to {
    box-shadow: none;
 }
}
:root {
  --notification-sfx: /media/beep.mp3;
}
body {
 font-family: monospace;
}
.allMessages {
  color: #148114;
  text-shadow: 1px 1px 3px rgb(231, 6, 6);
  border-radius: 10px;
  font-family: monospace;
  letter-spacing: -1px;
}
.sent{
}
.recieved{
}
.senderInfo {
 color: #0F0;
 text-shadow: 0 0 3px #0F0;
}
#background {
  background-color: #000;
  scrollbar-color: rgb(214, 13, 187) #000;
  scrollbar-width: thin;
}
#input {
  color: rgb(63, 226, 13);
  background: #000;
  border: none;
  outline: none;
  font-family: monospace;
}
#input:empty:before {
  color: #050;
}
#timestamp {
  color: #0F0;
  font-style: italic;
  font-family: monospace;
  font-size: 9pt;
  text-align: left !important;
  width: calc(100% - 20px);
  padding: 0 10px 0 10px;
  text-shadow: 1px 1px 3px #0F0;
}
#top_banner {
  font-family: monospace;
  color: rgb(236, 24, 9);
  background-color: #222;
}
blockquote {
  background-color: #222;
  border-color: rgb(231, 10, 10);
}
#loadMore {
  color: #0F0;
  font-family: monospace;
  font-size: 10pt;
}
#loadMore:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #F00;
}
.pinned {
  animation: 500ms linear infinite alternate glow;
}
.pinned:after {
 display: none;
}
.mod, .owner, .tester {
 width: 0;
 font-size: 8pt;
 text-shadow: none;
}
.mod::before {
 content: "[MOD]";
 display: inline-block;
 color: #F00;
 position: absolute;
 top: 7px;
 right: 7px;
 text-shadow: 0 0 3px #F00;
}
.owner::before {
 content: "[OWNER]";
 display: inline-block;
 color: #F00;
 position: absolute;
 top: 7px;
 right: 7px;
 text-shadow: 0 0 3px #F00;
}
.beta::before {
 content: "[BETA TESTER]";
 display: inline-block;
 color: #0F0;
 position: absolute;
 top: 7px;
 right: 7px;
}
#settings {
 background-image: none;
}
#settings:after {
 position: absolute;
 right: 0;
 top: 0;
 content: "#";
 color: rgb(255, 0, 0);
}
#settings:hover:after {
 font-weight: bold;
}
#replyBanner {
 color: #0F0;
 font-family: monospace;
 font-size: 8pt;
 text-shadow: 0 0 3px #0F0;
}
.msgBody a {
 color: #0F0 !important;
}
#emojiTrayToggle {
 -webkit-filter: drop-shadow(1px 1px 1px #0F0), drop-shadow(-1px -1px 1px #0F0);
 filter: drop-shadow(1px 1px 1px #0F0), drop-shadow(-1px -1px 1px #0F0);
 box-shadow: 1px 1px 1px #0F0, -1px -1px 1px #0F0;
}
#emojiTray {
 background-color: #000;
 color: #0F0;
 border-color: #0F0;
}





/* Firefox (uncomment to work in Firefox, although other properties will not work!)  */
/** {
  scrollbar-width: thin;
  scrollbar-color: #FFFFFF #000000;
}*/

/* Chrome, Edge and Safari */
*::-webkit-scrollbar {
  height: 2px;
  width: 2px;
}
*::-webkit-scrollbar-track {
  border-radius: 20px;
  background-color: #000000;
}

*::-webkit-scrollbar-track:hover {
  background-color: #000000;
}

*::-webkit-scrollbar-track:active {
  background-color: #C227BD;
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #FFFFFF;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #8A10A3;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #7C20A3;
}


/* FONTS */

@font-face {
  font-family: "Oxanium";
  src: url("font/Oxanium-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Oxanium";
  src: url('font/Oxanium-Bold.ttf')  format("truetype");
  font-weight: bold;
}
@font-face {
  font-family:"Aquawave";
  src: url("font/Aquawave.ttf")
  format("truetype");
}
@font-face {
  font-family:"Gothic Mother";
  src: url("font/Gothic Mother.ttf")
  format("truetype");
}@font-face {
  font-family:"Mad Max";
  src: url("font/HoganMania.ttf")
  format("truetype");
}@font-face {
  font-family:"Star Trek";
  src:url("font/Star Trek_future.ttf")
  format("truetype");
}@font-face {
  font-family:"Spiral";
  src: url("font/PositiveWarp.ttf")
  format("truetype");
}
@font-face {
  font-family:"Brose";
  src: url("font/Brose.ttf")
  format("truetype");
}
@font-face {
  font-family:"Pixel";
  src: url("font/Pixeled.ttf")
  format("truetype");
}
@font-face {
  font-family:"Grunge";
  src: url("font/Apocalypse\ Grunge.ttf")
  format("truetype");
}
@font-face {
  font-family:"Beam";
  src: url("font/Linebeam.ttf")
  format("truetype");
}
@font-face {
  font-family:"Skew";
  src: url("font/Skewed.ttf")
  format("truetype");
}
@font-face {
  font-family:"Cursives";
  src: url("font/Signatra.ttf")
  format("truetype");
}






/* Music Player */

#musicplayer{
  font-family:'Oxanium'; /* default font */
  background-image:url(https://ughbees.neocities.org/Old%20Page%201/rainbowgif.gif); /* background color of player */
  border:2px  solid #000000; /* border around player */
  border-radius: 0px 0px 20px 20px;
  width:175px; /* width of the player - make it 100% if you want it to fill your container */
  height:117px;
  padding:10px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:5px;
}

.songtitle, .track-info, .now-playing{
  padding:1px;
}

.controls{
  display:flex;
  flex-direction:column;
  gap:px;
}

.buttons{
  display:flex;
  justify-content:center;
  font-size:10 !important; /* size of controls */

  width:100%;
}

.buttons div{
  width:33.3%;
}

.playpause-track, .prev-track, .next-track{
  color:#000000; /* color of buttons */
  font-size:30px !important; /* size of buttons */
  margin-top:-10px;
}

.volume-icon{
  font-size:10px !important; /* size of volume icon */
  color:#000000;
}

.seeking, .volume{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:5px;
  margin-top:-5px;
}

.now-playing, .track-info{
  background-color:#000000; /* background color of top two boxes */
}

.now-playing{
  font-weight:bold;
}

input[type=range]{
  -webkit-appearance:none; /* removes default appearance of the tracks */
  width:100%;
}

input[type=range]:focus{
  outline:none; /* removes outline around tracks when focusing */
}

input[type=range]::-webkit-slider-runnable-track{
  width:100%;
  height:4px; /* thickness of seeking track */
  background:#050505; /* color of seeking track */
}

input[type=range]::-webkit-slider-thumb{
  height:10px; /* height of seeking square */
  width:10px; /* width of seeking square */
  border-radius:5px; /* change to 5px if you want a circle seeker */
  outline:auto;
  background:#f5f5f5; /* color of seeker square */
  -webkit-appearance:none;
  margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
}

input[type=range]::-moz-range-track{
  width:100%;
  height:px; /* thickness of seeking track */
  background:#000000; /* color of seeking track */
}

input[type=range]::-moz-range-thumb{
  height:10px; /* height of seeking square */
  width:10px; /* width of seeking square */
  border-radius:0px; /* change to 5px if you want a circle seeker */
  background:#ffffff; /* color of seeker square */
  border:none; /* removes weird border around seeker square in firefox */
}