body {
    margin: 0;
    font-family: "Alata", Helvetica, sans-serif;
    background-color: var(--main-background-color);
}

.overlap-group {
    background-color: var(--formular-frame-background-color);

    width: 90%;
    min-height: 1000px;

    border: 2px solid var(--border-color-of-frame);
    border-radius: 18px;

    margin-left: 5%;
    margin-bottom: 7%;
    margin-top: 7%;

    padding-bottom: 6%;

    color: var(--formular-frame-text-color);
    justify-content: center;
    align-items: center;
}

.introduction {
    margin-top: 7%;
    margin-bottom: 10%;
    text-align: center;
    font-size: 400%;
}

.question-and-answer {
    text-align: left;
    margin: 10% 5% 5% 5%;
}

.question {
    font-size: 210%;
}

.answer {
    font-size: 130%;
}

.underlined-text {
    text-decoration: underline;
    font-size: 130%;
}

.weiterleitung {
    text-decoration: underline;
    color: var(--primary-text-color);
    font-size: 130%;
}

.farbiger-link {
    color: var(--link-button-color);
    font-size: 130%;
}


/* -------------------- MEDIA QUERIES ---------------------- */

/* Tablets */
/* Don't needed */

/* Handys*/
@media (min-width: 300px) and (max-width: 600px) {
    .introduction {
        font-size: 300%;
    }

    .question {
        font-size: 180%;
    }

    .answer, .underlined-text, .weiterleitung, .farbiger-link {
        font-size: 120%;
    }
}

/* Sehr dünne Bildschirme*/
@media (min-width: 200px) and (max-width: 299px) {
    .introduction {
        font-size: 200%;
    }

    .question {
        font-size: 140%;
    }

    .answer, .underlined-text, .weiterleitung, .farbiger-link {
        font-size: 80%;
    }
}

/* Ausnahmebehandlung: Horizontaler Modus auf schmalen Endgeräten */
@media (orientation: landscape) and (max-height: 601px){
    .introduction {
        font-size: 200%;
    }

    .question {
        font-size: 140%;
    }

    .answer, .underlined-text, .weiterleitung, .farbiger-link {
        font-size: 80%;
    }
}