@media only screen and (max-width: 600px) {
    h1 {font-size: 3vw;}
    h2 {font-size: 3vw;}
    p {font-size: 3vw;}
    a {font-size: 3vw;}
    ul {font-size: 3vw;}

    .albumCovers {height: 9vw; width: 9vw;}
    .albumInfo {font-size: 2vw;}
    #gallery {grid-auto-rows: 75px; grid-template-columns: repeat(1, 1fr);}
}
@media only screen and (min-width: 600px) {
    h1 {font-size: 1vw;}
    h2 {font-size: 1vw;}
    p {font-size: 1vw;}
    a {font-size: 1vw;}
    ul {font-size: 1vw;}

    .albumCovers {height: 6vw; width: 6vw;}
    .albumInfo {font-size: 0.75vw;}
    #gallery {grid-auto-rows: 150px; grid-template-columns: repeat(3, 1fr);}
}

h1 {
    font-family: 'Courier New', Courier, monospace;
}
h2 {
    font-family: 'Courier New', Courier, monospace;
}
p {
    font-family: 'Courier New', Courier, monospace;
}
a {
    color: black;
    font-family: 'Courier New', Courier, monospace;
}
ul {
    color: black;
    font-family: 'Courier New', Courier, monospace;
}

body {
    display: grid;
    min-height: 97vh;
    place-items: center;
    background-color: rgb(32, 32, 32);
    background-image: url("stars.webp");

}

#container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "a a a a"
        "b c c c"
        "b c c c"
        "b c c c"
    ;
    height: 100%;
    width: 50%;

    background-color: whitesmoke;
}

#sub1 {
    grid-area: a;

    border-bottom: 1px solid rgb(32, 32, 32);
}

#websiteName {
    margin-left: 10px;
}

#sub2 {
    grid-area: b;
    padding: 5px;
    text-align: center;

    border-right: 1px solid rgb(32, 32, 32);
}

#sub3 {
    grid-area: c;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 5px;

}
#contentHeader {
    text-align: center;
}
#contentParagraph {
    margin-left: 10px;
}
#gallery {
    display: grid;
    gap: 10px;
}
.albumCovers {
    border: 1px solid black;
}
.albumContainers {
    text-align: center;
}