.clouds-container {
    position: relative;
    max-width: 1100px;
    max-height: 400px;
    width: 100%;
    flex-grow: 1;
    --cloud-width: 140px;
    --sticky-container-width: 700px;
    --sticky-container-left: max(0px, calc((100dvw - var(--sticky-container-width))*0.5));
}

.cloud-wrapper {
    position: absolute;
    width: var(--cloud-width);
    height: var(--cloud-width);
    background: none !important;
}

.cloud {
    position: absolute;
    width: var(--cloud-width);
    height: var(--cloud-width);
    display: flex;
    border-radius: calc(var(--cloud-width) / 2);
    background: #0e25b0;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    color: inherit;
    text-decoration: inherit;
    left: var(--left);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    user-select: none;
}

.cloud-wrapper .cloud {
    position: static;
}

.cloud.left .cloud-card {
    left: 50%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.cloud.right .cloud-card {
    right: 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    justify-content: right;
}

.cloud.left .cloud-card {
    left: 50%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.cloud:active,
.cloud:hover {
    z-index: 2;
}

.cloud > h3 {
    margin: 0;
    transition: all 0s ease;
    position: relative;
    z-index: 1;
}

.cloud:active > h3,
.cloud:hover > h3 {
    z-index: 2;
}

.cloud-card {
    display: flex;
    align-items: center;
    justify-content: left;
    height: 100%;
    position: absolute;
    width: 0;
    box-sizing: border-box;
    padding: 10px 0 10px 0;
    overflow: hidden;
    z-index: 1;
    transition: width ease-out 0.3s, padding-left ease 0.3s, padding-right ease 0.3s;
    border-radius: 40px;
}

.cloud:active .cloud-card,
.cloud:hover .cloud-card {
    width: 300px;
    padding-right: 25px;
    padding-left: 25px;
    z-index: 2;
}

.cloud-card>p {
    overflow: hidden;
    margin: 0 65px;
    min-width: 190px;
    text-transform: none;
}

#cloud1 .cloud,
#cloud1 .cloud-card {
    background: rgb(var(--second-color));
    box-shadow: 0 0 5px rgb(var(--second-color));
}

#cloud2 .cloud,
#cloud2 .cloud-card {
    background: rgb(var(--third-color));
    box-shadow: 0 0 5px rgb(var(--third-color));
}

#cloud3 .cloud,
#cloud3 .cloud-card {
    background: rgb(var(--fourth-color));
    box-shadow: 0 0 5px rgb(var(--fourth-color));
}

#cloud4 .cloud,
#cloud4 .cloud-card {
    background: rgb(var(--fifth-color));
    box-shadow: 0 0 5px rgb(var(--fifth-color));
}

#cloud5 .cloud,
#cloud5 .cloud-card {
    background: rgb(var(--sixth-color));
    box-shadow: 0 0 5px rgb(var(--sixth-color));
}



@media screen and (min-width: 500px) {
    .cloud.stuck {
        position: fixed;
        z-index: 11;
        top: -100px;
        transform: none;
        align-items: start;
        left: var(--left);
    }

    .cloud.stuck .cloud-card {
        display: none !important;
    }

    .cloud > h3.stuck {
        position: fixed;
        z-index: 11;
        top: 0;
        align-items: start;
        font-size: 1em;
        transform: translateX(-50%);
        left: calc(var(--left) + var(--cloud-width) / 2);
        transition: transform 0s ease;
    }

    .cloud.stuck > h3 {
        transition: all .3s ease;
    }

    #cloud1 .cloud.stuck {
        z-index: 15;
        --left: var(--sticky-container-left);
    }

    #cloud2 .cloud.stuck {
        z-index: 14;
        --left: calc(var(--sticky-container-left) + (min(100dvw - var(--sticky-container-left), var(--sticky-container-width)) - var(--cloud-width)) / 4);
    }

    #cloud3 .cloud.stuck {
        z-index: 13;
        --left: calc(var(--sticky-container-left) + (min(100dvw - var(--sticky-container-left), var(--sticky-container-width)) - var(--cloud-width)) / 4 * 2);
    }

    #cloud4 .cloud.stuck {
        z-index: 12;
        --left: calc(var(--sticky-container-left) + (min(100dvw - var(--sticky-container-left), var(--sticky-container-width)) - var(--cloud-width)) / 4 * 3);
    }

    #cloud5 .cloud.stuck {
        z-index: 11;
        --left: calc(var(--sticky-container-left) + (min(100dvw - var(--sticky-container-left), var(--sticky-container-width)) - var(--cloud-width)));
    }

    .cloud.stuck:active,
    .cloud.stuck:hover {
        z-index: 20 !important;
    }
}

.hamburger-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    background: rgba(var(--card-color), .5);
}

.hamburger {
    padding: 15px 25px;
    width: max-content;
    cursor: pointer;
}

.hamburger .bar {
    width: 25px;
    height: 2px;
    margin-bottom: 5px;
    background: rgb(var(--font-color));
}

.hamburger .bar:last-child {
    margin: 0;
}

@media screen and (max-width: 499px) {
    .hamburger-container.enabled {
        opacity: 1;
        visibility: visible;
    }

    .hamburger-opened .cloud {
        position: fixed;
        left: 15px;
        z-index: 31;
        --top: 46px;
        --gap: 15px;
        --height: min(var(--cloud-width), calc((100svh - var(--top) - var(--gap) * 6) / 5));
        height: var(--height);
    }

    .hamburger-opened #cloud1 .cloud {
        top: calc(var(--top) + var(--gap));
    }

    .hamburger-opened #cloud2 .cloud {
        top: calc(var(--top) + var(--gap)*2 + var(--height));
    }

    .hamburger-opened #cloud3 .cloud {
        top: calc(var(--top) + var(--gap)*3 + var(--height) * 2);
    }

    .hamburger-opened #cloud4 .cloud {
        top: calc(var(--top) + var(--gap)*4 + var(--height) * 3);
    }

    .hamburger-opened #cloud5 .cloud {
        top: calc(var(--top) + var(--gap)*5 + var(--height) * 4);
    }

    .hamburger-opened .cloud-card {
        display: none;
    }

    .hamburger-opened .hamburger .bar {
        opacity: 0;
    }

    .hamburger-opened .hamburger .bar:first-child {
        opacity: 1;
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger-opened .hamburger .bar:last-child {
        opacity: 1;
        transform: translateY(-7px) rotate(-45deg);
    }
}