:root {
  --marinkino-gray: #505c6d;
  --marinkino-orange: #ef9918;
  --marinkino-blue: #0db2e0;
  --marinkino-red: #ee4a43;

  --temno-zelena: #198754;
  --zelena: #86af49;
  --rumena: #ffcc5c;

  --vijolicna: color-mix(in srgb, var(--marinkino-red), var(--marinkino-blue));
  --temno-rdeca: color-mix(in srgb, var(--marinkino-red), black 30%);
  --temno-vijolicna: color-mix(in srgb, var(--vijolicna), black 30%);
  --svetlo-oranzna: color-mix(in srgb, var(--marinkino-orange), white 70%);
  --gorcicna: color-mix(in srgb, var(--marinkino-orange), var(--marinkino-gray) 20%);
  --marelicna: color-mix(in srgb, var(--marinkino-red) 30%, var(--rumena));
  --rdeckasto-rjava: color-mix(in srgb, var(--marinkino-red) 50%, var(--gorcicna));

  --barva-komedija: var(--rumena);
  --barva-drama: var(--vijolicna);
  --barva-romantika: var(--marinkino-red);
  --barva-pustolovscina: var(--zelena);
  --barva-druzinski: var(--marinkino-blue);
  --barva-akcija: var(--gorcicna);
  --barva-fantazijski: var(--marelicna);
  --barva-drugi-zanri: var(--rdeckasto-rjava);
  
  --movie-page-background: linear-gradient(
    135deg, 
    color-mix(in srgb, var(--marinkino-orange), white 70%) 0%, 
    color-mix(in srgb, var(--marinkino-red), white 70%) 100%);
  --oranzno-rdeca-background: linear-gradient(
    135deg, 
    color-mix(in srgb, var(--marinkino-red), white 20%) 0%, 
    color-mix(in srgb, var(--marinkino-orange), white 20%) 100%);
  --modro-rdeca-background: linear-gradient(
    135deg, 
    color-mix(in srgb, var(--marinkino-blue), white 20%) 0%, 
    color-mix(in srgb, var(--marinkino-red), white 20%) 100%);
  --music-background: linear-gradient(
    135deg, 
    color-mix(in srgb, var(--marinkino-blue), var(--marinkino-gray) 20%) 0%, 
    color-mix(in srgb, var(--vijolicna), var(--marinkino-gray) 70%) 100%);
  --music-neg-background: linear-gradient(
    135deg, 
    color-mix(in srgb, var(--vijolicna), var(--marinkino-gray) 70%) 0%, 
    color-mix(in srgb, var(--marinkino-blue), var(--marinkino-gray) 20%) 100%);
  --zelena-background: linear-gradient(135deg, var(--temno-zelena) 0%, white 100%);
  --oranzno-zelena-background: linear-gradient(135deg, var(--svetlo-oranzna) 0%, var(--zelena) 100%);
}

*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    color: black;
    width: 100vw;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    overflow-x: hidden;
}
.flash-message {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.flash-message.fade-out {
  opacity: 0;
  transform: translateY(-10px);
}

/* ===== ANIMATIONS ===== */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}