@import url('https://fonts.googleapis.com/css2?family=Mozilla+Text&display=swap');

body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    padding: 2rem;
}

fttl-yt-player {
    font-display: fallback;
    font-family: "Mozilla Text", "Roboto", sans-serif;
    width: min(100%, 800px);

    &:nth-of-type(3) {
        aspect-ratio: 3/2;

        &::part(progress-bar)::before {
            background-color: #fff;
        }

        &::part(progress-bar)::after {
            background-color: #ffc400;
        }
    }
    
    &:nth-of-type(4) {
        &::part(progress-bar)::before {
            background-color: #ffc400;
        }
    
        &::part(progress-bar)::after {
            background-color: #2cbaa9;
        }

        &::part(current-time) {
            background-color: #2cbaa9;
            color: #000;
        }

        &::part(sound-button) {
            background-color: transparent;
            color: #000;
            padding: 0;
            transition: color 1s ease;
        }

        &::part(sound-button):hover {
            border: none;
            box-shadow: none;
            color: #2cbaa9;
        }
    }
}