body {
    margin: 0;
    background-color: #222;
    color: #c7d;
}

a {
    color: rgb(209, 80, 235);
}

ul {
    list-style: none;
}

.container {}

.section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#logo {
    max-width: 256px;
    max-height: 256px;
}

#page-title {
    margin-bottom: 4px;
    font-size: 2.5em;
}

#page-subtitle {
    font-size: 1.25em;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 16px;
    row-gap: 16px;
}

.gallery-game-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
}

.gallery-game {
    position: relative;
    width: 256px;
    height: 144px;
}

.gallery-game-description {
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000000e0;
    color: rgb(240 167 255);

    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-game:hover .gallery-game-description {
    visibility: visible;
}

.gallery-game-description-title {
    font-size: 1.25em;
}

.dev-name {
    font-size: 1.15em;
}

.dev-links {
    display: flex;
    gap: 16px;
}

.dev-link-icon {
    font-size: 1.5em;
}

#header {
    margin-bottom: 1rem;
    background-color: #000;
    width: 100%;
    height: 3rem;
    display: flex;
    align-items: center;
}

#header-content {
    margin: 1rem;
}

#header-title {
    font-size: 1.5em;
}

.dev-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dev-avatar {
    border-radius: 50%;
    background: linear-gradient(45deg, #d3bae8 0%, #d3bae8 5%, transparent 5%, transparent 10%, #d3bae8 10%, #d3bae8 15%, transparent 15%, transparent 20%, #d3bae8 20%, #d3bae8 25%, transparent 25%, transparent 30%, #d3bae8 30%, #d3bae8 35%, transparent 35%, transparent 40%, #d3bae8 40%, #d3bae8 45%, transparent 45%, transparent 50%, #d3bae8 50%, #d3bae8 55%, transparent 55%, transparent 60%, #d3bae8 60%, #d3bae8 65%, transparent 65%, transparent 70%, #d3bae8 70%, #d3bae8 75%, transparent 70%, transparent 80%, #d3bae8 80%, #d3bae8 85%, transparent 85%, transparent 90%, #d3bae8 90%, #d3bae8 95%, transparent 95%), linear-gradient(135deg, #d3bae8 0%, #d3bae8 5%, transparent 5%, transparent 10%, #d3bae8 10%, #d3bae8 15%, transparent 15%, transparent 20%, #d3bae8 20%, #d3bae8 25%, transparent 25%, transparent 30%, #d3bae8 30%, #d3bae8 35%, transparent 35%, transparent 40%, #d3bae8 40%, #d3bae8 45%, transparent 45%, transparent 50%, #d3bae8 50%, #d3bae8 55%, transparent 55%, transparent 60%, #d3bae8 60%, #d3bae8 65%, transparent 65%, transparent 70%, #d3bae8 70%, #d3bae8 75%, transparent 70%, transparent 80%, #d3bae8 80%, #d3bae8 85%, transparent 85%, transparent 90%, #d3bae8 90%, #d3bae8 95%, transparent 95%);
    background-size: 3em 3em;
    background-color: #fbebff;
}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px;
    /* Use half of the width (120/2 = 60), to center the tooltip */
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

.cursor-pointer {
    cursor: pointer;
}