body{
        background-color: rgb(130, 130, 244);
        size: device-size;
        font-family: 'Minecraftia', sans-serif;
        cursor: url(http://www.fillster.com/myspace-cursors/34.ani), 
        url(http://www.fillster.com/myspace-cursors/34.gif), pointer !important;
    }
    #container{
        position: relative;
        display: grid;
        grid-template-columns:auto auto auto;
        margin: auto;
        grid-template-areas:
        "header header header"
        "sidebar main right"
        "sidebar main right"
        "footer footer footer";
        grid-template-columns: 23% 52% 25%;
        
        gap: 10px;
        max-width: 900px;
        background-color: aliceblue;
        padding: 20px 40px 30px 20px;
        min-height: fit-content;
        overflow-y: hidden;
        overflow-x: hidden;
    }
    #header{
        grid-area: header;
        background-color: transparent;
        padding: 10px;
        background: linear-gradient(90deg, rgba(245, 103, 226, 1) 
        0%, rgba(87, 182, 199, 1) 50%, rgba(237, 221, 83, 1) 100%);
        max-height: fit-content;
        overflow-y: hidden;
        overflow-x: hidden;
        
    }
    #footer{
        grid-area: footer;
        font-size: smaller;
        height: fit-content;
        align-self: end;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    
    #sidebar{
        object-fit: contain;
        grid-area: sidebar;
        padding: 10px;
        display: block;
        max-height: 100%;
    }
    #sidebarTop{
        
        border: 2px solid black;
        overflow-y: hidden;
        margin-bottom: 5px;
        height: min-content;
    }
    #sidebarMiddle{
        border: 2px solid black;
        overflow-y: hidden;
        margin-bottom: 5px;
        height: min-content;
    }
    #sidebarBottom{
        margin-bottom: 5px;
        border: 2px solid black;
        overflow-y: hidden;
        height: min-content;
    }
    #right{
        grid-area: right;
        display: block;
        object-fit: contain;
        max-height: 100%;
        padding: 10px;
    }
    #rightTop{
        
    }
    #rightBottom{
        
        
    }
    #activity{
        grid-area: activity;
        display: flex;
    }
    #container > div{
        border: 2px solid black;
        padding: 5px;
        text-align: center;
        margin-top: 0px;
    }
    .title-bar-text{
        background: linear-gradient(90deg, rgba(245, 103, 226, 1) 0%, rgba(87, 182, 199, 1) 50%, rgba(237, 221, 83, 1) 100%);
        display: flex;
        padding: 5px;
        border: 2px solid black;
        max-height: fit-content;

    }
    .albumButtons{
        background:  linear-gradient(90deg, rgba(237, 221, 83, 1) 0%, rgba(87, 182, 199, 1) 50%, rgba(245, 103, 226, 1) 100%);
        margin-left: 10px;
        margin-right: 10px;
        padding: 3px;
        min-width: 100px;
        max-height: fit-content;
        justify-items: center;
        cursor: url(http://www.fillster.com/myspace-cursors/34.ani), 
    url(http://www.fillster.com/myspace-cursors/34.gif), pointer !important;
    }
    #lad{
        display: flex;
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
    #mainText{
        text-align: left;
    }
    #albumGridContainer{
        
        background: linear-gradient(90deg, rgba(245, 103, 226, 1) 0%, rgba(87, 182, 199, 1) 50%, rgba(237, 221, 83, 1) 100%);
        
    }
    #albumGrid{
        display: grid;
        grid-template-columns: auto;
        grid-template-areas:
        "album1 album2 album3"
        "album4 album5 album6"
        "album7 album8 album9";
        padding: 5px;
        padding-top: 10px;
        border: 2px solid black;
        justify-items: center;
    }
    #second-album-grid{
        margin-bottom: 50%;
        padding: 20px;
        text-align: center;
        color: aliceblue;
        display: grid;
        grid-template-areas:
        "second-album1 second-album1-text"
        "second-album2 second-album2-text"
        "second-album3 second-album3-text"
        "second-album4 second-album4-text"
        "second-album5 second-album5-text"
        "second-album6 second-album6-text"
    }
    .second-album-text{
        margin-left: 20px;
    }
        #second-album1{
            grid-area: second-album1;
        }
        #second-album12{
            grid-area: second-album2;
        }
        #second-album3{
            grid-area: second-album3;
        }
        #second-album4{
            grid-area: second-album4;
        }
        #second-album5{
            grid-area: second-album5;
        }
        #second-album6{
            grid-area: second-album6;
        }
        #second-album1-text{
            grid-area: second-album1-text;
        }
        #second-album2-text{
            grid-area: second-album2-text;
        }
        #second-album3-text{
            grid-area: second-album3-text;
        }
        #second-album4-text{
            grid-area: second-album4-text;
        }
        #second-album5-text{
            grid-area: second-album5-text;
        }
        #second-album6-text{
            grid-area: second-album6-text;
        }

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-panel {
  background-color: #bb17ad;
}

   .albums-in-grid{
    width: 90%;
    height: 90%;
   }
   .albums-in-second-grid{
    width: 100%;
    height: 100%px;
    border: solid 2px aliceblue;
    padding: 10px;
   }
   #main{
    height: min-content;
    border-color: aliceblue;
   }
   #alvvays-album{
    grid-area: album9;
   }
   #laurel-hell{
    grid-area: album2;
   }
   #ombre-est-lumière{
    grid-area: album3;
   }
   #preachers-daughter{
    grid-area: album4;
   }
   #the-queen-is-dead{
    grid-area: album8;
   }
   #so-tonight-that-i-might-see{
    grid-area: album6;
   }
   #twilight{
    grid-area: album7;
   }
   #when-the-pawn{
    grid-area: album1;
   }
   #virgin{
    grid-area: album5;
   }
   .window-body{
    text-align: left;
    margin: 5px;
   }
   .indexLinks{
    color: black;
   }