body {
    margin: 0;
    --primary-color: 162, 219, 203;
    --fourth-color: 55, 103, 176; /*185, 222, 171;*/
    --third-color: 125, 197, 107;
    --second-color: 89, 210, 190;
    --fifth-color: 203, 63, 44;
    --sixth-color: 242, 146, 80;
    /*12, 76, 88*/
    --font-color: 42, 56, 53;
    --card-color: 255, 255, 255;
    --tag-color: /*200, 235, 192;*/174, 237, 159;
}

.page-background {
    background-image: url("../images/resume.jpeg");
    background-position: 63.21% 50%;
}

.header-section * {
    --font-color: 255, 255, 255;
}

.header-section {
    width: max(66%, 700px);
    max-width: 100%;
}

.ru #cloud1 h3,
.ru #cloud5 h3 {
    font-size: 16px;
}

.ru #cloud1 h3.stuck,
.ru #cloud5 h3.stuck {
    font-size: 14px;
}

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

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

#cloud1 .cloud, #cloud1 .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));
}

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



#cloud2 {
    bottom: 22%;
    left: calc(max(26%, 80px) - var(--cloud-width) / 2);
}

#cloud4 {
    top: 28%;
    right: calc(max(24%, 80px) - var(--cloud-width) / 2);
}

#cloud1 {
    bottom: 8%;
    left: calc(max(14%, 80px) - var(--cloud-width) / 2);
}

#cloud5 {
    top: 41%;
    right: calc(max(10%, 80px) - var(--cloud-width) / 2);
}

#cloud3 {
    top: 14%;
    left: calc(max(50%, 80px) - var(--cloud-width) / 2);
}
/*
#cloud2 .cloud-card {
    left: 50%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#cloud4 .cloud-card {
    right: 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    justify-content: right;
}
#cloud1 .cloud-card {
    left: 50%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
#cloud5 .cloud-card {
    right: 50%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    justify-content: right;
}
#cloud3 .cloud-card {
    left: 50%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}*/
#cloud2 .cloud-card>p {
    margin-right: 0;
}
#cloud4 .cloud-card>p {
    margin-left: 0;
    text-align: right;
}
#cloud1 .cloud-card>p {
    margin-right: 0;
}
#cloud5 .cloud-card>p {
    margin-left: 0;
    text-align: right;
}
#cloud3 .cloud-card>p {
    margin-right: 0;
}

#cloud1>h3 {
    font-size: 16px;
}

#skills .cards {
    gap: 15px;
}

#skills .card {
    padding: 20px;
}

@media screen and (max-width: 1175px) {
    #cloud3 {
        top: 3%;
    }

    #cloud5 {
        top: 35%;
    }

    #cloud1 {
        bottom: 16%;
    }
}

@media screen and (max-width: 1000px) {
    #skills .cards {
        gap: 15px;
    }

    #skills .card {
        padding: 15px 20px;
    }
}

@media screen and (max-width: 740px) {
    #skills .cards {
        gap: 10px;
    }

    #skills .card {
        padding: 10px 15px;
    }
}

@media screen and (max-width: 605px) {
    #cloud3 .cloud-card {
        top: 50%;
        left: 0;
        border-bottom-left-radius: 40px;
    }

    #cloud3:active .cloud-card,
    #cloud3:hover .cloud-card {
        width: 240px;
    }

    #cloud3 .cloud-card>p {
        margin: 0;
    }

    #skills .cards {
        gap: 10px;
    }

    #skills .card {
        padding: 7px 15px;
    }
}

@media screen and (max-width: 500px) {
    #cloud1 {
        bottom: 12%;
    }
}

@media screen and (max-width: 405px) {
    #cloud2 .cloud-card {
        top: -50%;
        left: 0;
        border-top-left-radius: 40px;
    }
    #cloud4 .cloud-card {
        top: -50%;
        right: 0;
        border-top-right-radius: 40px;
    }
    #cloud1 .cloud-card {
        top: 50%;
        left: 0;
        border-bottom-left-radius: 40px;
    }
    #cloud5 .cloud-card {
        top: 50%;
        right: 0;
        border-bottom-right-radius: 40px;
    }

    #cloud2:active .cloud-card,
    #cloud4:active .cloud-card,
    #cloud1:active .cloud-card,
    #cloud5:active .cloud-card,
    #cloud2:hover .cloud-card,
    #cloud4:hover .cloud-card,
    #cloud1:hover .cloud-card,
    #cloud5:hover .cloud-card {
        width: 240px;
    }

    #cloud2 .cloud-card>p,
    #cloud4 .cloud-card>p,
    #cloud1 .cloud-card>p,
    #cloud5 .cloud-card>p {
        margin: 0;
    }

    #skills .cards {
        gap: 8px;
    }

    #skills .card {
        padding: 4px 10px;
    }
}

@media screen and (max-width: 350px) {
    #cloud3 .cloud-card {
        left: 50%;
        transform: translateX(-50%);
        border-radius: 40px;
    }
}