/*  Global Styles */
html {
    font-family: 'Raleway', Arial, serif;
    background-color: #020659;
}

button {
    margin-top: 20px;
    margin-left: 20px;
    padding: 10px 40px 10px 40px;
    color: white;
    background: #590242;
    border: 0px;
    border-radius: 5px;
    font-family: 'Raleway', Arial, serif;
}

footer {
    background-color: white;
    padding-bottom: 20px;
    padding-top: 20px;
    text-align: center;
    font-weight: bold;
    color: #590242;
}

/* Smaller Screens */
@media screen and (min-width: 375px) {
    html {
        width: 375px;
        margin: 0 auto;
    }
/* Header */
    header {
        display: grid;
        grid-template-columns: 50px 1fr;
        background-color: navy;
    }
    h1 {
        grid-column: 2 / 2;
        order: 1;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    h1 a {
        color: white;
        text-decoration: none;
        padding: 0px;
        margin-top: 5px;
        margin-right: 20px;
    }
    h1 a:hover {
        background-color: #590242;
        padding: 0px;
        margin-top: 5px;
        margin-right: 20px;
    }
    nav {
        display: block;
        order: -1;
        width: 50px;
        padding-top: 10px;
        align-self: flex-start;
    }
    ul {
        order: 1;
        overflow: hidden;
        max-height: 0px;
        transition: max-height .2s ease-out;
        background-color: mediumblue;
        grid-column: 1 / 3;
        padding: 0px;
        margin: 0px;
    }
    li {
        list-style: none;
        text-transform: uppercase;
        text-align: center;
        grid-column: 2 / 2;
        grid-row: 2 / 2;
        cursor: pointer;
    }
    li a {
        display: block;
        color: white;
        text-decoration: none;
        padding: 10px;
    }
    li a:hover {
        background-color: #590242;
    }
    li img {
        padding: 15px 162px;
    }
    li img:hover {
        background-color: #590242;
    }
    label {
        cursor: pointer;
        display: inline-block;
        padding: 28px 20px;
        position: relative;
        user-select: none;
    }
    label span {
        background-color: #ffffff;
        display: block;
        height: 2px;
        position: relative;
        transition: background-color .2s ease-out;
        width: 18px;
    }
    label span:before, label span:after {
        background: #ffffff;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
        width: 100%;
    }
    label span:before {
        top: 5px;
    }
    label span:after {
        top: -5px;
    }
    input {
        display: none;
    }
    input:checked ~ ul {
        max-height: 500px;
    }
    input:checked ~ label span {
        background: transparent;
    }
    input:checked ~ label span:before {
        transform: rotate(-45deg);
    }
    input:checked ~ label span:after {
        transform: rotate(45deg);
    }
    input:checked ~ label:not(.steps) span:before, input:checked ~ label:not(.steps) span:after {
        top: 0;
    }
    .navicon {
        display: flex;
    }
    .menu-open-button {
        grid-column: 1 / 1;
        width: 50px;
    }
    header section {
        grid-column: 1 / 3;
        grid-row: 3 / 3;
        order: 3;
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 0px;
        background: linear-gradient(to right, #1e24d4, navy, black);
        color: white;
    }
    header h2 {
        color: white;
        padding: 0px;
        margin-top: 10px;
    }
/* Trending Section */
    main {
        background-color: white;
        position: relative;
        padding-bottom: 20px;
    }
    h2 {
        margin: 0px;
        padding: 20px;
        text-transform: uppercase;
        color: #590242;
    }
    .trending {
        display: flex;
        position: relative;
        margin: 0 auto;
        grid-gap: 10px;
        overflow: scroll;
        overflow-y: hidden;
        height: 335px;
        padding: 10px;
    }
    .trending audio {
        display: flex;
        position: relative;
        margin-top: -220px;
        margin-left: 5px;
        justify-self: center;
    }    
    .trending h3 {
        display: flex;
        position: relative;
        margin: 5px;
        color: #590242;
        justify-self: center;
    }
    .trending dl {
        display: flex;
        position: relative;
        margin: 5px;
    }
    dt, dd {
        position: relative;
    }
    dd {
        margin-left: 5px;
    }
    section .aloma {
        position: absolute;
        margin-top: 236px;
        padding: 10px 225px 10px 10px;
        background: rgba(255, 255, 255, 0.5);
    }
    section .road {
        position: absolute;
        margin-top: 236px;
        padding: 10px 180px 10px 10px;
        background: rgba(255, 255, 255, 0.5);
    }
    section .papaya {
        position: absolute;
        margin-top: 236px;
        padding: 10px 166px 10px 10px;
        background: rgba(255, 255, 255, 0.5);
    }
    section .smoothies {
        position: absolute;
        margin-top: 236px;
        padding: 10px 91px 10px 10px;
        background: rgba(255, 255, 255, 0.5);
    }
    section .smoothies h3 {
        width: 200px;
    }
    section .success {
        position: absolute;
        margin-top: 236px;
        padding: 10px 71px 10px 10px;
        background: rgba(255, 255, 255, 0.5);
    }
    section .success h3 {
        width: 220px;
    }
    .slider audio::-webkit-media-controls-enclosure {
        background-color: rgba(255, 255, 255, 0.5);
    }
    .slider audio::-webkit-media-controls-play-button {
        background-color: #fff;
        border-radius: 20px;
    }
    .slider audio::-webkit-media-controls-mute-button {
        background-color: #fff;
        border-radius: 20px;
    }
    .slider2 audio::-webkit-media-controls-enclosure {
        background-color: rgba(255, 255, 255, 0.5);
    }
    .slider2 audio::-webkit-media-controls-play-button {
        background-color: #fff;
        border-radius: 20px;
    }
    .slider2 audio::-webkit-media-controls-mute-button {
        background-color: #fff;
        border-radius: 20px;
    }
    button {
        display: flex;
        position: relative;
    }
    .playlists {
        display: flex;
        background-color: #2699fb;
        padding: 10px;
        overflow: scroll;
        overflow-y: hidden;
    }
    .playlists section {
        display: block;
        float: left;
        padding: 10px;
        margin-right: 10px;
        width: 150px;
        background-color: #0f8dfb;
    }
    .playlists section h3, .playlists section p {
        text-align: center;
        color: white;
    }
    .playlists2 {
        display: flex;
        background-color: #01148c;
        padding: 10px;
        overflow: scroll;
        overflow-y: hidden;
    }
    .playlists2 section {
        display: block;
        float: left;
        padding: 10px;
        margin-right: 10px;
        width: 150px;
        background-color: #020e73;
    }
    .playlists2 section h3, .playlists2 section p {
        text-align: center;
        color: white;
    }
    .playlists::-webkit-scrollbar {
        width: 10px;
    }
    .playlists::-webkit-scrollbar-track {
        background-color: #1b68c5;
    }
    .playlists::-webkit-scrollbar-thumb {
        background-color: #020959;
        border-radius: 10px;
    }
    .playlists2::-webkit-scrollbar {
        width: 10px;
    }
    .playlists2::-webkit-scrollbar-track {
        background-color: #1b68c5;
    }
    .playlists2::-webkit-scrollbar-thumb {
        background-color: #020959;
        border-radius: 10px;
    }
    .trending::-webkit-scrollbar {
        width: 10px;
    }
    .trending::-webkit-scrollbar-track {
        background-color: #cbafc2;
    }
    .trending::-webkit-scrollbar-thumb {
        background-color: #590742;
        border-radius: 10px;
    }
}




/* Bigger Screens */
@media screen and (min-width: 501px) {
    html {
        width: 835px;
    }
/* Header */
    header {
        display: grid;
        grid-template-columns: 230px 2fr;
        grid-template-rows: 50px 1fr;
        background-color: navy;
    }
    h1 {
        grid-column: 1 / 1;
    }
    h1 a {
        color: white;
        text-decoration: none;
        order: -1;
        padding: 20px;
    }
    h1 a:hover {
        color: white;
        text-decoration: none;
        order: -1;
        padding: 20px;
    }
    ul {
        display: grid;
        margin-left: 230px;
    }
    li {
        list-style: none;
        text-transform: uppercase;
        text-align: center;
        justify-content: space-between;
        grid-column: auto;
        background-color: transparent;
        cursor: pointer;
    }
    li a {
        margin-left: 25px;
        margin-right: 25px;
    }
    ul li:hover {
        background-color: #590742;
    }
    li img {
        margin-top: 10px;
        padding: 0px;
    }
    li img:hover {
        background-color: transparent;
        cursor: pointer;
    }
    .menu-open-button {
        display: none;
    }
    header section {
        order: 2;
        grid-column-start: 1;
        grid-column-end: -1;
        grid-row-start: 2;
        grid-row-end: -1;
        margin-top: 10px;
    }
    body, main {
        width: 834px;
        margin: 0 auto;
    }
    button {
        align-self: flex-end;
        justify-content: flex-end;
        width: 180px;
        margin-left: 648px;
    }
    .playlists {
        display: grid;
        grid-template-columns: 1fr;
        overflow: scroll;
        overflow-x: hidden;
        height: 450px;
        margin-right: 0px;
        width: 398px;
    }
    .playlists section {
        display: grid;
        grid-template-columns: 1fr 2fr;
        width: 365px;
        margin-bottom: 10px;
    }
    .playlists section div {
        text-align: center;
        align-self: center;
        margin: 0;
        padding: 10px;
    }
    .playlists section div p, .playlists section div h3 {
        margin: 0px;
    }
    .playlists2 {
        display: grid;
        grid-template-columns: 1fr;
        overflow: scroll;
        overflow-x: hidden;
        height: 450px;
        margin-right: 0px;
        width: 396px;
    }
    .playlists2 section {
        display: grid;
        grid-template-columns: 1fr 2fr;
        width: 365px;
        margin-bottom: 10px;
    }
    .playlists2 section div {
        text-align: center;
        align-self: center;
        margin: 0;
        padding: 10px;
    }
    .playlists2 section h3, .playlists2 section p {
        text-align: center;
        align-self: center;
        margin: 0;
    }
    .playlists2 section h3 {
        align-items: flex-start;
    }
    .column1 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 70px 450px 80px;
        max-width: 51%;
    }
    .column1 button {
        align-self: flex-end;
        justify-content: flex-end;
        width: 180px;
        margin-left: 230px;
    }
    .column2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 70px 450px 80px;
        max-width: 50%;
    }
    .column2 button {
        align-self: flex-end;
        justify-content: flex-end;
        width: 180px;
        margin-left: 230px;
    }
    .columns {
        display: flex;
    }
}

@media screen and (min-width:834px) {
    ul {
        overflow: visible;
        position: absolute;
        top: 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
    label span, input {
        display: none;
    }
}