body {
  background-color: black;  
  /*background-image: url(assets/main_menu/mm_img1.jpg);*/
}

.containerrr_1 {
    display: grid;
    grid-auto-columns: 80px;
    grid-auto-rows: 80px;
}

#main_menu {
    border: 3px solid blue;
    background-color: black;
    color: aliceblue;
    margin: 5px;
    padding: 10px;
}

.logo {
    width: 100px;
    height: 100px;
    grid-area: 1 / 16;
}

.writing {
    grid-area: 2 / 3;
    transform: translate(40px, -20px);
    height: 100px;
    width: 100px;
}

.art {
    grid-area: 4 / 3;
    transform: translate(40px, -20px);
    height: 300px;
    width: 250px;
}

.catalogue {
    grid-area: 8 / 3;
    transform: translate(-10px, 5px);
    height: 70px;
    width: 70px;
}

.grime {
    grid-area: 2 / 6;
    transform: translate(-20px, 30px);
    width: 200px;
    height: 120px;
}

.welcome {
    grid-area: 5 / 6;
    width: 450px;
    height: 250px;
    z-index: 2;
}

#welcome_blurb {
    font-size: 20px;
    padding-top: 5%;
    padding-left: 10px;
}

.about {
    grid-area: 3 / 11;
    transform: translate(-60px, 0px);
    width: 230px;
    height: 230px;
    z-index: 1;
}

.links {
    grid-area: 5 / 11;
    transform: translate(-15px, -15px);
    width: 130px;
    height: 130px;
    z-index: 4;
}

.secret {
    grid-area: 4 / 12;
    transform: translate(-30px, -15px);
    width: 250px;
    height: 300px;
    z-index: 0;
}

.trinkets {
    grid-area: 7 / 15;
    transform: translate(-50px, -15px);
    height: 100px;
    width: 130px;
}

.containerrrrr_2 {
    display: grid;
    grid-auto-columns: 80px;
    grid-auto-rows: 80px;
}

.kofi {
    grid-area: 4 / 4;
    transform: translate(-20px, -40px);
    height: 50px;
    width: 50px;
    background-size: contain;
}

.kofi img {
    height: 50px;
    width: 50px;
}

.itchio {
    grid-area: 6 / 4;
    transform: translate(-20px, -40px);
    height: 50px;
    width: 50px;
}

.bandcamp {
    grid-area: 8 / 4;
    transform: translate(-20px, -40px);
    height: 50px;
    width: 50px;
}

.changelog {
    grid-area: 5 / 5;
    transform: translate(50px, -40px);
    height: 350px;
    width: 300px;
}

.music_player {
    grid-area: 5 / 11;
    transform: translate(-20px, -40px);
    height: 250px;
    width: 400px;
    z-index: 0;
}

.music_page {
    grid-area: 4 / 15;
    transform: translate(10px, -10px);
    height: 100px;
    width: 120px;
    z-index: 1;
}

.undefined3 {
    grid-area: 8 / 14;
    transform: translate(10px, 10px);
    height: 100px;
    width: 175px;
}

.undefined4 {
    grid-area: 6 / 9;
    transform: translate(-5px, 60px);
    height: 150px;
    width: 150px;
    z-index: 1;
}

.undefined5 {
    grid-area: 8 / 9;
    transform: translate(-30px, 10px);
    height: 100px;
    width: 100px;
    z-index: 2;
}

/* this is here bc i can't figure out how else to add margins to the grid 
and i don't want my other shit touching the bottom of the page */
.empty {
    grid-area: 10 / 6;
    margin: 300px;
}