.round-card-container,
.technologies-container {
    --django-size: 74px;
    --rest-size: 144px;
    --postgres-size: 70px;
    --php-size: 75px;
    --html-size: 74px;
    --mysql-size: 99px;
    --laravel-size: 52px;
    --devops-size: 110px;
    --yarn-size: 80px;
    --node-size: 108px;
    --css-size: 74px;
    --react-size: 75px;
    --github-size: 100px;
    --java-size: 70px;
    --python-size: 90px;
    --javascript-size: 80px;
    --vuejs-size: 75px;
}

.technologies-container {
    display: flex;
    flex-direction: row;
    height: 600px;
    margin: 72px 0;
    width: 100%;
}

.technologies-container > div {
    height: 100%;
    position: relative;
}

.technologies-container > div:nth-child(1) {
    width: 40%;
}

.technologies-container > div:nth-child(2) {
    width: 20%;
}

.technologies-container > div:nth-child(3) {
    width: 40%;
}

.django-wrapper,
.rest-wrapper,
.postgres-wrapper,
.php-wrapper,
.html-wrapper,
.mysql-wrapper,
.laravel-wrapper,
.devops-wrapper,
.yarn-wrapper,
.node-wrapper,
.css-wrapper,
.react-wrapper,
.github-wrapper,
.java-wrapper,
.python-wrapper,
.javascript-wrapper,
.vuejs-wrapper {
    background: #f5f5f5;
    border-radius: 50%;
    border: var(--ek-secondary-border);
    box-shadow: 4px 4px 0px #232227;
    padding: 20px;
    position: absolute;
    width: fit-content;
}

/* primer columna */
.django-wrapper {
    top: 30px;
    left: 25%;
}

.rest-wrapper {
    left: -5%;
    top: calc(50% - var(--rest-size) / 2);
}

.postgres-wrapper {
    bottom: 55px;
    left: 30%;
}

.php-wrapper {
    top: 45%;
    left: 50%;
}

.mysql-wrapper {
    right: 10%;
    top: 8%;
}

.laravel-wrapper {
    right: -4%;
    top: calc(50% - var(--laravel-size));
}

.html-wrapper {
    bottom: 5%;
    right: 10%;
}

/* enmedio */
.devops-wrapper {
    top: -5%;
}

.node-wrapper {
    top: calc(60% - var(--node-size));
    right: 0;
}

.yarn-wrapper {
    bottom: -5%;
    left: calc(50% - var(--yarn-size));
}

/* columna derecha */
.css-wrapper {
    top: 15%;
    left: -2%;
}

.python-wrapper {
    bottom: 10%;
    left: 5%;
}

.react-wrapper {
    top: 4%;
    right: 35%;
}

.java-wrapper {
    top: 45%;
    left: calc(45% - var(--java-size));
}

.vuejs-wrapper {
    bottom: 0;
    left: 50%;
}

.github-wrapper {
    right: 5%;
    top: 20%;
}

.javascript-wrapper {
    right: 0;
    bottom: 20%;
}

.icon-html {
    background-image: url(../assets/technology/HTML5_logo.png);
}
.icon-css {
    background-image: url(../assets/technology/CSS3_logo.png);
}

.django {
    background-image: url(../assets/technology/Django-Logo.png);
    height: var(--django-size);
    width: var(--django-size);
}

.github {
    background-image: url(../assets/technology/gitHub.png);
    height: var(--github-size);
    width: var(--github-size);
}

.logo-java {
    background-image: url(../assets/technology/Java-Logo.png);
    height: var(--java-size);
    width: var(--java-size);
}

.logo-javascript {
    background-image: url(../assets/technology/javaScript.png);
    height: var(--javascript-size);
    width: var(--javascript-size);
}

.logo-mysql {
    background-image: url(../assets/technology/logo-mysql.png);
    height: var(--mysql-size);
    width: var(--mysql-size);
}

.logo-postgres-sql {
    background-image: url(../assets/technology/postgresql.png);
    height: var(--postgres-size);
    width: var(--postgres-size);
}

.logo-rest {
    background-image: url(../assets/technology/rest.png);
    height: var(--rest-size);
    width: var(--rest-size);
}

.logo-yarn {
    background-image: url(../assets/technology/yarn.png);
    height: var(--yarn-size);
    width: var(--yarn-size);
}

.logo-vuejs {
    background-image: url(../assets/technology/vuejs.png);
    height: var(--vuejs-size);
    width: var(--vuejs-size);
}

.logo-devops {
    background-image: url(../assets/technology/devops.png);
    height: var(--devops-size);
    width: var(--devops-size);
}

.logo-laravel {
    background-image: url(../assets/technology/Laravel.png);
    height: var(--laravel-size);
    width: var(--laravel-size);
}

.logo-node {
    background-image: url(../assets/technology/node.png);
    height: var(--node-size);
    width: var(--node-size);
}

.logo-php {
    background-image: url(../assets/technology/PHP.png);
    height: var(--php-size);
    width: var(--php-size);
}

.logo-python {
    background-image: url(../assets/technology/python.png);
    height: var(--python-size);
    width: var(--python-size);
}

.logo-react {
    background-image: url(../assets/technology/React.png);
    height: var(--react-size);
    width: var(--react-size);
}

@media (max-width: 1200px) {
    .round-card-container,
    .technologies-container {
        --technologies-md-size: 15px;
    }

    .django-wrapper,
    .rest-wrapper,
    .postgres-wrapper,
    .php-wrapper,
    .html-wrapper,
    .mysql-wrapper,
    .laravel-wrapper,
    .devops-wrapper,
    .yarn-wrapper,
    .node-wrapper,
    .css-wrapper,
    .react-wrapper,
    .github-wrapper,
    .java-wrapper,
    .python-wrapper,
    .javascript-wrapper,
    .vuejs-wrapper {
        padding: 15px;
    }

    .logo-php {
        width: calc(var(--php-size) - var(--technologies-md-size));
        height: calc(var(--php-size) - var(--technologies-md-size));
    }

    .icon-html {
        width: calc(var(--html-size) - var(--technologies-md-size));
        height: calc(var(--html-size) - var(--technologies-md-size));
    }

    .icon-css {
        width: calc(var(--css-size) - var(--technologies-md-size));
        height: calc(var(--css-size) - var(--technologies-md-size));
    }

    .django {
        width: calc(var(--django-size) - var(--technologies-md-size));
        height: calc(var(--django-size) - var(--technologies-md-size));
    }

    .github {
        width: calc(var(--github-size) - var(--technologies-md-size));
        height: calc(var(--github-size) - var(--technologies-md-size));
    }

    .logo-java {
        width: calc(var(--java-size) - var(--technologies-md-size));
        height: calc(var(--java-size) - var(--technologies-md-size));
    }

    .logo-javascript {
        width: calc(var(--javascript-size) - var(--technologies-md-size));
        height: calc(var(--javascript-size) - var(--technologies-md-size));
    }

    .logo-mysql {
        width: calc(var(--mysql-size) - var(--technologies-md-size));
        height: calc(var(--mysql-size) - var(--technologies-md-size));
    }

    .logo-postgres-sql {
        width: calc(var(--postgres-size) - var(--technologies-md-size));
        height: calc(var(--postgres-size) - var(--technologies-md-size));
    }

    .logo-rest {
        width: calc(var(--rest-size) - var(--technologies-md-size));
        height: calc(var(--rest-size) - var(--technologies-md-size));
    }

    .logo-yarn {
        width: calc(var(--yarn-size) - var(--technologies-md-size));
        height: calc(var(--yarn-size) - var(--technologies-md-size));
    }

    .logo-vuejs {
        width: calc(var(--vuejs-size) - var(--technologies-md-size));
        height: calc(var(--vuejs-size) - var(--technologies-md-size));
    }

    .logo-devops {
        width: calc(var(--devops-size) - var(--technologies-md-size));
        height: calc(var(--devops-size) - var(--technologies-md-size));
    }

    .logo-laravel {
        width: calc(var(--laravel-size) - var(--technologies-md-size));
        height: calc(var(--laravel-size) - var(--technologies-md-size));
    }

    .logo-node {
        width: calc(var(--node-size) - var(--technologies-md-size));
        height: calc(var(--node-size) - var(--technologies-md-size));
    }

    .logo-php {
        width: calc(var(--php-size) - var(--technologies-md-size));
        height: calc(var(--php-size) - var(--technologies-md-size));
    }

    .logo-python {
        width: calc(var(--python-size) - var(--technologies-md-size));
        height: calc(var(--python-size) - var(--technologies-md-size));
    }

    .logo-react {
        width: calc(var(--react-size) - var(--technologies-md-size));
        height: calc(var(--react-size) - var(--technologies-md-size));
    }
}

@media (max-width: 992px) {
    .mysql-wrapper {
        right: -4%;
        top: 17%;
    }
    .php-wrapper {
        top: 53%;
        left: 56%;
    }
    .laravel-wrapper {
        right: -1%;
        top: calc(48% - var(--laravel-size));
    }
    .postgres-wrapper {
        bottom: 55px;
        left: 8%;
    }
}
@media (max-width: 768px) {
    .technologies-container {
        flex-direction: column;
        height: 500px;
    }

    .technologies-container > div:nth-child(1),
    .technologies-container > div:nth-child(2),
    .technologies-container > div:nth-child(3) {
        width: 100%;
    }

    .technologies-container > div:nth-child(1),
    .technologies-container > div:nth-child(3) {
        height: 40%;
    }

    .technologies-container > div:nth-child(2) {
        height: 20%;
    }

    .django-wrapper {
        top: 19px;
        left: 33%;
    }

    .rest-wrapper {
        left: -5%;
        top: calc(50% - var(--rest-size) / 2);
    }

    .postgres-wrapper {
        bottom: -23px;
        left: 29%;
    }

    .php-wrapper {
        top: 47%;
        left: 48%;
    }

    .html-wrapper {
        bottom: -8%;
        right: 13%;
    }

    .mysql-wrapper {
        right: -4%;
        top: 8%;
    }

    .laravel-wrapper {
        right: 25%;
        top: calc(36% - var(--laravel-size));
    }

    .yarn-wrapper {
        bottom: -10%;
        left: calc(60% - var(--yarn-size));
    }
    .node-wrapper {
        right: 0;
        top: 17px;
    }

    .react-wrapper {
        top: -17%;
        right: 55%;
    }

    .github-wrapper {
        right: 21%;
        top: 1%;
    }

    .java-wrapper {
        top: 36%;
        left: calc(45% - var(--java-size));
    }

    .python-wrapper {
        bottom: -14%;
        left: 10%;
    }

    .vuejs-wrapper {
        bottom: -22px;
        left: 50%;
    }
}

@media (max-width: 576px) {
    .round-card-container {
        --technologies-md-size: 2;
    }

    .technologies-container > div {
        width: 100%;
    }

    .django {
        height: var(--django-size);
        width: var(--django-size);
    }

    .github {
        height: var(--github-size);
        width: var(--github-size);
    }

    .logo-java {
        height: var(--java-size);
        width: var(--java-size);
    }

    .logo-javascript {
        height: var(--javascript-size);
        width: var(--javascript-size);
    }

    .logo-mysql {
        height: var(--mysql-size);
        width: var(--mysql-size);
    }

    .logo-postgres-sql {
        height: var(--postgres-size);
        width: var(--postgres-size);
    }

    .logo-rest {
        height: var(--rest-size);
        width: var(--rest-size);
    }

    .logo-yarn {
        height: var(--yarn-size);
        width: var(--yarn-size);
    }

    .logo-vuejs {
        height: var(--vuejs-size);
        width: var(--vuejs-size);
    }

    .logo-devops {
        height: var(--devops-size);
        width: var(--devops-size);
    }

    .logo-laravel {
        height: var(--laravel-size);
        width: var(--laravel-size);
    }

    .logo-node {
        height: var(--node-size);
        width: var(--node-size);
    }

    .logo-php {
        height: var(--php-size);
        width: var(--php-size);
    }

    .logo-python {
        height: var(--python-size);
        width: var(--python-size);
    }

    .logo-react {
        height: var(--react-size);
        width: var(--react-size);
    }
}
@media (max-width: 768px) {
    .technologies-container {
        height: 800px;
    }
}
@media (max-width: 576px) {
    .technologies-container {
        height: 1500px;
    }

    .django-wrapper {
        top: 0px;
        left: 10%;
    }

    .mysql-wrapper {
        right: 10%;
        top: 0%;
    }

    .devops-wrapper {
        top: -140%;
        left: 10%;
    }

    .css-wrapper {
        top: -90%;
        left: 10%;
    }

    .react-wrapper {
        top: -90%;
        right: 10%;
    }

    .rest-wrapper {
        left: 10%;
        top: 80%;
    }
    .logo-rest {
        height: calc(var(--rest-size) - var(--technologies-md-size));
        width: calc(var(--rest-size) - var(--technologies-md-size));
    }

    .php-wrapper {
        top: 85%;
        left: unset;
        right: 10%;
    }

    .laravel-wrapper {
        top: 115%;
        right: unset;
        left: 10%;
    }

    .vuejs-wrapper {
        bottom: unset;
        left: unset;
        right: 10%;
        top: -35%;
    }

    .node-wrapper {
        right: 0;
        top: 205px;
        left: 10%;
    }

    .java-wrapper {
        top: -10%;
        left: unset;
        right: 10%;
    }

    .yarn-wrapper {
        bottom: -64%;
        left: 10%;
    }

    .github-wrapper {
        right: 10%;
        top: 10%;
    }

    .javascript-wrapper {
        left: 10%;
        bottom: unset;
        top: 35%;
    }

    .postgres-wrapper {
        bottom: -632px;
        left: unset;
        right: 10%;
    }

    .html-wrapper {
        bottom: -132%;
        right: unset;
        left: 10%;
    }

    .icon-html {
        width: calc(var(--html-size));
        height: calc(var(--html-size));
    }

    .python-wrapper {
        bottom: -10%;
        left: 10%;
    }
}