@font-face{
    font-family: "Kiwisoda";
    src :url("Kiwisoda.ttf") format("truetype");
}

@font-face {
    font-family: "RuneScape";
    src: url("https://db.onlinewebfonts.com/t/b1db63620527ed94e059e1d6106c1ce7.eot");
    src: url("https://db.onlinewebfonts.com/t/b1db63620527ed94e059e1d6106c1ce7.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/b1db63620527ed94e059e1d6106c1ce7.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/b1db63620527ed94e059e1d6106c1ce7.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/b1db63620527ed94e059e1d6106c1ce7.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/b1db63620527ed94e059e1d6106c1ce7.svg#RuneScape Plain 12")format("svg");
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Kiwisoda", sans-serif;
}

body{
    display: flex;
    justify-content: center;
    background-color: black;
    font: 1.2em sans-serif;
    font-size: 32px;;
    font-family: "Runescape","Courier New",monospace;
}

.center-container {
    width: 50%;
    background-color: aquamarine;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}



/* some cards */

img {
    max-width: 100%;
}

.cards {
    max-width: 100%;
    width: 100%;
    margin: 2em auto;
    padding: 0 2em;
    box-sizing: border-box;

    display: grid;
    /* grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); */
    /* grid-template-columns: repeat(2, 1fr); */
    grid-template-columns: 6fr 4fr;
    grid-gap: 1em;
    flex-flow: column;
}

.card {
    border: 1px solid #999999;
    border-radius: 3px;

    display: grid;
    grid-template-rows: max-content 200px 1fr;
}

.card img {
    object-fit: cover;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.card h2 {
    margin: 0;
    padding: 0.5rem;
}

.card .content {
    padding: 0.5rem;
}

.card footer {
    background-color: #333333;
    color: white;
    padding: 0.5rem;
} 


/* some textures on the sides */

.page {
    background-image: url("stubert_head.png"), url("stubert_head.png");
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    background-repeat: repeat-y, repeat-y;  /* repeat vertically */
    background-position: calc(25% - 50px) top, calc(75% + 50px) top;
    background-size: 100px auto, 100px auto;
}