:root {
    --cardborder: var(--BrightBlue);
}

header nav ul::after {
    content: " / Портфолио";
    color: slategray;
}




@media (max-width: 768px) {
    .summary {
        display: flex;
        flex-direction: column;
    }
    .summary__colorbar {
        position: absolute;
        top: 0; right: 0;
        width: min-content;
    }
}
.summary__gif {
    display: none;
    mix-blend-mode: screen;
    position: absolute;
    top: 0;
    z-index: -1;
    opacity: 0.05;
}

.summary__heading {
    margin: 0;

    color: var(--Golden);
}
@media (max-width: 768px) {
    .summary__heading {
        display: flex;
        justify-content: space-between;
        align-items: end;
    }
}


.summary__name,
.summary__position {
    grid-column: span 1;
    grid-column-start: 3;
}

.summary__position {
    grid-row: 3;
}

@media (max-width: 768px) {
    .summary__position {
        font-family: Santello, Raleway;
        font-size: 0.75rem;
        line-height: 1.25rem;
        letter-spacing: unset;
        text-transform: unset;
        color: slategray;

        text-align: right;
    }
}

.summary__colorbar {
    grid-column-start: 3;
}

.summary__point {
    grid-column: span 1;
    grid-row: 2;
    align-content: end;
}

.summary__point:nth-child(2) {
    grid-column: 3;
}

.summary__point:nth-child(3) {
    grid-column: 5;
}
@media (min-width: 768px) and (max-width: 1024px) {
    .summary__point:nth-child(2n){
        margin-left: 2rem;
    }
}

.summary__card-title {
    bottom: 0;
    transform-origin: left bottom;
}
@media (min-width: 768px) {
    .summary__card-title {
        left: -2.5em;
    }
}



.actions {
    display: none;
    position: fixed;
    bottom: 0; right: 0;
    min-width: var(--padding); height: max-content;
    flex-direction: column;
    gap: 1.5rem;
    z-index: 3;
    padding: 1.5rem;
    opacity: 0.35;
}
.actions:hover {
    opacity: 1;
}

.actions:hover .btn {
    background-color: var(--SoftBlack);
}

.actions .btn[download]::after {
    content: ".pdf";
    color: var(--BrightBlue);
    transition: all 150ms ease;
}
.actions .btn[download]:hover::after {
    color: var(--CosmicLatte);
}


.portfolio + .skills {
    margin-top: 0;
}
@media (max-width: 1079px) {
    .skills .portfolio {
        --columngap: 2.5rem;
        gap: 1.5rem;
    }
}

.skills__heading {
    position: absolute;
    left: calc(0px - var(--padding));
    top: -0.75em;
    font-size: 10rem;
}

.skills__list {
    grid-template-columns: repeat(5, auto);
    padding-left: 0;
    padding-bottom: 0;
}

.skills__item {
    list-style: none;
    border: solid 1rem var(--cardborder);
    padding: 1.5rem 1rem 2rem 1.5rem;
    background: linear-gradient(
        rgba(0, 0, 0, 0.85),
        rgba(0, 0, 0, 0.85)
    ), var(--cardborder);
    box-shadow: var(--textShadow);
}
@media (max-width: 768px) {
    .skills__item {
        width: 100%;
    }
}

.skills__software {
    color: var(--cardborder);
}

.skills__item * + :is(p, h4) {
    margin-top: 0.25em;
}

.skills .btn {
    height: 2.75rem;
    margin: 1em 0.5em 0 0;
    padding: 0.5em 2em;
    border-radius: 1.5em;
    min-width: 10em; max-width: 100%;
    background-color: rgba(0, 0, 0, 0.35);
}
.skills .btn::before {
    border: 1.5px solid var(--cardborder);
    border-right: none;
    border-radius: 1.5em 0 0 1.5em;
}
.skills .btn:hover::before{
    border-radius: 0 1.5em 1.5em 0;
    background-color: var(--cardborder);
}

.cv details {
    position: relative;
    top: -0.25rem;
}

.skills ul li h4 {
    color: var(--cardborder);
    font-size: 0.75rem;
}

.skills ul li a + h4 {
    margin-top: 2em;
}

.skills * + details {
    margin-top: 0;
}

.skills details > summary {
    padding: 0;
}

.skills details > summary::before {
    left: -0.35em;
    top: -0.5em;
    font-size: 2em;
    color: black;
    text-shadow: 0 0 10px var(--cardborder);
    z-index: 0;
}

.skills details[open] > summary::before {
    transform: rotate(90deg);
}

.skills details > summary h3 {
    position: relative;
    z-index: 2;
}



.skills .ps {
    grid-column: span 3;
    --cardborder: #22B9EE;
}

.skills .ai {
    grid-column: span 3;
    --cardborder: #F97914;
}

.skills .id {
    grid-column: span 2;
    --cardborder: #EC4793;
}

.skills .figma {
    grid-column: span 2;
    --cardborder: #FF3737;
}

.skills .css {
    grid-column: span 2;
    --cardborder: #663199;
}

.skills .llm {
    grid-column: span 1;
    --cardborder: #00A680;
}

.skills .ae {
    grid-column: span 1;
    --cardborder: #D391F2;
}

.skills .ch {
    grid-column: span 1;
    --cardborder: #9B9BFF;
}




/* десктоп-лейаут */
@media (min-width: 768) {
    .experience__item-title,
    .experience__date {
        grid-column: 4 / 5;
    }
    .experience__list {
        display: flex;
    }
    .experience__list-item {
        padding: calc(1.5rem + 1.5vw);
    }
}

.experience__item-title {
    color: var(--Golden);
    align-content: end;
}
.experience__item-note {
    display: block;
    color: slategray;
}

.experience__date {
    order: -1;
    color: slategray;
}


.education__card:nth-child(2n + 1) .education__card-title {
    align-content: end;
}

.education__card-title {
        grid-column: 1 / 4;
}

.education__card-description {
        grid-column: 4 / -1;
}

.education__card-title {
    color: var(--Golden);
}

.education__card-note {
    text-transform: none;
    color: slategray;
}



.contact {
    align-items: end;
}

.contact-message {
    position: relative;
    width: 100%;
    background-color: var(--DeepBlue);
    grid-column: 1 / 5;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
}
/* CSS-треугольник на десктоп */
.contact-message::after {
    content: "";
    position: absolute;
    bottom: 0.5rem; right: -1.5rem;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 1.5rem 1.5rem 0 0;
    border-color: var(--DeepBlue) transparent transparent transparent;
}

.contact__buttons {
    display: contents;
}
.contact__cta,
.contact__tg {
    grid-column: 5;
}
.contact__cta {
    width: 100%;
}
.contact__tg {
    text-align: center;
}

/* На мобилки */
@media (max-width: 768px) {
    .contact {
        display: flex;
        flex-direction: column;
        justify-content: end;
    }
    .contact-message {
        margin-right: 0;
        margin-bottom: 1rem;
    }
    .contact-message::after {
        content: "";
        position: absolute;
        bottom: -1.5rem; right: calc(var(--sectiongap) / 1.5);
        width: 0; height: 0;
        border-style: solid;
        border-width: 1.5rem 1.5rem 0 0;
        border-color: var(--DeepBlue) transparent transparent transparent;
    }
    .contact__buttons {
        width: calc(7em + 10%);

        display: flex;
        flex-direction: column;
        justify-content: stretch;
        gap: var(--columngap);
    }
}