Radio/style.css

/*Fonts*/
@font-face {
    font-family: "Futura";
    src: url("./Fonts/Futura.ttf") format("truetype";)
}

@font-face {
    font-family: "Ubuntu";
    src: url("./Fonts/Ubuntu.ttf") format("truetype");
}


/*Basic Site CSS*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding-top: 10px;
    display: grid;
    place-items: center;
    scroll-behavior: smooth;
    text-align: center;
    position: absolute;
    margin-top: 10px;
    font-family: "Ubuntu";
    width: 100%;
}

h2 {
    font-size: 25pt;
    z-index: 1;
    margin-top: 5pt;
}

.title{
    font-size: 12vh;
    z-index: 1;
    font-family: "Futura";
}

.card {
    width: 80vw;
    height: auto;
    border-radius: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 3vh;
}


/*Loading Animation*/
@keyframes slideAndFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*Knob*/  
.knob-surround {
    position: relative;
    width: 25vh;
    height: 25vh;
    border-radius: 50%;
    margin: 1em auto;
}
.knob {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: rotate(0deg);
    z-index: 10;
}
.knob:before {
    content: "";
    position: absolute;
    bottom: 19%;
    left: 19%;
    width: 3%;
    height: 3%;
    background-color: #ff5a99;
    border-radius: 50%;
}
.min,
.max {
    display: block;
    font-family: "Ubuntu";
    text-transform: uppercase;
    font-size: 75%;
    position: absolute;
    opacity: 0.50;
}
.min {
    bottom: 0px;
    left: 0px;
}
.max {
    bottom: 0px;
    right: 0px;
}
.tick {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
    overflow: visible;
}
.tick:after {
    content: "";
    width: 0.08em;
    height: 0.6em;
    position: absolute;
    top: -20px;
    left: 50%;
    transition: all 1000ms ease-in-out;
}
.activetick:after {
    top: -25px;
    transition: all 1000ms ease-in-out;
}

.volume-knob-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1em;
}

.volume-value {
    margin-top: 2.5px;
    font-family: "Ubuntu";
    font-size: 15px;
    color: #ff5a99;
    opacity: 0.50;
}


/*Song Info*/
.now-playing {
    text-align: center;
    margin-top: 2rem;
    padding: 1rem;
    border-radius: 30px;
}

.song-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.artist {
    font-size: 1rem;
}

footer {
    font-size: 30px;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5vh;
    text-align: center;
    color: white;
    text-align: center;
}

footer img {
    height: 30px;
}

/*Light Color Themes*/
@media (prefers-color-scheme: light) {
    .title{
        color: #ff5a99;
    }

    .song-title {
        color: #060606;
    }

    h2 {
        color: #ff5a99;
    }

    .neomorphicbg{
        background: #ffa7c7;
        box-shadow: -5px -5px 20px rgb(254,254,255, 0.69),
            2px 2px 20px rgb(255,90,153)
    }

    .neomorphic{
        background: #ffa7c7;
        box-shadow: -5px -5px 20px rgb(254,254,255, 0.69),
                    2px 2px 20px rgb(255,90,153)
    }

    .neomorphic-i{
        background: #ffa7c7;
        box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset,
                    1px 1px 15px rgb(255,90,153) inset
    } 

    .neomorphic2{
        background: #ffa7c7;
        transition: all 0.1s ease-in-out;
        transform: scale(1);
        cursor: pointer;
        box-shadow: -5px -5px 20px rgba(254,254,255,0.5),
                    2px 2px 20px rgb(255,90,153)
    }

    .neomorphic2:hover{
        background: #ffa7c7;
        transform: scale(0.98);
        box-shadow: -5px -5px 20px rgba(254, 254, 255, 0),
                    2px 2px 20px rgba(255, 90, 153, 0)
    }

    .neomorphic2:active{
        background: #ffa7c7;
        transform: scale(0.96);
        box-shadow: -3px -3px 15px rgba(254, 254, 255, 0.69) inset,
                    1px 1px 15px rgb(255,90,153) inset
    }

    .artist {
        color: #ff5a99;
        font-size: 1rem;
    }

    .cards2 h2 {
        color: #060606;
    }

    .min,
    .max {
        color: #ff5a99;
    }

    .tick:after {
    background-color: #ff5a9980;
    }
    .activetick:after {
        background-color: #fff3f9;
        box-shadow: 0 0 0.3em 0.08em #fff3f9;
    }
}


/*Dark Color Themes*/
@media (prefers-color-scheme: dark) {
    :root{
        background-color: #060606;
    }

    .title{
        color: #00d791;
    }

    .song-title {
        color: #00d791;
    }

    h2 {
        color: #55052c;
    }

    .min,
    .max {
        color: #00d791;
    }

    .artist {
        color: #060606;
        font-size: 1rem;
    }

    .neomorphicbg{
        background: #55052c;
        box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69),
                    2px 2px 20px rgba(0, 215, 143, 0.425)
    }

    .neomorphic{
        background: #55052c;
        box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.69),
                    2px 2px 20px rgba(0, 215, 143, 0.425)
    }

    .neomorphic-i{
        background: #55052c;
        box-shadow: -3px -3px 15px rgba(1, 1, 0, 0.8) inset,
                    2px 2px 20px rgba(0, 215, 143, 0.5) inset
    } 

    .neomorphic2{
        background: #55052c;
        box-shadow: -5px -5px 20px rgba(1, 1, 0, 0.5),
                    2px 2px 20px rgba(0, 215, 143, 0.534)
    }

    .tick:after {
        background-color: #06060680;
    }

    .activetick:after {
    background-color: #00d791;;
    box-shadow: 0 0 0.3em 0.08em #00d791;
    }
}

        header img {
            height: 10vh;
            width: auto;
            align-content: baseline;
        }

        #cover-container {
            margin: 20px auto;
            max-width: 40vh;
            position: relative;
        }
        .image-wrapper {
            width: 40vh;
            height: 40vh;
            border-radius: 30px;
            overflow: hidden;
            position: relative;
            background-color: #e0e0e000;
        }
        #cover-image, #temp-image, #placeholder-image {
            width: 40vh;
            height: 40vh;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity 0.3s ease;
        }            
        #placeholder-image {
            width: 35vh;
            height: 35vh;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity 0.3s ease;
        }
        #temp-image {
            opacity: 0;
            z-index: 1;
        }
        #cover-image {
            z-index: 2;
        }
        #placeholder-image {
            z-index: 3;
            opacity: 1;
            margin: 2.5vh;
        }


.container {
    text-align: center;
}
.child {
    display: inline-block;
    padding: 1rem 1rem;
    vertical-align: middle;
}

.child2 {
    z-index: -20;
    display: inline-block;
    padding: 1rem 1rem;
    vertical-align: middle;
}

@media only screen and (orientation: portrait) {
    
    h2 {
            display: none;
    }
    
    .image-wrapper {
        display: none;
    }
    .stats {
        display: none;
    }
    .card {
        width: 100vw;
         height: auto;
        border-radius: 30px 30px 0 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: 0px;
    }
    .now-playing {
        text-align: center;
        margin-top: 2rem;
        padding: 1rem;
        width: 80vw;
        border-radius: 30px;
    }
    footer {
        height: 0px;
    }
    h1 title {
        display: none;
    }
    .child2 {
    z-index: -20;
    display: inline-block;
    vertical-align: middle;
    }

    .knob-surround {
    position: relative;
    width: 35vh;
    height: 35vh;
    border-radius: 50%;
    margin: 1em auto;
    }
    .knob {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        transform: rotate(0deg);
        z-index: 10;
    }
    .knob:before {
        content: "";
        position: absolute;
        bottom: 19%;
        left: 19%;
        width: 3%;
        height: 3%;
        background-color: #ff5a99;
        border-radius: 50%;
    }
    .min,
    .max {
        display: block;
        font-family: "Ubuntu";
        text-transform: uppercase;
        font-size: 75%;
        position: absolute;
        opacity: 0.50;
    }
    .min {
        bottom: 0px;
        left: 0px;
    }
    .max {
        bottom: 0px;
        right: 0px;
    }
    .tick {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 5;
        overflow: visible;
    }
    .tick:after {
        content: "";
        width: 0.08em;
        height: 0.6em;
        position: absolute;
        top: -20px;
        left: 50%;
        transition: all 1000ms ease-in-out;
    }
    .activetick:after {
        top: -25px;
        transition: all 1000ms ease-in-out;
    }

    .volume-knob-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 1em;
    }

    .volume-value {
            margin-top: 2.5px;
            font-family: "Ubuntu";
            font-size: 15px;
            color: #ff5a99;
            opacity: 0.50;
    }
    .cif {
        display: none;
    }    
    .neomorphicbg{
        overflow: hidden;
    }
}

@media only screen and (max-height: 450px) {
    body{
        background-color: #55052c;
    }
    h2 {
        display: none;
    }
    img {
        display: none;
    }
    .title {
        display: none;
    }
    .image-wrapper {
        display: none;
    }
    .stats {
        display: none;
    }
    .card {
        width: 100vw;
        height: 100vh;
        border-radius: 0 0 0 0;
    }
    .now-playing {
        display: none;
    }
    h1 title {
        display: none;
    }
    .child2 {
    z-index: -20;
    display: inline-block;
    vertical-align: middle;
    }

    .knob-surround {
    position: relative;
    width: 75vh;
    height: 75vh;
    border-radius: 50%;
    }
    .knob {
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        transform: rotate(0deg);
        z-index: 10;
    }
    .knob:before {
        content: "";
        position: absolute;
        bottom: 19%;
        left: 19%;
        width: 3%;
        height: 3%;
        background-color: #ff5a99;
        border-radius: 50%;
    }
    .min,
    .max {
        display: block;
        font-family: "Ubuntu";
        text-transform: uppercase;
        font-size: 75%;
        position: absolute;
        opacity: 0.50;
    }
    .min {
        bottom: 0px;
        left: 0px;
    }
    .max {
        bottom: 0px;
        right: 0px;
    }
    .tick {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 5;
        overflow: visible;
    }
    .tick:after {
        content: "";
        width: 0.08em;
        height: 0.6em;
        position: absolute;
        top: -20px;
        left: 50%;
        transition: all 1000ms ease-in-out;
    }
    .activetick:after {
        top: -25px;
        transition: all 1000ms ease-in-out;
    }

    .volume-knob-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 1em;
    }

    .volume-value {
            margin-top: 2.5px;
            font-family: "Ubuntu";
            font-size: 15px;
            color: #ff5a99;
            opacity: 0.50;
    }
    .cif {
        display: none;
    }    
    .neomorphicbg{
        overflow: hidden;
    }
}