.banner {
    height: 80vh;
    position: relative;

    --starting-animation-speed: 500ms;
    --between-intervals: 300ms;
    --end-timing-of-swipe: calc(var(--starting-animation-speed) + var(--between-intervals)*2)
}

.swipe-element {
    height: 100%;
    width: 100%;
    opacity: 1;
    animation: header-intro ease-in-out normal;
    z-index: -1;
    position:absolute;
    
    --color-h: 244;
    --color-s:23.9%;
    --color-l:58.2%;
}

.swipe-element.el {
    animation-duration: calc(var(--starting-animation-speed));
    background-color: hsl(calc(var(--color-h) - 20), var(--color-s),var(--color-l));
}

.swipe-element.el2 {
    animation-duration: calc(var(--starting-animation-speed) + var(--between-intervals)*1);
    background-color: hsl(calc(var(--color-h) - 15), var(--color-s),var(--color-l));
}

.swipe-element.el3 {
    animation-duration: calc(var(--starting-animation-speed) + var(--between-intervals)*2);
    background-color: hsl(calc(var(--color-h)), var(--color-s),var(--color-l));
}

@keyframes header-intro {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0%);
    }
}

.banner-container {
    position: absolute;
    text-align: center;

    color: white;
    border: 10px double white;
    width: 40%;

    animation: floatingMovement ease-out forwards;
    opacity: 0;
    animation-delay: calc(var(--end-timing-of-swipe) - var(--between-intervals)*2.0);
    animation-duration: 500ms;

    box-shadow: 0px 0px 120px 0px var(--box-shadow-color);
    -webkit-box-shadow: 0px 0px 120px 0px var(--box-shadow-color);
    -moz-box-shadow: 0px 0px 120px 0px var(--box-shadow-color);
}

@keyframes floatingMovement {
    0% {
        transform: translate(-50%,-70%);
        opacity: 0;
    }

    100% {
        opacity: 1;
        transform: translate(-50%,-50%);
    }
}

.person-name {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    display: flex;
    gap: 2rem;

    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    padding: 2rem;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);

    background-color: var(--secondary-bg-color);
}

@media (prefers-reduced-motion: reduce) { /* For accessibility */
    .swipe-element,.banner-container {
        animation: none;
    }

    .banner-container {
        opacity: 1;
    }
}


.contacts {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.contacts img, svg{
    width: auto;
    height: calc(clamp(1rem, 2.5vw, 1.5rem) * 3);
    transition: scale 0.15s ease-in-out;
}


.contacts img:hover, svg:hover {
    scale: 1.06;
}