@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");

@font-face { font-family: 'Roboto Black'; font-weight: 900; font-style: normal; font-display: swap; src: url(//fonts.weo.ro/Roboto/Black.woff2) format('woff2'); }
@font-face { font-family: 'Roboto BlackItalic'; font-weight: 900; font-style: italic; font-display: swap; src: url(//fonts.weo.ro/Roboto/BlackItalic.woff2) format('woff2'); }

@font-face { font-family: 'Roboto Bold'; font-weight: 700; font-style: normal; font-display: swap; src: url(//fonts.weo.ro/Roboto/Bold.woff2) format('woff2'); }
@font-face { font-family: 'Roboto BoldItalic'; font-weight: 700; font-style: italic; font-display: swap; src: url(//fonts.weo.ro/Roboto/BoldItalic.woff2) format('woff2'); }

@font-face { font-family: 'Roboto Medium'; font-weight: 500; font-style: normal; font-display: swap; src: url(//fonts.weo.ro/Roboto/Medium.woff2) format('woff2'); }
@font-face { font-family: 'Roboto MediumItalic'; font-weight: 500; font-style: italic; font-display: swap; src: url(//fonts.weo.ro/Roboto/MediumItalic.woff2) format('woff2'); }

@font-face { font-family: 'Roboto Regular'; font-weight: 400; font-style: normal; font-display: swap; src: url(//fonts.weo.ro/Roboto/Regular.woff2) format('woff2'); }
@font-face { font-family: 'Roboto Italic'; font-weight: 400; font-style: italic; font-display: swap; src: url(//fonts.weo.ro/Roboto/Italic.woff2) format('woff2'); }

@font-face { font-family: 'Roboto Light'; font-weight: 300; font-style: normal; font-display: swap; src: url(//fonts.weo.ro/Roboto/Light.woff2) format('woff2'); }
@font-face { font-family: 'Roboto LightItalic'; font-weight: 300; font-style: italic; font-display: swap; src: url(//fonts.weo.ro/Roboto/LightItalic.woff2) format('woff2'); }

@font-face { font-family: 'Roboto Thin'; font-weight: 100; font-style: normal; font-display: swap; src: url(//fonts.weo.ro/Roboto/Thin.woff2) format('woff2'); }
@font-face { font-family: 'Roboto ThinItalic'; font-weight: 100; font-style: italic; font-display: swap; src: url(//fonts.weo.ro/Roboto/ThinItalic.woff2) format('woff2'); }

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


@font-face { font-family: "Font Awesome 7 Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("//icons.weo.ro/7.0.1/webfonts/fa-regular-400.woff2") format("woff2"); }
@font-face { font-family: "Font Awesome 7 Pro"; font-style: normal; font-weight: 900; font-display: swap; src: url("//icons.weo.ro/7.0.1/webfonts/fa-solid-900.woff2") format("woff2"); }
@font-face { font-family: "Font Awesome 7 Pro"; font-style: normal; font-weight: 300; font-display: swap; src: url("//icons.weo.ro/7.0.1/webfonts/fa-light-300.woff2") format("woff2"); }  
@font-face { font-family: "Font Awesome 7 Pro"; font-style: normal; font-weight: 100; font-display: swap; src: url("//icons.weo.ro/7.0.1/webfonts/fa-thin-100.woff2") format("woff2"); }

@font-face { font-family: "Font Awesome 7 Sharp"; font-style: normal; font-weight: 400; font-display: swap; src: url("//icons.weo.ro/7.0.1/webfonts/fa-sharp-regular-400.woff2") format("woff2"); }
@font-face { font-family: "Font Awesome 7 Sharp"; font-style: normal; font-weight: 900; font-display: swap; src: url("//icons.weo.ro/7.0.1/webfonts/fa-sharp-solid-900.woff2") format("woff2"); } 

@font-face { font-family: "Font Awesome 7 Duotone"; font-style: normal; font-weight: 900; font-display: swap; src: url("//icons.weo.ro/7.0.1/webfonts/fa-duotone-900.woff2") format("woff2"); } 
@font-face { font-family: "Font Awesome 7 Brands"; font-style: normal; font-weight: 400; font-display: swap; src: url("//icons.weo.ro/7.0.1/webfonts/fa-brands-400.woff2") format("woff2"); }




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: #111;
  -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: 100px;
}


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

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


::-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;
}


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; }


h1 { 
  font: normal 400 28px Oswald;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #eee;
  margin: 40px 0 0 0;
}


img.artwork {
  position: relative;
  width: 300px;
  height: auto;
  border: solid 3px #885F00;
  border-radius: 6px;
  margin-top: 20px;
}

img.logo {
  position: relative;
  display: inline-block;
  width: 300px; /* opțional */
  height: auto;
  z-index: 1;
  margin-top: -20px;
  mask-image: linear-gradient(
    to right,
    black 0%,
    black 30%,
    rgba(255, 255, 255, 0.3) 50%,
    black 70%,
    black 100%
  );
  mask-size: 200% 100%;
  mask-position: 130% 0;
  animation: shine 4s linear infinite;
  -webkit-mask-image: linear-gradient(
    to right,
    black 0%,
    black 30%,
    rgba(255, 255, 255, 0.3) 50%,
    black 70%,
    black 100%
  );
  -webkit-mask-size: 200% 100%;
  -webkit-mask-position: 130% 0;
}

@keyframes shine {
  0%   { -webkit-mask-position: 130% 0; mask-position: 130% 0; }
  100% { -webkit-mask-position: -30% 0; mask-position: -30% 0; }
}


p { margin: 0 0 40px 0; }

p.info { 
  font: normal 400 13px Roboto Light;
  margin: 30px 0 20px 0;
  padding: 0 200px 0 200px;
}

p.info b { 
  font: normal 900 22px "Comic Sans MS", cursive, sans-serif;
}

@media only screen and (max-width: 768px) {

body::before { background: url('/media/assets/bg.jpg') top/cover no-repeat; }
.container { padding: 10px; }
p.info { margin: 30px 0 20px 0; padding: 0 20px 0 20px; }
p.info b { font-size: 28px; }
img.sign { width: 280px; margin-top: 0px; }

}

img.sign { width: 260px; filter: invert(100%); transform: rotate(-3deg); margin: 10px 0 40px 0; }



.author {
  width: 100px;
  border-radius: 50%;
  border: solid 2px #222;
  display: block;
}

.thanks {
  margin: 0 0 0 16px;
  font: normal 300 16px/1.3 Roboto;
  color: #aaa;
}

div[style*="display:flex"] {
  align-items: center;
}

@media (max-width: 768px) {
.thanks {  font:normal 300 13px/1.3 Roboto; }
}



/* GALLERY */

.gallery {
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 20px;
  justify-content: center;
  margin: 0 auto;
  margin-top: 20px;
}

.polaroid {
  background: #fff;
  padding: 12px 12px 8px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 3px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align: center;
  width: 220px;
}

/* alternate rotations */
.polaroid:nth-child(odd)  { transform: rotate(-1deg); }
.polaroid:nth-child(even) { transform: rotate(0.5deg); }

.polaroid img {
  display: block;
  width: 100%;
  height: auto;
}


.polaroid .caption {
  font-family: "Comic Sans MS", cursive, sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.1;
  margin-top: 12px;
}

.polaroid:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 16px 32px rgba(0,0,0,.28);
}

/* Mobile: single column full width */
@media (max-width: 768px) {
  .gallery {
  max-width: 320px;
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .polaroid {
    width: 100%;         /* stretch full width */
    max-width: 400px;    /* optional limit so it doesn't get huge */
    margin: 0 auto;      /* keep centered if max-width kicks in */
  }

.polaroid .caption { font-size: 24px; }

}



.btn,
.btn::after {
  display: block;
  min-width: 300px;
  padding: 20px 10px 16px 10px;
  font: normal 900 28px Oswald;
  border: 0;
  color: #000;
  letter-spacing: 1px;
  line-height: 1;
  box-shadow: 6px 0px 0px #000;
  outline: transparent;
  position: relative;
  margin-bottom: 40px;
  cursor: pointer; ;
}

.btn.show, .btn.show::after { background: linear-gradient(45deg, transparent 5%, #ddd 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: normal 400 13px Roboto Thin;
  margin-top: 6px;
  letter-spacing: 1px;
}


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); }

audio::-webkit-media-controls-timeline {
    flex-grow: 1;
    margin-right: 0 !important;
}


audio::-webkit-media-controls-panel {
    justify-content: space-between;
}

audio::-webkit-media-controls-timeline {
    width: 100% !important;
    margin-right: 0 !important;
}

audio::-webkit-media-controls-timeline-container,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-seek-back-button,
audio::-webkit-media-controls-seek-forward-button,
audio::-webkit-media-controls-toggle-closed-captions-button,
audio::-webkit-media-controls-fullscreen-button,
audio::-webkit-media-controls-overflow-button {
    display: none !important;
}



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

#player { width: 100%; }

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



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


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


tr.playing {
    background: #000;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 20px #444;
}

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 12px Roboto Regular; }
td.title span.time {
  font: normal 400 11.5px Roboto Light; 
  color: #666;
  display: inline-block;
  transform: translateY(-1px);
  margin-left: 4px;
  position: relative;
}

td.title span.time::before {
  content: "•";
  color: #666;
  margin-right: 4px;
  font-size: 11px;
  position: relative;
  top: -1px;
}


td.title .note {
  display: block;
  max-height: 0;
  opacity: 0;
  color: #999;
  font: normal 400 11px Roboto Light;
  line-height: 16px;
  overflow: hidden;
  transform: translateY(-6px);
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  transition: max-height 1s ease-in-out, opacity 1s ease-in-out, margin-top 1s ease-in-out, padding-top 1s ease-in-out,
                   transform 1s ease-in-out, border-top-color 1s ease-in-out;
}

td.title.playing .note,
tr.playing td.title .note {
  max-height: 200px;
  opacity: 1;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  transform: translateY(0);
  transition-duration: 1.4s;
}



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; }


.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;
}


@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 glitch-rgb {
  0%, 24% {
    filter: none;
  }
  25% {
    filter: drop-shadow(-2px 0 red) drop-shadow(2px 0 cyan);
  }
  28% {
    filter: drop-shadow(2px 0 blue) drop-shadow(-2px 0 green);
  }
  31%, 100% {
    filter: none;
  }
}



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