:root {
    --br: 4px;
    --white: #ebebeb;
    --dull-blue: #8BBBDF;
    --light-blue: #35c8fd;
    --dark-blue: #12495c;
    --grey: #2b2b2b;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Open Sans", sans-serif;
}
.no-highlight {
    user-select: none; /* Standard syntax */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}
body{
    background-color: #1a1a1a;
    /* background: url(images/background3.jpeg); */
}
header {
    position: sticky;
    top: 0;
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr 1fr; */
    width: 100%;
    background-color: #1a1a1a;
    background: linear-gradient(to right, #1a1a1a, rgba(0, 0, 0, 0.9));
    padding: 24px 2%;
    box-shadow: 0 0 10px black;
}
#headerTitle {
    display: flex;
    align-items: center;
    /* background-color: pink; */
}
#logo {
    width: 50px;
    height: 50px;
    margin-right: 12px;
    background-image: url(images/icons/test_logo_2_\(SVG-Small\).svg);
    background-repeat: no-repeat;
    background-size: contain;
}
header {
    display: flex;
    z-index: 1;
}
header h1 {
    text-transform: uppercase;
    color: var(--white);
}
nav {
    margin: 0 2%;
    /* background-color: orange; */
}
nav li {
    display: inline-block;
    margin: 12px;
    /* background-color: red; */
}
nav a{
    display: block;
    text-decoration: none;
    letter-spacing: 2px;
    color: var(--white);
    /* background-color: blue; */
    padding: 8px 12px;
    transition: 150ms;
}
nav a:hover {
    border-bottom: 1px solid white;
}
nav a.active {
    border-bottom: 1px solid white;
}
main {
    background: url(images//backgrounds/keyboard.jpg);
    background-repeat: no-repeat;
    background-size: auto;
}
.homeGrid {
    display: grid;
    grid-template-columns: 3fr 2fr 1fr;
    gap: 18px;
    background: rgba(0, 0, 0, 0.7);
    padding: 36px;
}
.releasesGrid {
    background: rgba(0, 0, 0, 0.7);
    padding: 36px;
}
.contactGrid {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    padding: 36px;
}
.section {
    background-color: var(--white);
    background: linear-gradient(to bottom right, rgb(184, 223, 249), rgba(255, 255, 255, 0.9));
    padding: 16px 18px;
    border-radius: var(--br);
}
.section h2 {
    margin-bottom: 12px;
}
.album {
    display: flex;
    align-items: center;
    margin: 24px;
    background: linear-gradient(to right, #95c9f1, rgba(255, 255, 255, 0));
    border-radius: var(--br);
    transition: 150ms;
}
.album p.title {
    display: inline-block;
    font-size: 21px;
    color: var(--dark-blue);
    padding: 12px;
    margin-left: 24px;
}
.album p.blurb {
    color: var(--grey);
    /* background-color: red; */
    padding: 6px;
}
.album span {
    display: inline-block;
    width: 100px;
    height: 100px;
    box-shadow: 0 0 10px black;
}
.album:hover {
    cursor: pointer;
    /* color: #2181a4; */
    box-shadow: -20px 0 20px var(--dull-blue);
}
/* Spotify */
.spotify {
    margin: 24px;
}
.spotify iframe {
    transition: 150ms;
}
.spotify iframe:hover {
    box-shadow: 0 0 20px var(--dull-blue);
}
.spotify iframe {
    width: 100%; 
    height: 500px;
    /* border: 1px solid black; */
    border-radius: var(--br);
    /* background-color: #744741; */
    background-color: #121212;
    /* background-color: #2a2a2a; */
}
/* Videos */
.videoGrid {
    padding: 18px;
}
.videoGrid div {
    margin-bottom: 24px;
}
.videoGrid div iframe {
    aspect-ratio: 16/9;
    width: 100% !important;
    border-radius: var(--br);
    transition: 150ms;
}
.videoGrid div iframe:hover {
    cursor: pointer;
    box-shadow: 0 0 20px var(--dull-blue);
}
/* Links */
.links li {
    display: block;
}
.links li:hover {
    text-decoration: underline;
}
.links a {
    display: block;
    text-decoration: none;
    color: var(--cl-link);
    padding: 12px 18px 12px 35px;
    margin-right: 12px;
    border-radius: 5px;
}
.youtube {
    color: var(--dark-blue);
    background: linear-gradient(to right, #9dcbee, rgba(255, 255, 255, 0));
    padding: 6px 12px;
    margin-top: -8px;
    border-radius: var(--br);
    transition: 150ms;
}
.youtube:hover {
    box-shadow: -20px 0 20px var(--dull-blue);
}
.youtube li:hover {
    text-decoration: none;
}
#instagram {
    background: transparent url(/images/icons/instagram-color-SVG.svg) no-repeat;
    background-size: 30px;
    background-position-y: 8px;
}
#youtube {
    background: transparent url(/images/icons/youtube-color-512.png) no-repeat;
    background-size: 30px;
    background-position-y: 8px;
}
#youtubeMusic {
    background: transparent url(/images/icons/youtube_music-color-512.png) no-repeat;
    background-size: 25px;
    background-position-y: 12px;
}
#bandcamp {
    background: transparent url(/images/icons/bandcamp-color-512.png) no-repeat;
    background-size: 25px;
    background-position-y: 12px;
}
#spotify {
    background: transparent url(/images/icons/spotify-color-512.png) no-repeat;
    background-size: 25px;
    background-position-y: 12px;
}
#appleMusic {
    background: transparent url(/images/icons/apple_music-color-512.png) no-repeat;
    background-size: 25px;
    background-position-y: 12px;
}
#amazonMusic {
    background: transparent url(/images/icons/amazon-music-color-512.png) no-repeat;
    background-size: 25px;
    background-position-y: 12px;
}
/* Mid */
@media screen and (max-width: 1200px) {
    .homeGrid {
        display: flex;
        flex-direction: column;
    }
    .videoGrid div {
        padding: 12px 36px;
    }
    .youtube {
        margin: 0 36px;
    }
}
/* Mobile */
@media screen and (max-width: 700px) {
    header {
        display: block;
        padding-left: 16px;
    }
    nav {
        margin-top: 12px;
    }
    nav li {
        margin: 0 12px 0 0;
    }
    nav a {
        display: block;
        margin: 0;
        padding: 12px 0;
    }
    main {
        /* background: #1a1a1a; */
    }
    .homeGrid {
        display: flex;
        flex-direction: column;
        padding: 16px;
    }
    .releasesGrid {
        padding: 16px;
    }
    .section {
        padding: 16px;
    }
    .album {
        margin: 24px 0;
    }
    .album span {
        width: 75px;
        height: 75px;
    }
    .album p {
        font-size: 18px;
        margin: 6px;
    }
    .spotify {
        margin: 0;
    }
    .videoGrid {
        padding: 0;
    }
    .videoGrid div{
        padding: 0;
    }
    .youtube {
        margin: 0;
    }
    #youtube {
        margin: 0 12px;
    }
}
/* Album Covers */
#felt-christmas {
    background: url(images/album_covers/felt_christmas_album_artwork_07-650x650.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}
#summerViolets {
    background: url(images/album_covers/summer_violets_album_artwork_650x650.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}
#nightDrifter {
    background: url(images/album_covers/night_drifter_album_artwork_650x650.png);
    background-repeat: no-repeat;
    background-size: contain;
}
#revive {
    background: url(images/album_covers/revive_album_artwork_650x650.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}
#starlightInterlude {
    background: url(images/album_covers/starlight_interlude_artwork_650x650.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}
#fear {
    background: url(images/album_covers/fear_album_art_02_650x650.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}
#reminiscing {
    background: url(images/album_covers/reminiscing_album_artwork_01_650x650.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}
#junoLiveLoops {
    background: url(images/album_covers/juno_live_loops_album_artwork_650x650.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}
#vibinWithU {
    background: url(images/album_covers/vibin_with_u_album_artwork_650x650.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}
#jungleFalls {
    background: url(images/album_covers/jungle_falls_album_artwork_650x650.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}
#voyage {
    background: url(images/album_covers/voyage_album_artwork_650x650.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}