body {
    background-image: url(https://i.imgur.com/vp16odi.jpeg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    margin: 0;
    background-attachment: fixed;
    color: azure;
    font-family: "Montserrat";
}

.light-mode {
    color: black;
    background-image: url(https://i.imgur.com/e5ipEbJ.jpg);
    width: 100%;
    height: max-content;
    background-repeat: no-repeat;
    background-position: center center;
    backface-visibility: hidden;
    animation: slidebg 20s linear infinite 0s;
    animation-timing-function: step-end;
}

@keyframes slidebg {
    0% {

        background-image: url(https://i.imgur.com/e5ipEbJ.jpg);
    }

    25% {
        background-image: url(https://i.imgur.com/rT7v1vK.jpeg);
    }

    50% {
        background-image: url(https://i.imgur.com/U3MMfEZ.jpg);
    }

    75% {

        background-image: url(https://i.imgur.com/TwGOieC.jpeg);
    }

    100% {

        background-image: url(https://i.imgur.com/vahcHUI.jpg);
    }

}

.stop-slide-light {

    animation-play-state: paused;

}

#logo_top_img {
    height:90px;
}

.topcontainer {
    display: flex;
    display: inline-block;
}

.topnav {
    background-color: #001d74;
    display: flex;
    justify-content: center;
    align-items: center;
    width: min-content;
    border: 2px solid red;
    border-radius: 25px;
    padding: 20px;
    box-shadow: 0 0 5px grey, 0 0 10px red;
    height: 48.8px;
    width: 484.325px;
}

.topnav a {
    text-align: center;
    vertical-align: middle;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;

}

.topnav button {
    background-color: transparent;
    border: 0px solid gray;
    border-radius: 80px;
    cursor: pointer;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
    font-size: 19px;
}

.topnav img {
    width: 40px;
}

.topnav img:hover {
    width: 50px;
}

.topnav #stopbutton:hover {
    font-size: 15px;
    font-weight: bolder;
    width: max-content;
    padding: 9px;    
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #3c2b99;
    color: white;
}

#stopbutton {
    color: #f2f2f2;
    font-family: "Montserrat";
}


#search_bar input[type="text"] {
    padding-right: 35px;
}

#searchbtn {
    border: none;
    margin-left: -35px;
}
#searchbtn:hover {
    cursor: pointer;
}

#radiostations button {
    
    background-color: transparent;
    border: 0px solid gray;
    cursor: pointer;
}

#radiobtn {
    border: 3px solid black;
    border-radius: 40px;
    width: 200px;
    max-height: 100px;
margin-left: 20px;
    background-color: #FFFFFD;

}

#radiostations img {
    border-radius: 40px;
    max-width: 200px;
    max-height: 100px;
    background-color: #FFFFFD;
}


#search_bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    margin-top: 30px;
}

#search_bar input {

font-size: 20px;
width: 400px;
color: #848484;
border: none;
vertical-align: middle;
border-radius: 10px;
}

#search_bar button {
    background-color: transparent;
    border: none;
}

#search_bar img {
    border:none;
    border-radius: 50%;
}



#introcontainer {
    font-size: 29px;
    background-color: white;
    color: black;
    opacity: 60%;
    width: 90%;
    border-radius: 20px;
    box-shadow: 0 0 5px grey, 0 0 25px grey, 0 0 50px grey, 0 0 200px grey;
    font-weight: bold;
}

#trendtopics h3,
ul {

    padding: 0px 3em 0 2em;
}

#trendtopics li {

    margin-bottom: 5px;
    cursor: pointer;
    list-style-type:none;
}

#trendtopics li:hover {

    font-size: 20px;

}

#trendtopics {
    width: fit-content;
    background-color: #001d74;
    font-weight: bolder;
    border: grey 2px solid;
    box-shadow: 0 0 5px grey;
    color: white;
    border-radius: 20px;
    overflow: hidden;
    margin-top: 30px;
    margin-left: 15px;
}


#videoplayer {
    height: 250px;
    width: 20%;
    background-color: black;
    background-position: center center;
}



#video {
    margin-top: 18px;
    border: 2px solid lavender;
    border-radius: 40px;
    box-shadow: 0 0 5px grey, 0 0 25px grey;
    overflow: hidden;
    display: none;
}

#playerr {
    margin-top: 18px;
    border: 2px solid lavender;
    border-radius: 40px;
    box-shadow: 0 0 5px grey, 0 0 25px grey;
    overflow: hidden;
}

#speedcont {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    background-color: lavender;
    width: max-content;
    height: max-content;
    border-radius: 20px;
    border: black 4px solid;
}

#speedcont button {
    background-color: lavender;
    border: 0px solid gray;
    border-radius: 50%;
    cursor: pointer;
}

#speedcont img {
    height: 30px;
    object-fit: cover;
}

#currspeed {
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px 15px 10px 15px;
}


#midmaincont {
    display: flex;
}

#searchcontainer {
    height: 50px;
    max-width: 50%;
    padding: 3%;
    width: 40%;
}

#currentplay {
    align-items: flex-end;
    width: 50%;
}

.gsc-result-info-container {
    display: none;
}


#video {
    margin-right: 10%;
    margin-top: 7%;
}

#rightmain {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
    margin-top: 5%;
}

#search_bar {
    width: 80%;
}

#videoplayer {
    height: 250px;
    width: 20%;
    background-color: black;
    background-position: center center;
}

#video {
    margin-top: 40px;
    border: 2px solid lavender;
    border-radius: 40px;
    box-shadow: 0 0 5px grey, 0 0 25px grey;
    overflow: hidden;
    display: none;
}

#playerr {
    margin-top: 40px;
    border: 2px solid lavender;
    border-radius: 40px;
    box-shadow: 0 0 5px grey, 0 0 25px grey;
    overflow: hidden;
}

#overlay {
    display: none;
}

.gsc-control-cse,
.gsc-control-cse-en {
    border: 3px solid blue !important;
    border-radius: 30px;
    overflow: hidden;
}

#txtload {
    display: none;
}

#closebtn button {
    background-color: transparent;
    border: 0px solid gray;
    cursor: pointer;
}

#reopensearch {
    display: none;
    margin-top: 5px;
    text-align: center;
}

#reopensearch button {
    background-color: transparent;
    border: 0px solid gray;
    border-radius: 80px;
    color: #f2f2f2;
    font-family: "Montserrat";
    cursor: pointer;
}

#reopensearch button:hover {
    font-size: 15px;
    font-weight: bolder;
    width: max-content;
    padding: 9px;
    background-color: #ddd;
    color: black;
}

#speedcont {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    background-color: lavender;
    width: max-content;
    height: max-content;
    border-radius: 20px;
    border: black 4px solid;
}

#speedcont button {
    background-color: lavender;
    border: 0px solid gray;
    border-radius: 50%;
    cursor: pointer;
}

#speedcont img {
    height: 30px;
    object-fit: cover;
}

#currspeed {
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px 15px 10px 15px;
}

#audioplayer {
    height: 250px;
    width: 20%;
    position: absolute;
    background-color: black;
    background-position: center center;
}

#radiostations {
    float: left;
}

#audplayer2 {
    display: none;
}

#complayer {
    margin-top: 20px;
    margin-bottom: 10px;
}

#currentplay {
    float: right; 
    margin-right: 2%;
    display: none;
}


@media screen and (max-width:950px) {

    body {
        background-size: cover;
    }

  
    
}


@media screen and (max-width:500px) {

    body {
        background-size: cover;
    }

    #introcontainer {
        width: 100%;
        margin-left: 2em;
    }

    
}


@media screen and (max-width:400px) {

    body {
        background-size: cover;
    }

    #introcontainer {
        width: 100%;
        margin-left: 3em;
    }

    
}

@media screen and (max-width:350px) {

    body {
        background-size: cover;
    }

    #introcontainer {
        width: 100%;
        margin-left: 3.5em;
    }

    
}


@media screen and (max-width:250px) {

    body {
        background-size: cover;
    }

    #introcontainer {
        width: 100%;
        margin-left: 5em;
    }

    
}