/* FONTS */

@font-face {
    font-family: 'Rubik';
    src: url('../ttf/Rubik.ttf') format("truetype");
    font-weight: 1 999;
}

@font-face {
    font-family: 'Rubik';
    src: url('../ttf/Rubik-Italic.ttf') format("truetype");
    font-weight: 1 999;
    font-style: italic;
}

/* HELPERS */

.opacity-90 {
    opacity: 0.9;
}

/* SITE */

#player, #sharer {
    width: 478px;
}

#carta {
    z-index: 200;
}

/* ANIMATIONS */

@keyframes turn {
    from { transform: rotateZ(0); }
    to { transform: rotateZ(360deg); }
}

/* PRE */

section {
    background-color: #000;
    overflow: hidden;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: opacity 5s ease;
    opacity: 0;
}

section a {
    transition: transform 5s ease;
    transform-origin: center center;
    transform: scale(2);
}

section img {
    animation: turn 600s linear 0s infinite both;
    animation-play-state: paused;
    max-height: 100vh;
}

section#discus-aureus img {
    animation-duration: 3.75s;
    animation-delay: 5s;
}

/* PROC */

section:target {
    opacity: 1;
    z-index: 100;
}

section:target a {
    transform: scale(1);
}

section:target img {
    animation-play-state: running;
}

/* POST */

section:target ~ section {
    opacity: 0;
}

section:target ~ section a {
    transform: scale(0.25);
}

section:target ~ section img {
    animation-play-state: paused;
}

/* BROWSER */

audio::-webkit-media-controls-enclosure {
    border-radius: 0;
}

/* BOOTSTRAP */

.carousel-item {
    transition-duration: 1s;
    transition-timing-function: linear;
}

/* MEDIA */

.dim {
    display: none !important;
}

@media (prefers-color-scheme: dark) {
    .dim {
        display: block !important;
    }
    .lit {
        display: none !important;
    }
}

@media (prefers-color-scheme: light) {
    .dim {
        display: none;
    }
    .lit {
        display: block;
    }
}