:root {
    --maincolor: #1c1c1b;
    --accentcolor: #8b8d83;
    --foregroundcolor: #ddd6d0;
    --backgroundcolor: #c2bbae;
    --darkcolor: #947170;
    --froschgruen: #68a36f;
    --pagebackgroundcolor: #f3f1efd7;
    --success: rgba(126, 197, 33, 0.5);
    --failure: rgba(255, 8, 0, 0.7);



    /* Dark mode ideas: */
    /* --maincolor: #1c1c1b;
    --accentcolor: #8b8d83;
    --foregroundcolor: #ddd6d0;
    --backgroundcolor: #c2bbae;
    --darkcolor: #947170;
    --froschgruen: #68a36f;
    --pagebackgroundcolor: #8B878D;
    --success: rgba(126, 197, 33, 0.5);
    --failure: rgba(255, 8, 0, 0.7); */
    
    /* Old stuff: */
    /* --maincolor: #313e50; */
    /* --pagebackgroundcolor: #f3f1ef; */
}

* {
    font-family: 'Aclonica' !important; 
}

html, body {
    height: 100%;
    margin: 0;
}

.pageinfo {
    visibility: hidden;
}

/* .page {
    display: flex;
    flex-direction: column;
    height: 100vh;
} */

h1, h2, h3, h4, p {
    color: var(--maincolor);
    font-family: 'Aclonica';
    font-weight: lighter;
    text-align: left;
    padding: 0;
    margin: 0;
}

hr {
    border: 1px solid var(--maincolor); 
    height: 1px;
    fill: var(--maincolor);
    width: 100%;
}

p {
    padding: 10px;
    margin: 0;
}

.upperpage {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--foregroundcolor);
    padding: 10px;
    z-index: 100;
    border: 0;
    border-bottom: 2px solid var(--accentcolor);
    /* box-shadow: 2px 2px  var(--accentcolor); */
}

.lowerpage {
    min-height: calc(100vh - 20px); /* Anpassen basierend auf der Höhe des Headers */
    background-color: var(--pagebackgroundcolor);
}
/* 
.upperpage hr {
    color: black;
    border-style: solid;
} */

/* .lowerpage hr {
    color: var(--maincolor);
    border-style: solid;
    border-width: 1px;
} */