@keyframes loading {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
.filters {
    margin-top: 1rem;
}
.ranking {
    display: flex;
    flex-direction: row;
}
.episode-about {
    display: flex;
    flex-direction: row;
}
.expert:not(:last-child) {
    margin: 0 0 1.5rem 0;
}
.ranking {
    margin-top: var(--padding);
}
#loading {
    display: flex;
    justify-content: center;
    padding: 4rem;
    position: absolute;
    width: 100%;
    top: 3rem;
    left: 0;
    transition: opacity 500ms;
}
#loading img {
    width: 100px;
    display: block;
    animation: loading 3000ms infinite linear;
}
input[type="text"], select {
    padding: 3px;
    width: 200px;
}
.buttons--bottom {
    margin: 1rem 0;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

@media screen and (max-width: 776px) {
    .episode-about, .ranking {
        flex-direction: column;
    }
    .ranking {
        margin-top: 3rem;
    }
    .ranking p {
        margin-left: 0;
        margin-top: 0.5rem;
    }
    .filters {
        width: 100%;
        margin-top: 10rem;
    }
    .filters .flex-column {
        width: 100%;
    }
    input[type="text"], select {
        width: 100%;
    }
    #loading {
        top: 4rem;
    }
    #loading img {
        width: 6rem;
    }
}