* {
    padding: 0;
    margin: 0;
    font-family: "Fira Sans", sans-serif;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.space-between {
    justify-content: space-between;
}

.space-around {
    justify-content: space-around;
}

.justify-center {
    justify-content: center;
}

.text-white {
    color: #fff;
}

.no-decoration {
    text-decoration: none;
}

.p-20 {
    padding: 20px;
}

.gap-20 {
    gap: 20px;
}

header, footer {
    background-color: black;
    color: white;
}

header {
    @media screen and (min-width: 768px) {
        padding: 20px calc(10vw) !important;
    }
}

main {
    padding: 0 12px;
}

.header-icon {
    font-size: 0.85rem;
}

.profile-image-container {
    padding: 70px 0 30px 0;

    @media screen and (min-width: 768px) {
        padding-left: calc(10vw - 12px);
    }
}

.profile-image {
    width: 128px;
    height: 128px;
    object-fit: cover;
    border-radius: 1000px;
}

.first-title, .second-title {
    color: #666;
}

.name {
    font-size: 4rem;
}

.name-block {
    @media screen and (min-width: 768px) {
        padding-left: calc(10vw - 12px);
    }
}

.portfolio-image,
.portfolio-group-image,
.portfolio-page-main-image img {
    height: auto;
}

.about-block {
    max-width: 560px;
    padding: 18px 0 0 0;
    color: #444;
    font-size: 0.95rem;
    line-height: 1.55;

    @media screen and (min-width: 768px) {
        padding-left: calc(10vw - 12px);
    }
}

.socials {
    padding: 35px 0 0 0;
    font-size: 2rem;
}

.social-link {
    color: #666;
}

.cv-container {
    padding: 25px 0 0 0;
    font-size: 0.8rem;
}

.cv-download {
    border: 1px solid #000;
    border-radius: 15px;
    padding: 7px 20px;
    color: #000;
    text-decoration: none;
}

.portfolio {
    padding: 40px 0 0 0;
    font-size: 1.3rem;
}

.portfolio-header {
    padding-left: calc(10vw - 12px);
}

.portfolio-updated {
    font-size: 0.8rem;
}

.portfolio-list {
    padding: 30px 0 0 0;
    gap: 35px 0;
}

.portfolio-element {
    flex-direction: column;

    @media screen and (min-width: 768px) {
        flex-direction: row;
        padding: 0 0 0 10vw;
        gap: 0 25px;
    }
}

.portfolio-element-text-block {
    padding: 0 calc(10vw - 12px);

    @media screen and (min-width: 768px) {
        padding: 0;
        width: 30vw;
    }
}

.portfolio-element-title {
    font-size: 0.8rem;
    align-self: center;
    padding: 8px 0 0 0;

    @media screen and (min-width: 768px) {
        padding: 0;
        font-size: 1.2rem;
    }
}

.portfolio-element-description {
    font-size: 0.7rem;
    width: 80vw;
    align-self: center;
    padding: 3px 0 0 0;

    @media screen and (min-width: 768px) {
        width: 30vw;
        font-size: 1rem;
        padding: 7px 0 0 0;
    }
}

.portfolio-image-link {
    align-self: center;
}

.portfolio-image {
    width: 80vw;

    @media screen and (min-width: 768px) {
        width: 50vw;
        max-height: 500px;
    }
}

.link {
    color: darkblue;
    text-decoration: none;
}

.footer-link {
    color: #ccc;
    text-decoration: none;
    font-size: 0.85rem;
}

.made-in-ba {
    color: #666;
    font-size: 0.7rem;
}

.copyright {
    color: #ccc;
    font-size: 0.8rem;
}

footer {
    margin-top: 30px;
    gap: 15px 0;
    padding-left: 10vw !important;
}

.socials-footer {
    gap: 0 15px;
    font-size: 1.2rem;
}

.bottom-block {
}

.social-link-footer {
    color: #fff;
}

.portfolio-page-title {
    font-size: 1.3rem;
    padding: 12px 0;

    @media screen and (min-width: 768px) {
        font-size: 2rem;
        padding-left: calc(10vw - 12px);
        margin: 20px 0;
    }
}

.portfolio-page-top-block {
    flex-direction: column;

    @media screen and (min-width: 768px) {
        flex-direction: row;
        padding: 0 calc(10vw - 12px);
        gap: 0 30px;
        margin: 0 0 45px 0;
    }
}

.portfolio-page-main-image {
    justify-content: center;
}

.portfolio-page-main-image img {
    width: 80vw;
    padding: 10px 0;

    @media screen and (min-width: 768px) {
        width: 40vw;
    }
}

.portfolio-page-description {
    font-size: 0.85rem;
    padding: 12px 0 20px 0;
}

.portfolio-groups-block {
    flex-direction: column;
    gap: 30px 0;

    @media screen and (min-width: 768px) {
        gap: 60px 0;
    }
}

.portfolio-group-title {
    font-size: 1rem;

    @media screen and (min-width: 768px) {
        font-size: 1.3rem;
    }
}

.portfolio-group-card {
    flex-direction: column;
    gap: 18px 0;

    @media screen and (min-width: 768px) {
        padding: 0 calc(10vw - 12px);
    }
}

.portfolio-group-images {
    gap: 12px 14px;
    flex-wrap: wrap;
}

.portfolio-group-image {
    max-width: 100%;

    @media screen and (min-width: 768px) {
        max-width: 39vw;
    }
}

.fira-sans-thin {
    font-family: "Fira Sans", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.fira-sans-extralight {
    font-family: "Fira Sans", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.fira-sans-light {
    font-family: "Fira Sans", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.fira-sans-regular {
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.fira-sans-medium {
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.fira-sans-semibold {
    font-family: "Fira Sans", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.fira-sans-bold {
    font-family: "Fira Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.fira-sans-extrabold {
    font-family: "Fira Sans", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.fira-sans-black {
    font-family: "Fira Sans", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.fira-sans-thin-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.fira-sans-extralight-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.fira-sans-light-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.fira-sans-regular-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.fira-sans-medium-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.fira-sans-semibold-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.fira-sans-bold-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.fira-sans-extrabold-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.fira-sans-black-italic {
    font-family: "Fira Sans", sans-serif;
    font-weight: 900;
    font-style: italic;
}