@media screen and (max-width: 786px) {

    *,
    *::after,
    *::before {
        box-sizing: border-box;
    }
    body {
        margin: 0;
        padding: 10px;
    }
    :root {
        --background: white;
    }
    header {
        justify-content: top;
    }
    header nav {
        position: fixed;
        z-index: 1;
        inset: 0;
        background-color: var(--background);
        opacity: 0;
        visibility: hidden;
        transition: visibility 1s, opacity 1s;
    }
    header label {
        display: inline-block;
        position: relative;
        z-index: 9;
        font-size: 45px;
        color: red;
    }
    header input:checked~nav {
        opacity: 1;
        visibility: visible;
    }
    nav ul li {
        display: block;
    }
    .menuCheckbox {
        font-size: 50px;
    }
    /*Home*/
    main.home {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    main.home img {
        object-fit: cover;
        border-radius: 3rem;
        width: 100%;
        height: 400px;
    }
    main.home h1 {
        grid-row: 1;
        font-size: 60px;
        text-align: center;
    }
    main.home h2 {
        font-size: 30px;
        text-align: center;
    }
    /*Projects*/
    main.projects {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
    /*About Me*/
    main.about-me {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
    main.about-me {
        text-align: center;
    }
    main.about-me h1 {
        font-size: 30px;
        padding: 10px;
    }
    .bild-hinten {
        display: none;
    }
    main.about-me p {
        font-size: 20px;
    }
    /*Safe Place*/
    main.safe-place {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        font-size: 20px;
    }
    /*Inhaler*/
    main.inhaler {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        font-size: 20px;
    }
    /*Skateboard*/
    main.skateboard {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        font-size: 20px;
    }
    /*Contact*/
    main.contact {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30 px;
        border-radius: 3rem;
    }
    .steuer {
        font-size: 20px;
    }
    .adresse {
        font-size: 20px;
    }
    .adresse a {
        font-size: 20px;
        padding-top: 90px;
    }
    .hochschule {
        font-size: 20px;
    }
    /*Footer*/
    footer p {
        padding: 10px;
    }
    footer div {
        font-size: 20px;
    }
    .footer,
    .schutz {
        margin-top: auto;
        font-size: 20px;
        display: grid;
        justify-content: space-between;
    }
    .datenschutzerklärung {
        text-align: justify;
    }
    main.datenschutzerklärung h1 {
        font-size: 30px;
    }
    main.datenschutzerklärung h2 {
        font-size: 20px;
    }
    main.datenschutzerklärung {
        font-size: 20px;
    }
}