#foreground-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 10vw 1fr 1fr;
    margin: 2vw;
    padding: 0.5vw;
    border-radius: 1vw;
    background-color: rgba(31,19,31,0.8);
    gap: 1mm;
    border-image-width: 0.6vw;
    border-image-source: url(/assets/minecraft-inventory-images/tooltip-border.png);
    border-image-slice: 40%;
    border-image-repeat: stretch;
    text-align: center;
    justify-content: center;
}

#foreground-grid > div {
    display: block;
    
}

#header-bar {
    grid-column: 1 / span 5;

}

.panel {
    background-color: #ffffff24;
    margin: 0.2vw;
    border-radius: 1em;
}

#intro {
    grid-row: 2;
    grid-column: 2 / span 3;
}

#intro p {
    margin: 1em;
}

#about {
    grid-row: span 2;
    grid-column: 5;
    text-align: center;
}

#about > h1 {
    font-family: 'Flagfies';
    font-size: 30pt;
    margin: 0;
    margin-top: 0.5em;
}

#about-photo {
    width: 12em;
}

#about-table {
    display: flex;
    flex-direction: column;
}

.table-key {
    font-family: 'Minecraft';
    font-weight: bold;
    text-align: left;
    margin: 2pt 0;
}

.table-value {
    margin: 2pt 0;
    margin-left: auto;
    text-align: right;
}

#about #buttons {
    margin-top: 1em;
}

#pages {
    display: block;
    text-align: center;
    grid-row: span 2;
}

#pages a {
    font-family: 'Minecraft';
    font-size: 18pt;
    color: black;
}

#pages b {
    font-family: 'Minecraft';
    font-size: 18pt;
    color: black;
}

#pages a span {
    visibility: hidden;
}

#pages a:hover span {
    display: fixed;
    visibility: visible;
    text-decoration: none;
}

#interests {
    grid-column: span 3;
    display: flex;
    flex-direction: column;
    text-align: center;
    overflow-y: scroll;
}

#interests > h1 {
    font-size: 30pt;
    margin: 4pt 0 8pt 0;

}

#interest-buttons {
    display: block;
}

#interest-buttons img {
    height: 5em;
    margin: 0 1em;
}

#interest-buttons img:hover {
    position: relative;
    bottom: 4pt;
}