/*------------------Links------------------*/
 @font-face {
  font-family: offbit;
  src: url(/assets/offbit/OffBit-Regular.ttf);}
 
  @font-face {
  font-family: onli;
  src: url(/assets/onli/OnliLight.ttf);}

  @keyframes scroll{
    0% {transform: translateX(100%);}
    1% {transform: translateX(10%);}
    100% {transform: translateX(-100%);}
}

 /*------------------Basic elements------------------*/
html{scrollbar-color: #1a039e rgba(0, 0, 255, 0); scrollbar-width: 1px; font-family: offbit;}
body {position: relative;} 
p{font-family: offbit; color: white; }
p:hover {color: yellow}
p a:hover{color: yellow; text-decoration: underline;}
h1{font-family: onli; font-size: xx-large; color: white; text-align: center;}
h2{font-family: onli; font-size: x-large; color: white; text-align: center;}
*{color: white; font-size: 14px;}
footer{margin-top: 7px; margin-bottom: 10px; font-size: 11px;}

h3{font-family: onli; font-size: medium; text-align: center; margin-top: 5px; margin-bottom: 5px; color: white}
textarea{width: 130px; margin: 10px; margin-top: 5px; resize: none; font-family: onli; font-size: x-small; color: black;}
img{display: block; margin: auto; margin-top: 5px;}
header{background-image: url(https://st.depositphotos.com/3265665/4462/i/450/depositphotos_44627471-stock-photo-transparent.jpg); width: 100%; height: 200px;}
footer img{display: inline-block; margin: 0px  3px;}
hr{margin: 5px; color: white; border-width: 0.1px; border-style: solid;}
span{text-decoration: underline;}

  .crt::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

@keyframes flicker {
  0% {
  opacity: 0.27861;
  }
  5% {
  opacity: 0.34769;
  }
  10% {
  opacity: 0.23604;
  }
  15% {
  opacity: 0.10626;
  }
  20% {
  opacity: 0.18128;
  }
  25% {
  opacity: 0.10626;
  }
  30% {
  opacity: 0.18128;
  }
  35% {
  opacity: 0.23604;
  }
}

.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

 /*------------------Custom elements------------------*/
.maincontainer{
    width: 804px; height: fit-content; 
    margin: auto; margin-top: 25px; margin-bottom: 25px;
    border: 2px solid white; border-image: url(https://media.tenor.com/UZswyok8T-oAAAAM/pride-rainbow.gif) 1 round; 
    overflow: hidden; background-color: rgba(0, 0, 0, 0.815);}
.marquee{display: inline-block; white-space: nowrap; animation: scroll 120s linear infinite;}
.marqueecontainer{background-image: url(https://file.garden/Z2XGVbczYicw6Ty5/website%202/dgawhlshkl%2Cd.ma.gif); width: 100%; margin-top: 0px; border: 1px black dashed;}
.marquee p{color: pink; margin: 0px; font-size: onli;}
.container{display: inline-block;  height: fit-content; margin-top: 8px; vertical-align: top;}

.minicontainer{background-color: black; border: 1px white solid; padding-top: 0px; margin: 5px; margin-top: 10px;}
.minicontainer p{margin: 5px;}
.subheader{background-image: url(https://file.garden/Z2XGVbczYicw6Ty5/website%202/sbja%3Cmsnd%C3%B1sa.gif);
    border-bottom: 1px solid black; padding: 5px;}
.subheader h3{margin-top: 0px; margin-bottom: 0px; text-align: left;}
.imgmovable:hover{rotate: 2deg; filter: drop-shadow(2px 2px grey);}

.date_updates{font-size: smaller; font-family: onli;}
.white_ref{color: white; text-decoration: none;}

.underline{text-decoration: line-through;}



/*------------------------------EXTRAS----------------------*/
/* Music Player */
.ctrlimg{width: 40px; margin: 5px;}
.current-time{font-family: onli; display: inline-block;}
.seek_slider{width: 84px; display: inline-block; 
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  height: 2px; /* Specified height */
  background: #fd0000;}
.total-duration{font-family: onli; display: inline-block;}

/*Status cafe*/
#statuscafe-username {margin: 5px; font-family: onli; font-size: small; margin-bottom: 0px;}
#statuscafe-content {margin: 5px; font-family: offbit; font-size: small; color: white; margin-top: 0px;}

/*Chat box*/
#background, #settingsMenu {
    background: url(/media/grid.png);
    background-size: 100px 100px;
    background-attachment: local;
    background-repeat: repeat;
}

/*.minicontainer img:hover{rotate: 2deg; filter: drop-shadow(2px 2px grey);}