/* CSS Document */
@font-face {
    font-family: 'ButterflyKids'; /* Gewünschter Name */
    src: url('../fonts/ButterflyKids-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Sriracha'; /* Gewünschter Name */
    src: url('../fonts/Sriracha-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Pangolin'; /* Gewünschter Name */
    src: url('../fonts/Pangolin-Regular.ttf') format('truetype');
}

body {
    background-color: #1464A7;
    background-image: url("../images/landscape-1844229.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

a {
    color: #004085;
}

/*Portraits gestalten*/
.portrait {
    height: auto;
    border-style: solid;
    border-color: #0069d9;
    border-width: 4px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    padding: 10px 0 0 0;
    box-shadow: 5px 5px 5px rgba(13, 54, 60, 0.4);
}

.ueberschrift {
    text-align: center;
    font-style: normal;
    font-weight: 400;
    font-size: 3rem;
    color: indigo;
    font-family: 'DynaPuff', cursive;
}

.container {
    width: 960px;
    margin-top: 80px;
}

img {
    margin: 0 auto;
    padding: 1.0rem;
    max-width: 90%;
    height: auto;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 1.5rem;
    grid-auto-rows: minmax(100px, auto);
}

.one {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.two {
    grid-column: 3 / 7;
    grid-row: 1 / 3;
}

.three {
    grid-column: 1 / 4;
    grid-row: 3 / 5;
    border-top: #6f42c1 solid thin;
}

.four {
    grid-column: 4 / 7;
    grid-row: 3 / 5;
    border-top: #6f42c1 solid thin;
    font-size: larger;
}

@media screen and (max-width: 575px) {
    .container {
        width: 100%;
        font-size: 1.2rem;
    }

    .portrait {
        max-width: 75%;
    }

    .ueberschrift {
        font-weight: 300;
        font-size: 2rem;
    }


    .wrapper {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0.5rem;
        grid-auto-rows: minmax(100px, auto);
        width: 100%;
    }

    .one {
        grid-column: 2 / 4;
        grid-row: 1 / 3;
        margin-left: -20%;
    }

    .two {
        grid-column: 1 / 4;
        grid-row: 3 / 6;
    }

    .three {
        grid-column: 1 / 4;
        grid-row: 6 / 9;
        border-top: #6f42c1 solid thin;
    }

    .four {
        grid-column: 1 / 4;
        grid-row: 9 / 12;
        border-top: #6f42c1 solid thin;
    }
}

@media screen and (min-width: 576px) {
    .container {
        width: 90%;
    }

    .portrait {
        max-width: 95%;
    }

}

@media screen and (min-width: 768px) {
    .container {
        width: 100%;
    }
}

@media screen and (min-width: 992px) {
    .portrait {
        max-width: 75%;
    }
}

@media screen and (min-width: 1200px) {
    .portrait {
        /*max-width: 75%;*/
        height: auto;
    }
}


/*Navbar unten mit Rahmen*/
.navbar {
    border-bottom-style: solid;
    border-bottom-color: #002752;
    border-bottom-width: thin;
}

.bg-ktp {
    background-color: indigo !important;
}