@font-face {
    font-family: "LineSeed";
    src: url("fonts/LINESeedSans_W_Th.woff2") format("woff2"),
        url("fonts/LINESeedSans_W_Th.woff") format("woff");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "LineSeed", sans-serif;
    font-weight: 100;
    background: black;
    color: #fff;
    font-size: 10px;

}


.header-text,
.header-text p {
    margin: 0;
    padding-left: 5px;
    font-size: 55px;
    color: white;


}

.description-container {
    display: grid;
    grid-template-columns: 250px 1fr
}

.description {
    font-size: 15px;
    text-align: left;
    color: white;
    padding-left: 12px;
    /* adding some padding to balance with title and what not. Some space to the left for styling means */



}

.counter-wrapper {
    grid-column-start: 1;
    font-size: 15px;
    text-align: left;
    padding-left: 12px;

}

/* init the grid layout for the archive elements. CONSTRAINT based column init, used with modern websites apparantly */

.archive {
    margin-top: 2rem;
}


.archive-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));


}

.archive-item {
    aspect-ratio: 1.5 / 1;
    animation: imageFade 0.5s ease forwards;


}

.archive-item img {
    width: 100%;
    height: 100%;
    display: block;



}

@keyframes imageFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}