* {
    margin: 0;
    padding: 0;
    cursor: default;
}
:root {
    --paleyellow: #F7F7E4;
    --paleblue: #96A9EB;
    --darkgrey: #555969;
}
body {
    background-image: url(images/plaidb.png);
    font-family: monospace;
    color: var(--darkgrey);
}

.container {
    background-color: var(--paleblue);
    border-radius: 5px;
    width: 805px;
    margin: 50px auto;
    padding: 5px;
    overflow: hidden;
}

a {
    text-decoration: underline;
    color: blue;
}
a:hover {
    text-decoration: none;
    cursor: pointer;
}
a:active {
    color: red;
}

/* HEADER */

header {
    background-color: lavender;
    border: 1px var(--darkgrey) solid;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 50px;
    padding: 5px;
}

nav {
    margin: 0 5px 5px;;
    position: relative;
}
nav ul {
    list-style: none;
    display: flex;
}
nav li:not(:last-child)::after {
    content: "✦";
    text-shadow: 1px 1px var(--darkgrey);
    margin: 0 5px;
    color: white;
}
nav a {
    text-shadow: 1px 1px var(--darkgrey);
    font-family: serif;
    font-size: 14px;
    color: white;
}
nav ul a {
    font-size: 16px;
    font-weight: bold;
}
nav div {
    position: absolute;
    right: 0px;
    bottom: -1px;
}
nav .current {
    font-style: italic;
}

/* MAIN */

main {
    height: 400px;
    display: flex;
    column-gap: 5px;
}

/* LEFT */

.left {
    width: 200px;
}

.left button {
    background-color: var(--paleyellow);
    border: 1px var(--darkgrey) solid;
    width: 100%;
    margin-bottom: 5px;
    padding: 5px;
    font-family: serif;
    font-size: 16px;
    font-weight: bold;
}

#musicplayer{
    background: ; /* background color of player */
    border: ; /* border around player */
    width: 199px; /* width of the player */
}
.songtitle{
    padding: 0 5px; /* padding around song title */
    border-bottom: ; /* border under song title */
    display: block;
}
.controls{
    font-size:13px !important; /* size of controls */
    background-color: ; /* background color of controls */
    text-align:center;
    width:100%;
}
.controls td{
    padding:8px 5px 0px 5px; /* padding around controls */
}
.seeking{
    background-color: ; /* background color of seeking bar */
    display:flex;
    justify-content: space-evenly;
    padding:5px; /* padding around seeking bar */
}
.current-time{
    padding-right:5px;
}
.total-duration{
    padding-left:5px;
}
i.fas:hover{}
i.fas.fa-pause, i.fas.fa-play, i.fas.fa-forward, i.fas.fa-backward{
    color: var(--paleyellow); /* color of controls */
}
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background-color: transparent; /* background color of seeking bar - make the color same as .seeking background color */
}
input[type=range]:focus {
    outline: none;
}
/* settings for chrome browsers */
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px; /* thickness of seeking track */
    background: var(--paleyellow); /* color of seeking track */
}
input[type=range]::-webkit-slider-thumb {
    height: 10px; /* height of seeking square */
    width: 10px; /* width of seeking square */
    border-radius: 5px; /* change to 5px if you want a circle seeker */
    background: var(--paleyellow); /* color of seeker square */
    -webkit-appearance: none;
    margin-top: -4.5px; 
}
/* settings for firefox browsers */
input[type=range]::-moz-range-track {
    width: 100%;
    height: 2px; /* thickness of seeking track */
    cursor: help;
    background: #E74492; /* color of seeking track */
}
input[type=range]::-moz-range-thumb {
    height: 10px; /* height of seeking square */
    width: 10px; /* width of seeking square */
    border-radius: 0px; /* change to 5px if you want a circle seeker */
    background: #E74492; /* color of seeker square */
    cursor: help;
    border:none;
}

/* RIGHT */

.right {
    width: 600px;
    overflow-y: auto;
}
.page h1, .page h2, .page h3, .page h4 {
    font-family: serif;
}

/* MYART */

#myart h3 {
    color: white;
}
#myart img {
    border: 1px white solid;
    width: calc(100% - 2px);
}

/* CHARACTERS */

#nebula h1 {
    font-family: serif;
    color: white;
}
#nebula .grid {
    display: grid;
    grid-template-columns: 32.5% 32.5% 32.5%;
    gap: 5px;
}
#nebula .item {
    background-color: white;
    border: 1px var(--darkgrey) solid;
    height: 250px;
    position: relative;
}
#nebula img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}
#nebula span {
    background-color: lavender;
    padding: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    cursor: pointer;
}

#angel {
    background-color: white;
    border: 1px var(--darkgrey) solid;
    padding: 15px;
}

#endworld {
    background-color: white;
    border: 1px var(--darkgrey) solid;
    padding: 15px;
}