/* Framework import */
@import "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";

/* Font awesome import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Color variables */
    --spotify-green: #1DB954;
    --spotify-black: #191414;
    --main-background: #a189fd;
}

* {
    box-sizing: border-box;
    padding: 5px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-weight: bolder;
    margin: 0;
}

/* Selectors by element type */
html {
    background-color: var(--main-background);
}

body {
    background-color: var(--main-background);
    height: 100%;
}

section {
    display: flex;
    flex-flow: column wrap;
    width: 60%;
}

footer {
    font-size: 12px;
}

video {
    height: 200px;
    width: 280px;
    display: flex;
    flex-wrap: wrap;
    padding-top: 15px;
}

/* Selectors by class */
.dropdown {
    align-self: self-start;
}

/* Buttons into columns */
.wrapper2 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Bring the tabs content into one container */
.Vcontainer {
    width: 100%;
    display: flex;
}

.artists {
    width: 30%;
    height: 300px;
    text-align: center;
}

.about {
    width: 20%;
    height: 300px;
    text-align: center;
}

.videos {
    width: 50%;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
}

.Vcontainer {
    color: var(--spotify-black);
}

/* Gradient header background behind title */
.header {
    background-image: linear-gradient(to left, #EA8CFF, #4E45E5);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
    width: auto;
    font-size: 40px;
    color: #35363A;
    padding-bottom: 8px;
}

.header h1 {
    padding-bottom: 3px;
}

/* Top background image */
.hero {
    background-image: url(../css/music-rainbow.jpeg);
    background-size: cover;
    background-position: center;
    height: 250px;
}

.wrapper {
    display: flex;
    width: 25%;
    height: 379px;
    padding-top: 20px;
}

.genres {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 5px;
}

.channel_link {
    padding-top: 10px;
    font-size: 15px;
}

/*  Welcome Modal  */
.modal-card {
    border-radius: 70px;
    padding: 32px;
}

.modal-card-title {
    text-align: center;
    border-radius: 10px;
}

.modal-card-body {
    width: auto;
    font-size: smaller;
}

/* Selectors by ID */
#subgenres_list {
    flex-wrap: wrap;
}

#drop_button, #dropdown_buttons, #li_0, .modal-card, .modal-card-foot {
    background-color: var(--spotify-green)
}

#span_0 {
    color: var(--spotify-black);
}

#prev_artists_dropdown {
    justify-content: center;
}

/* Change colors of buttons */
#popular-genres {
    background-color: var(--main-background);
    color: var(--spotify-black);
}

/*======================================*/
/*=========Screen size changes==========*/
/*======================================*/

/* At 1100px removes overlapping */
@media only screen and (max-width: 1100px) {
    .wrapper {
        height: auto;
        width: 25%;
    }

    .container {
        display: flex;
        flex-direction: column;
    }

    .Vcontainer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .artists {
        height: auto;
        width: 75%;
    }

    .videos {
        height: auto;
        width: 75%
    }

    #popular-genres {
        width: 100%;
    }

    #main_body {
        align-items: center;
    }
}

@media only screen and (max-width: 400px) {
    .modal-card {
        font-size: 10px;
    }

    .modal-card-title {
        font-size: 12px;
        text-align: center;
    }

    .modal-card-body {
        width: auto;
    }
}

/* At 800px turns tabs and content into columns below */
@media only screen and (max-width: 800px) {
    .wrapper {
        height: auto;
        width: auto;
    }
}

/* At 600px centers the buttons and brings tab content below in columns */
@media only screen and (max-width: 600px) {
    h1 {
        text-align: center;
        font-size: 30px;
    }

    u {
        width: 100%;
    }

    .hero {
        height: 100px;
    }

    .container {
        display: flex;
        flex-direction: column;
    }

    .wrapper2 {
        width: 100%;
    }

    .wrapper {
        height: auto;
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .Vcontainer {
        display: flex;
        flex-direction: column;
    }

    .artists {
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }

    .about button {
        align-self: center;
    }

    .videos {
        height: auto;
        width: 100%;
    }
}

/* at 400px keeps buttons centered and tabs content in columns below */
@media only screen and (max-width: 400px) {
    h1 {
        text-align: center;
        font-size: 20px;
    }

    .wrapper {
        height: auto;
    }

    .header {
        height: 35px;
    }

    .hero {
        height: 50px;
    }
}