html,
body {
    background-color: #181818;
    height: 100%;
    margin: 0;
    padding: 0;
}

.top-header {
    font-size: 70px;
}


.inconsolata-regular {
    font-family: "Inconsolata", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

.inconsolata-regular-bold {
    font-family: "Inconsolata", serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

.container-column {
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: center;
    padding-top: 10px;
    height: 100vh; /* Füllt die gesamte Bildschirmhöhe aus */
    width: 100vw;
}

.container-row {

    display: flex;
    flex-direction: row;
    justify-content: top;
    align-items: left;

    padding: 10px; /* Abstand zum Inhalt */
    width: 650px; /* Breite der Box */
}

.centered-header-box {
    background-color: #383838; /* Beispiel-Hintergrundfarbe */
    color: #efebdc;
    padding: 20px; /* Abstand zum Inhalt */
    width: 80%; /* Breite der Box */
    max-width: 600px; /* Maximale Breite */
    margin-top: 10px;
}
.centered-box {
    background-color: #f0f0f0; /* Beispiel-Hintergrundfarbe */
    color: #181818;
    padding: 20px; /* Abstand zum Inhalt */
    width: 80%; /* Breite der Box */
    height: auto;
    max-width: 600px; /* Maximale Breite */
    margin-top: 10px;
}

.centered-box-square {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #181818;
    text-align: center;
    
    width: 150px;
    height: 150px;
    margin: auto;
}

.project-1 {
    background-image: url("../images/pokeball.jpg");
    color: #efebdc;
    /*color: white;*/
    background-size: cover;
    background-position-x: center;
    background-position-y: -35px;
    background-repeat:repeat-y;
}

.project-2 {
    background-image: url("../images/linux.png");
    background-size: cover;
    color: #efebdc;
    background-position-x: 44%;
    background-position-y: 45px;
    background-repeat:repeat-y;
}

.project-3 {
    background-image: url("../images/raspi.png");
    background-size: cover;
    color: #efebdc;
    background-position-x: center;
    background-position-y: -30px;
    background-repeat:repeat-y;
}


.project-4 {
    background-image: url("../images/proc2.png");
    background-size: cover;
    color: #efebdc;
    background-position-x: center;
    background-position-y: 30px;
    background-repeat:repeat-y;
}