body {

background-color:black;
background-image: url(https://yetirabbit.neocities.org/stars%202.gif);
color: azure;

}

.container {

    display: grid;
    grid-template-columns: auto 200px 200px 200px 200px;
    grid-template-rows: 100px 200px auto auto 200px auto 200px;
    grid-template-areas:
        ". . . . ."
        ". header header header header"
        "music music2 music2 music2 music2"
        ". title title2 title2 title2"
        ". sidebar main main main"
        ". sidebar main main main"
        ". sidebar main main main"
    ;
    gap: 10px;
    justify-content: center;
    
}

.container > div {
    border: 4px solid rgb(70, 26, 173);
    border-radius: 16px;
    background-color: rgb(96, 25, 209, 0.5);
    padding: 10px;
}

.item-a {
    grid-area: header;
    text-align: center;
    font-size: 200%;
    color: rgb(97, 115, 214);
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

}

.item-b {
    grid-area: sidebar;
    margin-right: 10px;
}

.item-c {
    grid-area: main;
    overflow: scroll;
}

.item-d {
    grid-area: feature;
    overflow: scroll;
}

.item-f {
    grid-area: update;
    overflow: scroll;
}

.item-g {
    grid-area: title;
    font-weight: bold;
    font-size: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(97, 115, 214);
    text-align: center;
    margin-right: 10px;
    padding: 4px !important
}

.item-h {
    grid-area: title2;
    font-weight: bold;
    font-size: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(97, 115, 214);
    text-align: center;
    padding: 4px !important
}


.item-i {
    grid-area: title3;
    font-weight: bold;
    font-size: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(97, 115, 214);
    text-align: center;
    padding: 4px !important
}   


.item-j {
    grid-area: title4;
    font-weight: bold;
    font-size: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(97, 115, 214);
    text-align: center;
    padding: 4px !important
}

div.music {
    grid-area: music;
    border: none;
    background: none;
    justify-self: start
}

div.music2 {
    grid-area: music2;
    text-align: center;
    margin-bottom: 10px;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: auto;
}

li a {
    display: block;
    color: blue;
    padding: 10px 10px;
    margin: 16px;
    background-color: rgb(97, 115, 214);
    text-align: center;
    border: hidden;
    border-radius: 8px;
}

#bottle {
    float: right;
    height: 180px;
    width: auto;
}