/* general properties */

* {
    margin: 0;

    /* Custom properties (variables) */
    /* --main-color: red; */
}

html {
    font-size: 16px;    /* rem value */

}

body {
    height: 100vh;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    background-color: black;
    position: relative;
}

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

ul {
	list-style-type: none;
	padding-inline-start: 0;
    display: flex;
}

ul.ul {
	list-style-type: circle;
	padding-inline-start: 40px;
}

/* header */

.custom-header {
    display: flex;
    justify-content: space-around;
    height: 4vh;
    color: white;
}

/* main layout */

.track-menu {
    display: grid;
    grid-template-columns: 48px 1fr 1fr 48px; 
    grid-template-rows: 0vh 18vh 18vh 9vh 9vh 9vh; 
    gap: 0px 0px; 
    grid-template-areas:
      "g g g g"
      "x x x x"
      "m m m m" 
      "p p n n"
      "a b b e"
      "a c c e"
  }

    .g {
        justify-self: center; 
        align-self: start; 
        grid-area: g;
        z-index: -1; 
    }

    .x {
        justify-self: center;
        text-align: center;
        align-self: end; 
        grid-area: x; 
    }

    .m {
        justify-self: center; 
        align-self: start; 
        grid-area: m; 
    }

    .p {
        justify-self: start; 
        align-self: end; 
        grid-area: p; 
    }

    .n {
        justify-self: end; 
        align-self: end; 
        grid-area: n; 
    }

    .a {
        justify-self: start; 
        align-self: center; 
        grid-area: a; 
    }
    .e {
        justify-self: end; 
        align-self: center; 
        grid-area: e; 
    }

    .b {
        justify-self: center; 
        align-self: end; 
        grid-area: b; 
    }
    .c {
        justify-self: center; 
        align-self: end; 
        grid-area: c; 
    }

#coverWrapper{
    display: flex;
    width: 100%;
    height: 50vh;
    justify-content: center;
    background-color: aqua;
}

.content{
    position: absolute;
    color: #FFFFFF;
}

#currentCoverImg {
    height: 72vh;
    width: 100%;
    object-fit: cover;
}

#currentTrackInfo {
    color: white;
    text-shadow: 1px 2px 2.5px black; 
}

.now-playing-legend {
    font-size: .8rem;
    font-weight: normal;

}

#songTitle {
    font-size: 1.8rem;
    font-weight: bold;
    text-shadow: 1px 3px 5px black;
}

#artist {
    font-size: 1rem;
    font-weight: normal;
}

#prevTrackInfo {
    display: block;
    color: white;
    text-align: start;
    padding: 0rem 0rem 0rem 1rem;
}

#nextTrackInfo {
    display: block;
    color: white;
    text-align: end;
    padding: 0rem 1rem 0rem 0rem;
}

#prevSong, #nextSong {
    font-size: 0.6rem;
    text-shadow: 1px 2px 2.5px black;
}

#prevTitle, #nextTitle {
    font-size: 1rem;
    text-shadow: 1px 2px 2.5px black;
}

#prevArtist, #nextArtist {
    font-size: .7rem;
    text-shadow: 1px 2px 2.5px black;
}

#prevBttn {
    padding: 0rem 0rem 0rem 1rem;
}


#nextBttn {
    padding: 0rem 1rem 0rem 0rem;
}

.bttn-symbol {
    color: white;
    text-shadow: 1px 2px 2.5px black;
}

.play-container {
    background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 27%, rgba(0,0,0,1) 50%, rgba(238,130,238,1) 50%, rgba(238,130,238,1) 50%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.75) 75%, rgba(0,0,0,0) 95%);
    height: 9vh;
    display:flex;
    justify-content: center;
    align-items: center;
}

#playBttn {
    font-size: 2rem;
    border-radius: 50%;
}

.pref-menu {
    background-color: black;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 12vh;
    font-size: 1.5rem;
}

.nav-menu {
    background-color: rgb(51,51,51);

    display: flex;
    justify-content: space-evenly;
    align-items: flex-start;
    height: 12vh;
    font-size: 1.5rem;
}