body {
        /* margin: 0; */
        background-color: #001625;
        color: #e0f2ff;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    /*Header*/
    
    header {
        position: fixed;
        width: 100%;
        /* margin-top: -5%; */
        margin: -1% -1% 0 -1%;
        background-color: #38131d;
        z-index: 5;
    }
    
    header ul {
        list-style: none;
    }
    
    header ul li {
        display: inline-block;
        /* padding: 0 10px; */
        vertical-align: middle;
    }
    
    .nav-image {
        border-radius: 50%;
        height: 50px;
        width: 50px;
    }
    
    .nav-image:hover {
        box-shadow: ;
    }
    
    #dashboard {
        position: absolute;
        right: 0;
        margin-right: 2%;
    }
    
    #welcome {
        color: #ff2fd2;
        font-weight: 900;
        font-style: oblique;
        text-decoration: underline;
    }
    
    #search {
        background-color: #002036;
        border: none;
        border-radius: 10px;
        height: 40px;
        width: 300px;
        padding: 5px;
    }
    /* Main Section */
    
    #outer {
        margin-left: 1%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    main {
        width: 65vw;
        margin-top: 7%;
    }
    
    aside {
        width: 30vw;
        /* border: 2px solid red; */
        margin-top: 7%;
        border-left: 5px groove #a4abd0;
        margin-right: 1%;
        display: inline-block;
        vertical-align: top;
        height: fit-content;
    }
    /*Main display*/
    
    #blog-card {
        background-color: powderblue;
        background-image: linear-gradient(to right, #093028, #237A57);
        height: 40%;
        /* border: 2px solid blue; */
        padding: 2%;
        display: flex;
        flex-wrap: wrap;
        margin: 1%;
        justify-content: space-around;
        border-radius: 2%;
    }
    
    #blog-card-image {
        height: 100%;
        width: 35%;
        background-color: palegreen;
        display: inline-block;
        /* border: 2px solid red; */
        background-image: url('images/guitar.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 10%;
    }
    
    #blog-card-desc {
        height: 70%;
        width: 60%;
        background-color: #732520;
        display: inline-block;
        border: 2px solid red;
        text-align: center;
        vertical-align: text-bottom;
        position: relative;
        top: 15%;
        overflow: hidden;
        border-radius: 20px;
    }
    
    #blog-card-desc p {
        color: whitesmoke;
        padding: 2%;
        font-weight: 600;
        font-style: oblique;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    #blog-card-desc h3 {
        font-family: "Playfair Display SC";
        font-weight: 800;
        font-size: 3em;
        color: #ff2;
    }
    
    #blog-card-desc button {
        height: 10%;
        width: 45%;
        cursor: pointer;
        font-weight: 900;
        background-color: #319ceb;
        background-image: linear-gradient(to right, #168de4, #a042ce);
        border-radius: 20px;
        border-color: turquoise;
    }
    /* Playlist */
    
    .playlist-outer {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    
    .playlist-song {
        background-color: #9479d8;
        background-image: linear-gradient(to right, #42275a, #734b6d);
        /* border: 2px solid yellow; */
        margin: 1% 0;
        display: inline-block;
        height: 20%;
        border-radius: 5px;
        text-align: justify;
    }
    
    .playlist-song-display {
        float: left;
        position: relative;
        display: inline;
        padding: 1%;
    }
    
    .playlist-song-display:hover {
        cursor: pointer;
    }
    
    .playlist-song-display:hover img {
        filter: blur(1px);
    }
    
    .playlist-song-display:hover .play-button {
        display: inline-block;
    }
    
    .playlist-song-display img {
        width: 15%;
        height: 15%;
    }
    
    .play-button {
        position: absolute;
        display: none;
        top: 40%;
        width: 40px;
        margin: auto;
        left: 5%;
        vertical-align: middle;
        text-align: right;
        z-index: 100;
        background: none;
    }
    
    .playlist-song-body {
        text-align: center;
        position: relative;
        display: inline-block;
        padding: 1%;
        /* width: max-content; */
    }
    /* .playlist-song-icons {
        text-align: right;
        display: inline-block;
    } */
    
    .playlist-song-title {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-weight: bolder;
        font-size: 1em;
        color: yellow;
        text-align: left;
        text-transform: uppercase;
        vertical-align: middle;
        margin: 0;
        padding: 0;
    }
    
    .playlist-song-desc {
        text-align: left;
    }
    /* Aside elements*/
    
    .aside-heading {
        color: #e11f6d;
        margin: 0 5px;
        text-align: center;
        font-weight: 800;
        font-size: 1.5em;
        font-style: italic;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    }
    
    .artist,
    .song {
        /* border: 2px solid plum; */
        margin: %;
        padding: 1%;
    }
    
    #similar-artists,
    #recently-played {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    
    .display-img {
        height: 15%;
        width: 10%;
        background-size: contain;
    }
    
    .desc {
        display: inline-block;
        text-align: left;
    }
    
    .desc h5,
    p {
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .song,
    .artist {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
    }
    
    .icon {
        display: inline-block;
    }
    /*General class*/
    
    a {
        text-decoration: none;
    }
    
    .shadow:hover {
        box-shadow: 2px 2px 5px 2px #c0faff;
    }
    
    .section-shadow:hover {
        box-shadow: 1px 1px 6px 5px #ffac65;
    }
    
    .zoom {
        padding: 20px;
        transition: transform .2s;
        /* Animation */
        /* width: 200px;
    height: 200px; */
        margin: 0 auto;
    }
    
    .zoom:hover {
        transform: scale(1.5);
        /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    }
    /* footer audio player */
    
    #lightbox {
        height: 0;
        width: 0;
        position: fixed;
        top: 90;
        left: 0;
        overflow: hidden;
        transition: all 1s ease-in-out;
    }
    
    #lightbox:target {
        height: 7%;
        width: 100vw;
        top: 93%;
        background-color: #261780;
        background-image: linear-gradient(#0F2027, #203A43, #2C5364);
    }
    
    #lightbox-content {
        padding-bottom: 2%;
        padding-left: 1%;
        margin-bottom: 2%;
    }
    
    .inline-block {
        display: inline-block;
    }
    
    .padd {
        padding-right: 1rem;
        padding-left: 1rem;
    }
    
    #audio {
        position: absolute;
        left: 40%;
        padding: 0;
        margin-top: -0.8%;
    }
    
    #audio-right {
        float: right;
        margin-right: 25%;
    }
    
    #audio-left {
        margin-left: 25%;
    }
    /* MEDIA QUERIES */
    
    @media screen and (max-width:1174px) {
        main,
        aside {
            width: 100vw;
        }
        main {
            margin-top: 9%;
        }
        aside {
            border: none;
            margin-top: 30%;
        }
        .aside-heading {
            font-weight: 900;
            font-size: 3em;
        }
    }
    
    @media screen and (max-width:928px) {
        main {
            margin-top: 11%;
        }
    }
    
    @media screen and (max-width:691px) {
        main {
            margin-top: 13%;
        }
        #blog-card-desc {
            height: 87%;
            top: 8%;
        }
    }
    
    @media screen and (max-width:554px) {
        main {
            margin-top: 17%;
        }
        #blog-card-desc {
            height: 90%;
            top: 5%;
        }
    }
    
    @media screen and (max-width:514px) {
        main {
            margin-top: 20%;
        }
        #blog-card-desc {
            height: 95%;
            top: 3%;
        }
    }