body {
    height: 100vh; /* vh = viewheight, 100% of the viewport */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eadbcb;
    background-image: url(../assets/branches.svg);
    background-size: cover;
}

section {
    display: none;
    gap: 20px; /* NOT padding. gap is the space in between each cell comprising the grid */
    width: 35%;
    grid-template-columns: repeat(3, 1fr); /* could just do 1fr 1fr 1fr instead of repeat format, but it'd be ugwy */
    grid-template-rows: repeat(3, 1fr);
}

section:target {
    display: grid;
}

section div, section a {
    text-align: justify;
    hyphens: auto;
    color: black;
    box-shadow: inset 1px 1px 20px 8px #3a1616;
    aspect-ratio: 1;
    text-align: left; /* don't even need to specify this, it's just default */
    overflow: hidden;
    padding: 0px; /* padding on the INSIDE of the cells, so the  text doesn't clip into the border */
    background: #eadbcb;
}

section a:nth-child(5) {
    border: solid 5px blue;
    background: black;
}