@font-face {
    font-family: "IBM";
    src: url("/fonts/IBM_VGA_8x16.woff?#iefix") format("truetype");
}

* {
    box-sizing: border-box;
}

body {
    font-family: "IBM";
    font-size: 120%;
    letter-spacing: 0.01em;

    color: var(--textColor);
    background-color: var(--BGColor);
    
    max-width: 1000px;

    margin-inline: auto;
    margin: auto;
    padding: 20px;
}

.content {
    display: flex;
    /* justify-content: center; */

    gap: 20px;
    /* padding-top: 20px; */
}

nav {
    height: min-content;
    position: sticky;
    top: 20px;
}

.column {
    padding: 5px;
    border: 10px double var(--columnBorder);
    
    box-shadow: 10px 10px inset var(--columnShadow);
    background-color: var(--columnBG);
    
    /* width: 100%; */
    height: min-content;
    min-width: min-content;
}

.box {
    margin: 20px;
    border: 5px double var(--boxBorder);
    padding: 15px;

    box-shadow: 10px 10px var(--boxShadow);
    background-color: var(--boxBG);
}


h1,
.date {
    text-align: center;
}

h1,
h2,
h3 {
    font-weight: normal;
}

p {
    color: var(--pColor);
}

li {
    color: var(--list);
    padding-bottom: 10px;
}

img {
    display: block;
}

.center,
.dot {
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dot {
    top: 50%;

    width: 1100px;
    height: 1100px;

    border: 20px double var(--dotBorder);
    border-radius: 50%;

    background-color: var(--dotBG);
}





.grid,
.stamp {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.stamp {
    gap: 10px;
    image-rendering:pixelated
}

.grid {
    gap: 20px;
    margin: 20px;
}

.grid .box {
    margin: 0px;
    width: min-content;
}

.grid img {
    width: 150px;
    height: 150px;
    object-fit: cover;
}


.thumbnail {
    width: 150px;
    height: 150px;
    background-size: 100%;
    background-repeat: no-repeat;
}

button {
    margin: 5px;
    padding: 5px;
    
    font-size: 100%;
    font-family: inherit;

    color: var(--buttonText);
    background-color: var(--buttonBG);
    border: double 5px var(--buttonBorder);
}


/* unvisited and visited link */
a:link,
a:visited {
    color: var(--link);
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: var(--linkHover);
    text-decoration: underline;
}

/* selected link */
a:active {
    color: var(--linkClick);
    text-decoration: underline;
}