:root {
    --border-radius: 20px;
    --block-padding: 20px;
    --block-margin: 10px;
    /* New variables */
    --border-radius-large: 30px;
    --border-radius-xl: 50px;
    --color-dark-opacity: 0.8;
    --color-light-opacity: 0.1;
    --hover-flex-grow: 1.2;
    --hover-flex-shrink: 0.8;
    --bg-opacity-normal: 0.05;
    --bg-opacity-hover: 0.3;
}

html {
    scroll-behavior: smooth;
}


/* HERO */

.hero-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.hero-container .label {
    padding: 20px;
}

.hero-links-block {
    width: 90%;
    max-width: 1200px;
}

.hero-links-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.hero-link {
    background-color: rgba(241, 241, 241, 0.5);
    padding: 10px;
    flex: 1;
    display: flex;
    border-radius: 40px;
    transition: all var(--transition-speed) ease-in-out;
    min-height: 120px;
}

.hero-link-content-bg {
    width: 100%;
    display: flex;
    flex: 1;
    color: rgb(var(--color-light));
    background-color: rgba(241, 241, 241, 0.5);
    text-decoration: none;
    cursor: pointer;
    border-radius: 30px;

}

.hero-link-content {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}


@media (max-width: 768px) {
    .hero-link-content {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .hero-link-content {
        padding: 0 10px;
    }
}

.text-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-link p {
    font-size: 22px;
    margin: 0;
    font-weight: bold;
    color: rgb(var(--color-light), 0.9);
    transition: all var(--transition-speed) ease-in-out;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-link svg {
    width: 15px;
    height: auto;
    transition: all var(--transition-speed) ease-in-out;
}

.hero-link svg path {
    fill: rgb(var(--color-light), 0.9);
    transition: all var(--transition-speed) ease;
}

/* Hover effect */
.hero-links-row:hover .hero-link {
    flex: var(--hover-flex-shrink);
}

.hero-links-row .hero-link:hover {
    flex: var(--hover-flex-grow);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.hero-link:hover svg {
    transform: translateX(10px);
}

.hero-link:hover p {
    transform: translateX(10px) scale(1.1);
    color: rgb(var(--color-light), 1);
}

.hero-link:hover path {
    fill: rgba(var(--color-light), 1);
    fill-opacity: 0.9;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {

    .hero-link {
        min-height: 50px;
    }

    .hero-link-content {
        margin: auto 10px;
    }

    .hero-container {
        margin: 50px auto;
    }

    .hero-links-row {
        flex-direction: column;
    }

    .hero-link-content {
    }

    .hero-links-row:hover .hero-link,
    .hero-links-row .hero-link:hover {
        flex: 1;
    }

    .desc-block {
        flex: 1 !important;
    }

    .hero-link svg {
        max-height: 80%;
        width: auto;
        height: auto;
    }
}

@media (max-width: 480px) {
    .hero-link {
        padding: 5px;
    }

    .hero-links-block, .hero-links-row {
        gap: 10px;
        margin: 10px auto;
    }

    .hero-link p {
        font-size: 18px;
    }

    .hero-link svg {
        display: none;
    }

}

.red-gradient {
    background: linear-gradient(98deg, rgba(255, 69, 58, 0.8) 0%, rgba(209, 26, 255, 0.8) 100%);
}

.green-to-blue-gradient {
    background: linear-gradient(98deg, rgba(57, 117, 227, 0.80) 0%, rgba(159, 217, 102, 0.80) 100%);
}

.cyan-gradient {
    background: linear-gradient(98deg, rgba(0, 96, 201, 0.80) 0%, rgba(44, 231, 168, 0.80) 100%);
}

.green-gradient {
    background: linear-gradient(98deg, rgba(0, 153, 38, 0.80) 0%, rgba(143, 216, 74, 0.80) 100%);
}

.blue-gradient {
    background: linear-gradient(98deg, rgba(88, 86, 214, 0.80) 0%, rgba(82, 189, 222, 0.80) 100%);
}

.pink-gradient {
    background: linear-gradient(98deg, rgba(175, 82, 222, 0.80) 0%, rgba(216, 75, 150, 0.80) 100%);
}

/* Default styles */
.sticky {
    position: sticky;
    top: 80px;
    z-index: 10;
    background-color: rgba(var(--color-light), var(--color-light-opacity));
}

.default-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    margin: auto;
    padding: 50px 20px;
}

.default-container .subLabel {
    white-space: pre-line;
    padding: 10px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
}

.default-container .subLabel.white {
    color: rgba(var(--color-light), 1);
    background: none;
}

.desc-blocks-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
    padding: 10px;
    box-sizing: border-box;
}

.horizontal {
    flex-direction: row;
}

.desc-blocks-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
    flex-wrap: wrap;
}

.desc-blocks-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
    flex-wrap: wrap;
}

.desc-block {
    background: rgba(var(--color-grey), var(--bg-opacity-normal));
    border-radius: var(--border-radius);
    padding: var(--block-padding);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    border-color: rgba(241, 241, 241, 0.8);
    transition: all var(--transition-speed) ease-in-out;
}

.label-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
}

.logo {
    display: flex;
    width: 28px;
    height: 28px;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    color: white;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;
    margin: 0;
    padding: 0;
    transition: all var(--transition-speed) ease-in-out;
}

.content-centered {
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 200px;
    transition: all 0.4s ease;
}

.large-block {
    flex: 1;
    min-width: 280px;
}

.small-block {
    flex: 0.5;
    min-width: 180px;
}

.desc-block .subLabel {
    white-space: pre-line;
    font-weight: 600;
    font-size: 30px;
    margin: 0;
    padding: 0;
    color: white;
}



.desc-block .description {
    white-space: pre-line;
    color: rgba(var(--color-dark), 0.7);
    line-height: 1.5;
    padding: 0;
    margin: 0;
    transition: opacity var(--transition-speed) ease-in-out, color var(--transition-speed) ease-in-out;
}

.desc-block:hover {
    border-radius: var(--border-radius-large);
}

.hover-width:hover {
    flex: var(--hover-flex-grow) !important;
}

.large-block:hover {
    flex-grow: var(--hover-flex-grow);
}

.skills-wrapped-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    width: 100%;
    max-width: 600px;
}

.skills-wrapped-block.vertical {
    flex-direction: column;
    flex-wrap: nowrap;
}

.wrapped-skill {
    padding: 5px 10px;
    margin: 0;
    flex: 0;
    font-size: 20px;
    display: inline-block;
    width: auto;
    max-width: fit-content;
    white-space: nowrap;
    color: rgba(var(--color-light), 1);
    background: rgba(100, 100, 100, 0.20);
}

@media (max-width: 500px) {
    .wrapped-skill {
        max-width: 100%;
        white-space: wrap;
    }
    .skills-wrapped-block.vertical {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.theme-gen-1 {
    background: linear-gradient(108deg, rgba(255, 69, 59, 0.60) 0%, rgba(237, 53, 134, 0.60) 100%);
}
.theme-gen-2 {
    background: linear-gradient(99deg, rgba(239, 54, 128, 0.60) 0%, rgba(212, 29, 242, 0.60) 100%);
}
.theme-gen-3 {
    background: linear-gradient(151deg, rgba(252, 66, 71, 0.60) 0%, rgba(242, 57, 113, 0.60) 100%);
}
.theme-gen-4 {
    background: linear-gradient(151deg, rgba(245, 59, 106, 0.60) 0%, rgba(234, 49, 147, 0.60) 100%);
}
.theme-gen-5 {
    background: linear-gradient(146deg, rgba(236, 51, 140, 0.60) 0%, rgba(226, 42, 183, 0.60) 100%);
}
.theme-gen-6 {
    background: linear-gradient(146deg, rgba(228, 43, 176, 0.60) 0%, rgba(218, 34, 219, 0.60) 100%);
}
.theme-gen-7 {
    background: linear-gradient(146deg, rgba(219, 35, 213, 0.60) 0%, rgba(209, 26, 254, 0.60) 100%);
}

.theme-dev-1 {
    background: linear-gradient(101deg, #4D78CC 0%, #70AAA0 100%);
}
.theme-dev-2 {
    background: linear-gradient(107deg, #6CA6A5 0%, #99D26E 100%);
}
.theme-dev-3 {
    background: linear-gradient(129deg, #407CDB 0%, #5B96B9 100%);
}
.theme-dev-4 {
    background: linear-gradient(131deg, #5792BE 0%, #72AC9D 100%);
}
.theme-dev-5 {
    background: linear-gradient(145deg, #6FA9A1 0%, #84BE87 100%);
}
.theme-dev-6 {
    background: linear-gradient(122deg, #81BB8A 0.45%, #9FD966 100%);
}

.theme-tech-1 {
    background: linear-gradient(114deg, rgba(1, 96, 201, 0.80) 0%, rgba(15, 142, 190, 0.80) 100%);
}
.theme-tech-2 {
    background: linear-gradient(116deg, rgba(14, 137, 191, 0.80) 0%, rgba(28, 182, 173, 0.80) 100%);
}
.theme-tech-3 {
    background: linear-gradient(116deg, rgba(27, 177, 181, 0.80) 0%, rgba(41, 222, 171, 0.80) 100%);
}
.theme-tech-4 {
    background: linear-gradient(114deg, rgba(4, 106, 199, 0.80) 0%, rgba(19, 151, 188, 0.80) 100%);
}
.theme-tech-5 {
    background: linear-gradient(116deg, rgba(16, 146, 189, 0.80) 0%, rgba(31, 191, 178, 0.80) 100%);
}
.theme-tech-6 {
    background: linear-gradient(116deg, rgba(30, 185, 179, 0.80) 0%, rgba(44, 230, 169, 0.80) 100%);
}

.theme-soft-1 {
    background: linear-gradient(114deg, rgba(1, 153, 39, 0.80) 0%, rgba(49, 174, 51, 0.80) 100%);
}
.theme-soft-2 {
    background: linear-gradient(116deg, rgba(44, 172, 50, 0.80) 0%, rgba(91, 193, 62, 0.80) 100%);
}
.theme-soft-3 {
    background: linear-gradient(116deg, rgba(86, 191, 60, 0.80) 0%, rgba(133, 212, 72, 0.80) 100%);
}
.theme-soft-4 {
    background: linear-gradient(101deg, rgba(10, 157, 42, 0.80) 0%, rgba(79, 188, 59, 0.80) 100%);
}
.theme-soft-5 {
    background: linear-gradient(102deg, rgba(75, 186, 58, 0.80) 0%, rgba(143, 216, 74, 0.80) 100%);
}

.theme-other-1 {
    background: linear-gradient(96deg, rgba(176, 82, 222, 0.80) 0%, rgba(195, 78, 187, 0.80) 100%);
}
.theme-other-2 {
    background: linear-gradient(96deg, rgba(195, 79, 189, 0.80) 0%, rgba(214, 76, 156, 0.80) 100%);
}
.theme-other-3 {
    background: linear-gradient(114deg, rgba(177, 82, 218, 0.80) 0%, rgba(192, 80, 193, 0.80) 100%);
}
.theme-other-4 {
    background: linear-gradient(116deg, rgba(190, 79, 196, 0.80) 0%, rgba(205, 78, 172, 0.80) 100%);
}
.theme-other-5 {
    background: linear-gradient(116deg, rgba(202, 77, 175, 0.80) 0%, rgba(216, 75, 150, 0.80) 100%);
}




/* Responsive adjustments */
@media (max-width: 768px) {
    .desc-blocks-container {
        flex-direction: column;
        gap: 10px;
    }

    .desc-blocks-row, .desc-blocks-column {
        gap: 10px;
    }

    .content-centered {
        min-height: 100px;
    }
}


/* CV links */
.cv-link-bg {
    flex: 1;
    display: flex;
    padding: 0;
    margin: 0;
    width: auto;
    border-radius: 50px;
    text-decoration: none;
    transition: all var(--transition-speed) ease-in-out;
    position: relative;
}

.cv-link {
    background-color: rgba(var(--color-light), var(--color-light-opacity));
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 30px;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    position: relative;
    gap: 10px;
    width: 100%;
    transition: all var(--transition-speed) ease-in-out;
}

.cv-link .label-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cv-link .label-container.bottom-container {
    align-items: flex-end;
}

.cv-link .subLabel {
    margin: 0;
    padding: 0;
    font-size: 30px;
    font-weight: bold;
    transition: all var(--transition-speed) ease-in-out;
}

.cv-link .logo {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
}

svg path {
    transition: all var(--transition-speed) ease-in-out;
}


/* Hover effect - Improved */
.cv-link-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 55px;
    padding: 5px;
    background: linear-gradient(90deg, #20F 0%, #99003B 100%);
    opacity: 0;
    transition: all var(--transition-speed) ease-in-out;
    z-index: -1;
    transform: scale(1.00);
    pointer-events: none;
}

.cv-link-bg:hover::before {
    opacity: 1;
}

.cv-link-bg:hover p,
.cv-link-bg:hover .logo {
    color: rgba(var(--color-light), 1);
}

.cv-link-bg:hover path {
    fill: rgba(var(--color-light), 1);
}

.cv-link-bg:hover .cv-link {
    background-color: rgba(var(--color-light), var(--color-light-opacity));
}

.cv-link-bg:hover {
    padding: 5px;
}

.cv-link-bg:hover .status-container {
    background: rgba(var(--color-light), 0.5);
}

@media (max-width: 1100px) {
    #cv .desc-blocks-row {
        flex-direction: column;
        gap: 10px;
    }
}