@import url('fonts.css');

.material-icons {
    font-family: 'Material Icons', sans-serif;
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}
.h6-icon {
    line-height: 1.2;
    font-size: 1rem;
}

:root {
    color-scheme: light dark; /* both supported */
}

body {
    font-family: 'Set Classic', sans-serif;
    background: #e8e8e8;
    transition: all .2s;
    Transition-Timing-Function: Cubic-Bezier (0.27, 0.05, 0.4, 0.95);
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'FiraGO', sans-serif;
    letter-spacing: .03rem;
    font-weight: 600;
    text-transform: uppercase;
}
.head-logo {
    height: 75px;
    margin-top: .5rem;
    margin-bottom: .75rem;
}
.content-area{
    align-self: center;
    align-content: center;
    align-items: center;
    alignment: center;
}
.now-playing, .now-onair {
    color: #ff120d;
    vertical-align: middle;
}
.now-playing.icon{
    vertical-align: middle;
}
.card {
    background: #d8d8d8 !important;
    color: black;
    border-radius: 3px;
}
.playouttime{
    color: #666666;
}
.artistname {
    line-height: 1;
    margin-bottom: .25rem;
}
.songtitle.now{
    font-size: larger;
}
.logo-font{
    font-family: 'Coolvetica Rg', sans-serif;
    letter-spacing: .1rem;
    font-weight: normal;
}
#current-show-name{
    line-height: 1;
    margin-bottom: .25rem;
}
#current-show-time {
    color: #666666;
}
#current-show-desc{
    margin-bottom: .5rem;
}
.btn-group.funfm{
    box-shadow: none;
    font-weight: 600;
}
.btn-funfm {
    background: #ffcc00;
    color: black;
    box-shadow: none;
    font-weight: 500;
}
.btn-funfm:hover, .btn-funfm:active, .btn-funfm:focus{
    background: #ffe161;
    color: black;
    font-weight: 600;
}
.footer-logo {
    height: 75px;
}
.footer-text {
    text-transform: uppercase;
    font-size: 1.02rem;
}
.now-playing-cover {
    width: 125px;
    height: 125px;
    overflow: hidden;
    border-radius: 3px;
}
.btn-whatsapp {
    background: #25D366;
}
.btn-whatsapp:hover, .btn-whatsapp:active, .btn-whatsapp:focus{
    background: #69DB93;
}

.btn-fbmsg {
    background: #0078ff;
}
.btn-fbmsg:hover, .btn-fbmsg:active, .btn-fbmsg:focus{
    background: #4DA0FF;
}
.btn-twitter {
    background: #1da1f2;
}
.btn-twitter:hover, .btn-twitter:active, .btn-twitter:focus{
    background: #67BEF4;
}
.btn-instagram {
    background: radial-gradient(circle farthest-corner at 35% 90%,#fec564,transparent 50%),radial-gradient(circle farthest-corner at 0 140%,#fec564,transparent 50%),radial-gradient(ellipse farthest-corner at 0 -25%,#5258cf,transparent 50%),radial-gradient(ellipse farthest-corner at 20% -50%,#5258cf,transparent 50%),radial-gradient(ellipse farthest-corner at 100% 0,#893dc2,transparent 50%),radial-gradient(ellipse farthest-corner at 60% -20%,#893dc2,transparent 50%),radial-gradient(ellipse farthest-corner at 100% 100%,#d9317a,transparent),linear-gradient(#6559ca,#bc318f 30%,#e33f5f 50%,#f77638 70%,#fec66d 100%);
}
.btn-instagram:hover, .btn-instagram:active, .btn-instagram:focus{
    background: radial-gradient(circle farthest-corner at 35% 90%,#fec564,transparent 50%),radial-gradient(circle farthest-corner at 0 140%,#fec564,transparent 50%),radial-gradient(ellipse farthest-corner at 0 -25%,#5258cf,transparent 50%),radial-gradient(ellipse farthest-corner at 20% -50%,#5258cf,transparent 50%),radial-gradient(ellipse farthest-corner at 100% 0,#893dc2,transparent 50%),radial-gradient(ellipse farthest-corner at 60% -20%,#893dc2,transparent 50%),radial-gradient(ellipse farthest-corner at 100% 100%,#d9317a,transparent),linear-gradient(#6559ca,#bc318f 30%,#e33f5f 50%,#f77638 70%,#fec66d 100%);
    font-size: larger;
}
.btn-contact {
    font-size: large;
    transition: all .5s ease;
}
.form-control, .form-outline {
    Transition-Timing-Function: Cubic-Bezier (0.27, 0.05, 0.4, 0.95);
}


/*Animated EQ*/
i-amp-audio-eq {
    align-items: flex-end;
    display: inline-flex;
    width: 20px;
    height: 12px;
    overflow: hidden;
    opacity: 0.8;
}

i-amp-audio-eq .-amp-audio-eq-col {
    flex: 1;
    position: relative;
    height: 100%;
    margin-right: 1px;
}

i-amp-audio-eq .-amp-audio-eq-col div {
    animation-name: amp-audio-eq-animation;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    background-color: #ff120d;
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    will-change: transform;
}

.-amp-audio-eq-1-1 {
    animation-duration: 0.25s;
}

.-amp-audio-eq-1-2 {
    animation-duration: 0.45s;
}

.-amp-audio-eq-2-1 {
    animation-duration: 0.5s;
}

.-amp-audio-eq-2-2 {
    animation-duration: 0.4s;
}

.-amp-audio-eq-3-1 {
    animation-duration: 0.3s;
}

.-amp-audio-eq-3-2 {
    animation-duration: 0.35s;
}

.-amp-audio-eq-4-1 {
    animation-duration: 0.4s;
}

.-amp-audio-eq-4-2 {
    animation-duration: 0.25s;
}

@keyframes amp-audio-eq-animation {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}



@media screen and (prefers-color-scheme: dark) {
    body {
        background-color: #34393f;
        color: white;
    }
    footer {
        background: #666;
    }
    .card {
        background: #666 !important;
        color: white;
        border-radius: 3px;
    }
    .playouttime, #current-show-time{
        color: #e8e8e8;
    }
    img.head-logo
    {
        content: url("https://static.tbrnet.de/images/funfm/Logo/Logo%20White-noborder.svg");
    }
    img.footer-logo {
        content: url("https://static.tbrnet.de/images/funfm/Logo/Logo%20Full-White.svg");
    }
    .now-playing, .now-onair{
        color: #FF5C59;
    }
    i-amp-audio-eq .-amp-audio-eq-col div {
        background: #FF5C59;
    }
}

/* X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap

Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .footer-logo {
        height: 25px;
    }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .footer-logo {
        height: 30px;
    }
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .footer-logo {
        height: 50px;
    }
}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .footer-logo {
        height: 75px;
    }
}

/*XX-Large devices (larger desktops, 1400px and up0)*/
@media (min-width: 1400px) {
    .footer-logo {
        height: 75px;
    }
}