@font-face { font-family: Oswald bold; src: url(//fonts.weo.ro/Oswald/bold.ttf); }
@font-face { font-family: Open Sans; src: url(//fonts.weo.ro/Open-Sans/regular.ttf); }

@font-face { font-family: Roboto-Black; src: url(//fonts.weo.ro/Roboto/Black.ttf); }
@font-face { font-family: Roboto-BlackItalic; src: url(//fonts.weo.ro/Roboto/BlackItalic.ttf); }
@font-face { font-family: Roboto-Bold; src: url(//fonts.weo.ro/Roboto/Bold.ttf); }
@font-face { font-family: Roboto-BoldItalic; src: url(//fonts.weo.ro/Roboto/BoldItalic.ttf); }
@font-face { font-family: Roboto-Italic; src: url(//fonts.weo.ro/Roboto/Italic.ttf); }
@font-face { font-family: Roboto-Light; src: url(//fonts.weo.ro/Roboto/Light.ttf); }
@font-face { font-family: Roboto-LightItalic; src: url(//fonts.weo.ro/Roboto/LightItalic.ttf); }
@font-face { font-family: Roboto-Medium; src: url(//fonts.weo.ro/Roboto/Medium.ttf); }
@font-face { font-family: Roboto-MediumItalic; src: url(//fonts.weo.ro/Roboto/MediumItalic.ttf); }
@font-face { font-family: Roboto-Regular; src: url(//fonts.weo.ro/Roboto/Regular.ttf); }
@font-face { font-family: Roboto-Thin; src: url(//fonts.weo.ro/Roboto/Thin.ttf); }
@font-face { font-family: Roboto-ThinItalic; src: url(//fonts.weo.ro/Roboto/ThinItalic.ttf); }

@font-face { font-family: Brabo-Regular; src: url(//fonts.weo.ro/Brabo/Regular.ttf); }
@font-face { font-family: Brabo-Italic; src: url(//fonts.weo.ro/Brabo/Italic.ttf); }
@font-face { font-family: Brabo-Bold; src: url(//fonts.weo.ro/Brabo/Bold.ttf); }
@font-face { font-family: Brabo-Light; src: url(//fonts.weo.ro/Brabo/Light.ttf); }



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}


body {  
  overflow: scroll;
  background: #171717;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  color: #ddd;
  font-size: 1rem;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.025rem;
  line-height: 1.618;
  padding: 1rem 0;
  margin-bottom: 70px;
}


body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/media/assets/bg.jpg') center/cover;
  opacity: 0.1;
  z-index: -1;
  filter: blur(5px) grayscale(40%);
}

.container {
  position: relative;
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
}


::-webkit-scrollbar{ height: 5px; }
::-webkit-scrollbar-track { background: #171717; }
::-webkit-scrollbar-thumb { background: #090909; border-radius: 10px; width: 2px; }

*, ::before, ::after { box-sizing: border-box; }

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
}

img { width: 300px; }
small { font-size: 11px; font-weight: 100; letter-spacing: 1px; }

.center { text-align: center; }
.left { text-align: left; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }


audio {   filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(100%);
}

audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-mute-button { display: none !important; }

audio { width: calc(100% - 30px); }
progress { width: calc(100% - 30px); }

p { padding-left: 10px; }


.player {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #040404;
  padding: 10px 10px 0 10px;
  text-align: center;
  }

#player { width: 100%; }

#current { 
  padding-top: 10px;
  font: normal 400 26px Roboto-Bold;
  color: #777;
  letter-spacing: 1px;
}

table { width: 100%; margin-bottom: 50px; }

td.playing { background-color: #ffcc00 !important; }
td.playing:hover { background-color: #cc9900 !important; }

tr { display: table-row; cursor: pointer; border-bottom: dashed 1px rgba(255, 255, 255, 0.03); }
tr:hover { background: #000; }

td { color: #999; vertical-align: middle; }

td a:link { color: #999; font: normal 400 18px Roboto-Bold; text-decoration: none; }
td a:visited { color: var(--color3); text-decoration: line-through; }


td.title {
  vertical-align: middle;
  padding: 12px 8px 8px 8px;
}

td.title span { color: #666; font: normal 400 11.5px Roboto-Light; }



td.title span.note {
    color: #cccc00;
    font: normal 400 11px Roboto-Thin;
    display: block;
    margin: 6px 0 0 10px;
}

td.title span.note::before {
  content: "\f05a";
  font-family: 'Font Awesome 6 Pro';
  font-weight: 400;
  color: #555;
  display: inline-block;
  font-size: 12px;
  margin-right: 3px;
}

td.title span.note i {
  font: italic 400 10px Roboto-Light;
  color: #999;
}


td.title span.note:first-line {
  margin-left: 0;
}







td.entry { vertical-align: top; padding: 8px; }

td.max { font: normal 400 15px Roboto-Black; }
td.med { font: normal 400 25px Roboto-Regular; }
td.min { font: normal 400 12px Roboto-Bold; }
td.huge { font: normal 400 24px Roboto-Black; color: #777; }



img { width: 300px; }
small { font-size: 11px; font-weight: 100; letter-spacing: 1px; }

#waveform {
    width: 100%;
    height: 100px;  /* Set the desired height for the waveform */
}


.btn,
.btn::after {
  display: block;
  min-width: 300px;
  padding: 16px 20px;
  font-size: 18px;
  border: 0;
  color: #fff;
  letter-spacing: 3px;
  line-height: 1;
  box-shadow: 6px 0px 0px #111;
  outline: transparent;
  position: relative;
  margin-bottom: 20px;
  cursor: pointer;
}

.btn.show, .btn.show::after { background: linear-gradient(45deg, transparent 5%, #3B3070 5%); }
.btn.retail, .btn.retail::after { background: linear-gradient(45deg, transparent 5%, #ff013c 5%); }
.btn.beta, .btn.beta::after { background: linear-gradient(45deg, transparent 5%, #77b300 5%); }


.btn::after {
 --slice-0: inset(50% 50% 50% 50%);
 --slice-1: inset(80% -6px 0 0);
 --slice-2: inset(50% -6px 30% 0);
 --slice-3: inset(10% -6px 85% 0);
 --slice-4: inset(40% -6px 43% 0);
 --slice-5: inset(80% -6px 5% 0);
 content: "HOVER ME";
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: linear-gradient(45deg, transparent 3%, #00e6f6 3%, #00e6f6 5%, #ff013c 5%);
 text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
 clip-path: var(--slice-0);
}

.btn:hover::after {
 animation: 1s glitch;
 animation-timing-function: steps(2, end);
}

.btn:active, .app:active { transform: translateY(3px); }

.btn span {
  display: block;
  font-size: 10px;
  font-weight: 100;
  margin-top: 10px;
  letter-spacing: 1px;
}



.app {
  position: relative;
  overflow: hidden;
  height: 3rem;
  padding: 0 2rem;
  border-radius: 1.5rem;
  background: #3d3a4e;
  background-size: 400%;
  color: #fff;
  border: none;
  cursor: pointer;
  margin-top: 60px;
}

.app:hover::before {
  transform: scaleX(1);
}

.app span {
  position: relative;
  z-index: 1;
}

.app::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(
    82.3deg,
    rgba(150, 93, 233, 1) 10.8%,
    rgba(99, 88, 238, 1) 94.3%
  );
  transition: all 0.475s;
}




@media print {
  body, page { margin: 0; box-shadow: 0; }
}

@media (pointer:none), (pointer:coarse) {


}





@keyframes glitch {
 0% {
  clip-path: var(--slice-1);
  transform: translate(-20px, -10px);
 }

 10% {
  clip-path: var(--slice-3);
  transform: translate(10px, 10px);
 }

 20% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 10px);
 }

 30% {
  clip-path: var(--slice-3);
  transform: translate(0px, 5px);
 }

 40% {
  clip-path: var(--slice-2);
  transform: translate(-5px, 0px);
 }

 50% {
  clip-path: var(--slice-3);
  transform: translate(5px, 0px);
 }

 60% {
  clip-path: var(--slice-4);
  transform: translate(5px, 10px);
 }

 70% {
  clip-path: var(--slice-2);
  transform: translate(-10px, 10px);
 }

 80% {
  clip-path: var(--slice-5);
  transform: translate(20px, -10px);
 }

 90% {
  clip-path: var(--slice-1);
  transform: translate(-10px, 0px);
 }

 100% {
  clip-path: var(--slice-1);
  transform: translate(0);
 }
}






    @keyframes crawl {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-100%);
      }
    }