#pageContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    flex-wrap: wrap;
    padding-top: clamp(6px, 2vw, 22px);
}

#pageContainer {
    padding-right: clamp(20px, 20vw, 20vw);
    padding-left: clamp(20px, 20vw, 20vw);
}

@media only screen and (min-width: 768px) {
    #fliesstext {
        column-count: 2;
        font-size: clamp(6px, 2vw, 22px);
    }
    #titel {
        font-size: clamp(7px, 2.5vw, 24px)
    }
    #untertitel {
        font-size: clamp(6px, 2vw, 22px);
    }
}

@media only screen and (max-width: 767px) {
    #fliesstext {
        font-size: clamp(7px, 2.5vw, 24px);
    }
    #titel {
        font-size: clamp(8px, 3vw, 26px);
    }
    #untertitel {
        font-size: clamp(7px, 2.5vw, 24px);
    }
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #pageContainer {
        display: flex;
        min-height: 80vh;
        align-content: flex-start;
    }
    #textContainer {
        flex-grow: 1;
    }
}


#text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#titel, #untertitel {
    justify-self: center;
}

#untertitel {
    padding-bottom: clamp(6px, 2vw, 22px);
}

#fliesstext {
    text-align: left;
}

@media only screen and (min-width: 601px) {
    #fliesstext {
        column-count: 2;
    }
}

button {
    padding: clamp(6px, 2vw, 22px);
    margin: clamp(4px, 1vw, 16px);
    text-align: center;
    border-radius: 25px;
    box-shadow: 0 2.5px 5px 0 rgba(0,0,0,0.5);
    background-color: var(--lightblue);
    color: white;
    font-size: clamp(5px, 1.5vw, 16px);
    font-family: "carlito", serif;
}

button:hover {
    background-color: var(--darkblue);
    cursor: pointer;
}

button:active {
    box-shadow: none;
    transform: translateY(2.5px);
}