:root {
    /* Computer, please use fancy font we are importing.  If not available, use helvetica, arial, or whatever sans serif you have. */
    /* Set the default font size.  Everything else is proportional to this. */
    --body-text_size: 25px;
    --body-text_size-mobile: 4vw; /* vw is the width of the screen.  So each character is roughly 4% of the width of the screen. */
    --title-text_size: 1.4em; /* 1em is equal to whatever you set the body-text_size.  So our headings are 1.4 times larger than the body.*/
    --byline-text_size: 0.75em;
    --edit-page-height: calc(100% -6rem);
    --margin-from-top: calc(100vh / 8); /* setting a margin property that's proporitonal to the browser size.  handy! */
    --gradient-display: ;
    --bg-size: auto;
    --bg-position: 0% 0%;
    --bg-repeat: repeat;
    --background-color: #eef6f0;
    --primary-color: orange;
    --accent-color: blue;
    /* --accent-color: #679e6d; */
    --gradient-top: rgba(176, 71, 144, 0.8);
    --gradient-bottom: blue;
    --gradient-opacity: 0.8;
    --gradient-display: linear-gradient(var(--gradient-top), var(--gradient-bottom));
    --theme: "aliens";
}
body {
    background: url('/aesthetic/assets/electricity.jpg');
    /* background-size: 300px; */
    background-repeat: repeat;
}

.hidden {
    display: none;
}
header figure {
    max-width: 45vw;
}

h2 {
    font-size: 3.5rem;
    max-width: 34rem;
    color: orange;
    margin-bottom: 2.5rem;
}
@media(max-width: 667px) {
    h2 {
        font-size: 2.5rem;
        max-width: 20rem;
    }
}



div.player {
    position: relative;
    max-width: calc(300px * 1.25);
    height: calc(450px * 1.5);
    display: flex;
    flex-flow: column;
    border-radius: 5px;
    z-index: 1;
    margin: auto;
    margin-top: calc(100vh / 20);
    color: var(--primary-color);
}

div.display {
    border: 10px solid var(--primary-color);
    border-top: none;
    height: 45%;
    max-width: 100%;
    background: var(--gradient-display);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

div.time {
    font-size: 3rem;
    font-weight: 300;
    display: flex;
    gap: calc(1rem / 2);
    justify-content: center;
    align-items: center;
}

div.controls {
    width: 100%;
    height: 25%;
    background: var(--primary-color);
    margin: auto;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

progress {
    -webkit-appearance: none;
    appearance: none;
    height: 0.45em;
    width: 75%;
    margin: 0.5em;
    position: relative;
}

progress::-webkit-progress-bar {
    background: transparent;
    border: 1px solid var(--primary-color);
    position: relative;
    border-radius: 2px;
}

progress::-webkit-progress-value {
    background: var(--primary-color);
}
div.flair {
    height: 15%;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--primary-color);
}

div.marquee {
    overflow: hidden;
    position: relative;
    height: 5rem;
    width: 100%;
}
div.marquee p {
    font-size: 2.5rem;
    position: absolute;
    width: 150%;
    height: 100%;
    margin: 0;
    line-height: 4rem;
    text-align: center;
    /* Starting position */
    -moz-transform:translateX(60%);
    -webkit-transform:translateX(60%);
    transform:translateX(60%);
    /* Apply animation to this element */
    -moz-animation: scroll-left 10s linear infinite;
    -webkit-animation: scroll-left 10s linear infinite;
    animation: scroll-left 10s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
    0%   { -moz-transform: translateX(60%); }
    100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
    0%   { -webkit-transform: translateX(60%); }
    100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
    0%   {
        -moz-transform: translateX(60%); /* Browser bug fix */
        -webkit-transform: translateX(60%); /* Browser bug fix */
        transform: translateX(60%);
    }
    100% {
        -moz-transform: translateX(-100%); /* Browser bug fix */
        -webkit-transform: translateX(-100%); /* Browser bug fix */
        transform: translateX(-100%);
    }
}

div.top-bar {
    width: 100%;
    padding: 0;
    margin: 0;
    height: 25px;
    border-radius: 5px 5px 0 0;
    background: var(--primary-color);
    display: flex;
    flex-flow: row-reverse;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

button.ctrl-btn {
    border: none;
    background: none;
}

input.progress-slider {
    width: 100%;
}



/* button.ctrl-btn.pause svg { */
/*     margin-left: 0.5em; */
/*     margin-right: 0.5em; */
/*   } */