body {
    background-image: url(https://rivendell.neocities.org/backgrounds/stars3.gif);
}

.box {
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 250px auto;

}



1header,nav, main, footer, .border, .Image, .About, .Resource, .image-title, .content, .musicplayer, .music-image, .play-pause {
    border: black 2px solid;
}

.border, .content, footer, .About, .Resource, .musicplayer  {
    font-family: "Funnel Sans";
}

nav, main, .content {
    
    background-color: #DDC3C3;
    border-radius: 5px;
    padding: 20px
}

header, footer {
    display: grid;
    grid-gap: 20px;
        background-color: #A376A2;
    padding: 20px
}

header, footer, nav, main {
    border: #6B3F69 2px solid;
}

.border, .musicplayer{
    color: #8A2D3B;
}
.content, footer, .About, .Resource {
    color: #6B3F69;
}

header {
    height: 60px;
    grid-row: 1 / 2;
    grid-column: 1 / 3;
}
nav {
    height: 300px;
    grid-row: 2 / 2;
    grid-column: 1 / 2;
}


main {
    height: max-content;
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}


footer { 
    text-align: center;
    margin: 0;
    grid-row: 3 / 4;
    grid-column: 1 / 3;
}

.border {
    position: max-content;
   max-width: 1000px;
    display: grid;


   

}

.About {
    place-items: center;
    text-align: center;
    height: max-content;
    grid-row: 1 / 2;
    grid-column: 2 / 2;
}

.Resource {
    place-items: center;
    text-align: center;
    height: max-content;
    grid-row: 1 / 2;
    grid-column: 3 / 4;
}

.Resource a {
    text-decoration: none;
    color: inherit;        
    display: block;        
}

.image-title {
    place-items: center;
    text-align: center;
    height: max-content;
    width: 100px;
    grid-row: 1 / 2;
    grid-column: 1 / 2;
}

.Image {
    height: 150px;
    align-items: center;
    text-align: center;
}

.image-title img {
 
    width: 3rem;
    width: 3rem; 
}

.musicplayer {
    height: max-content;
    background-color: #A376A2;
    
}

.music-image {
    background-image: url(images/tame\ impala.jpg);
    background-size: cover;
    background-position: center;
    height: max-content;
    height: 100px;
}

.play-pause audio {
    background: transparent;
    border-radius: 20px;
    width: 200px;
    height: 10px;
}


nav img {
 
    width: 9rem;
    width: 9rem; 
}