header nav {
    background-color: #69c1e5;
    border-bottom: 2px solid #fddd2a;
    color: var(--bs-body-color);
}

main {
    margin-top: 57px;
}

footer {
    margin-top: 1.5em;
    background-color: #69c1e5;
    border-top: 2px solid #fddd2a;
}

footer a {
    color: var(--bs-body-color);
}

footer a:hover {
    color: var(--bs-body-color);
    font-style: italic;
    text-decoration: none;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.page-header {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 17em;
    margin-bottom: 5em;
    box-shadow: 0 1px 5px #c2c2c2;
}

.start-header {
    height: 40em;
}

.page-header > .container {
    position: relative;
}

.page-header .slogan {
    position: absolute;
    top: 2em;
}

.page-header .me-image {
    background: url("/themes/frontend/Views/sonja/img/sonja_vonboth.png") no-repeat center center;
    background-size: cover;
    width: 36em;
    height: 32em;
    position: absolute;
    right: 0;
}

.start-header .slogan {
    position: absolute;
    top: 12em;
}

.start-header .me-image {
    background: url("/themes/frontend/Views/sonja/img/sonja_vonboth.png") no-repeat center center;
    background-size: cover;
    width: 40em;
    height: 44em;
    position: absolute;
    right: 0;
    top: 0.5em;
}

.circle {
    position: absolute;
    opacity: .4;
}

.circle1 {
    background: linear-gradient(to top right, #6bbb62, #fddd2a);
    top: 5em;
    left: 1em;
    width: 40em;
    height: 40em;
    border-radius: 20em;
    animation: circle1_circle;
    animation-duration: 30s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.circle2 {
    background: linear-gradient(to bottom right, #69c1e5, #fddd2a);
    animation: circle2_circle;
    animation-duration: 50s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}

.circle3 {
    background: linear-gradient(to right, #6bbb62, #69c1e5);
    animation: circle3_circle;
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

@keyframes circle1_circle {
    0% {
        top: -10em;
        left: 1em;
        width: 40em;
        height: 40em;
        border-radius: 20em;
    }
    100% {
        top: -30em;
        left: 10em;
        width: 60em;
        height: 60em;
        border-radius: 30em;
    }
}

@keyframes circle2_circle {
    0% {
        top: 20%;
        left: 15%;
        width: 60em;
        height: 60em;
        border-radius: 30em;
    }

    100% {
        top: 40%;
        left: 2%;
        width: 100em;
        height: 100em;
        border-radius: 50em;
    }
}

@keyframes circle3_circle {
    0% {
        width: 80em;
        height: 80em;
        border-radius: 40em;
        top: 0;
        right: -10em;
    }
    100% {
        top: -10em;
        right: 15%;
        width: 60em;
        height: 60em;
        border-radius: 30em;
    }
}

@media (max-width: 768px) {
    .page-header .slogan {
        top: 1em;
        left: 2em;
    }

    .page-header {
        height: 20em;
    }

    .page-header .me-image {
        width: 21em;
        height: 27em;
        float: inherit;
        position: absolute;
        right: 0;
        top: 7em;
    }
}