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

body {
    font-family: "Rubik", serif;
}
.text-white {
    color: white !important;
}
.underline {
    text-decoration: underline !important;
}


.fixed {
    position: fixed;
}

.wh-player {
    width: 60vw;
    height: 60vw;
}

.w-player {
    width: 60vw;
}

.bg-basicbg {
    background: linear-gradient(0.15turn, #eb232a, #fcd209);
    background-repeat: no-repeat !important;
}

@media (min-width: 640px) {
    .mobileml-0 {
        margin-left: 0vw !important;
    }
}

@media (min-width: 1024px) {
    .promo-image-container {
        height: 50vh;
    }
}

@media (min-width: 1024px) {
    
    .wh-player {
        width: 20vw;
        height: 20vw;
    }
    .w-player {
        width: 20vw;
    }
}


@media (max-width: 767px) {
    .promo-image-container {
        background-position: right center !important;
    }
}

/* Apply the background gradient */
#player-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
        #eb232a 0%, 
        #f05d1f 33%,
        #f69714 66%,
        #fcd209 100%);
    z-index: -2; /* Behind everything */
}


/* Apply the image over the gradient */
#player-image {
    background: url('/uploads/WDNR_512px_white-v2.png') center/cover;
    position: relative;
}