@font-face {
    font-family: "Open Sans";
    src: url(../assets/fonts/OpenSans-VariableFont_wdth,wght.ttf);
}

@font-face {
    font-family: "Roboto";
    src: url(../assets/fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: "Poppins";
    src: url(../assets/fonts/Poppins-Regular.ttf);
}


html {
    scroll-behavior: smooth;
}

.body {
    margin: 0;
    font-family: Poppins, sans-serif;
}

.wrapper {
    display: flex;
}

.aside {
    width: 40%;
    background-color: #272B2F;
}

.main {
    width: 60%;
}

.aside-container {
    padding: 0 30px;
}

.aside .header {
    padding-top: 20px;
}

.aside .header .header-content {
    text-align: center;
}

.aside .header .header-content .profile-photo {
    width: 95%;
    border-radius: 2%;
}

.aside .header .header-content .header-title {
    font-family: "Open Sans", sans-serif;
    color: #fff;
    font-size: 26px;
    margin: 10px 0 15px;
    text-align: left;
}

.aside .header .header-content .header-specialization {
    font-weight: 700;
    font-size: 18px;
    color: #FEBC2C;
    margin: 0 0 15px;
    padding: 0 10px;
    text-align: left;
}

.aside .header .header-content {
    border-bottom: solid 2px rgba(255, 255, 255, 0.18);
}

.about-me {
    padding: 20px 0 0;
}

.about-me .about-me-content .about-me-content-title,
.footer .contacts .contacts-title,
.footer .social-media .social-media-title
{
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 400;
}

.about-me .about-me-content .about-me-content-text {
    margin: 0;
    font-size: 10px;
    color: #ffffff;
    font-family: Roboto, sans-serif;
}

.footer {
    padding-bottom: 40px;
}

.contacts, .social-media {
    padding: 35px 0 0;
}

.contacts .contacts-list,
.social-media .social-media-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.contacts .contacts-list .contacts-address,
.social-media .social-media-list .social-media-address{
    font-style: normal;
}

.contacts .contacts-list .contacts-address .contacts-link,
.social-media .social-media-list .social-media-address .social-media-link{
    text-decoration: none;
    color: #ffffff;
    font-size: 10px;
    display: flex;
    align-items: center;
    transition: 0.1s 0.1s linear;
}

.contacts .contacts-list .contacts-address .contacts-link .contacts-icon,
.social-media .social-media-list .social-media-address .social-media-link .social-media-icon{
    padding: 5px;
    background-color: #FC413C;
    margin-right: 8px;
    border-radius: 5%;
}

.social-media .social-media-list .social-media-address .social-media-link .facebook {
    padding: 7px 9.5px;
}

.social-media .social-media-list .social-media-address .social-media-link .linkedin,
.social-media .social-media-list .social-media-address .social-media-link .telegram
{
    width: 15px;
}

.contacts .contacts-list .contacts-list-item,
.social-media .social-media-list .social-media-list-item{
    margin-bottom: 5px;
    transition: 0.1s 0.1s linear;

}

.contacts .contacts-list .contacts-list-item:last-of-type,
.social-media .social-media-list .social-media-list-item:last-of-type{
    margin-bottom: 0;
}

.contacts-list-item:hover,
.social-media-list-item:hover{
    background-color: #FC413C;
}

.contacts-link:hover,
.social-media-link:hover
{
    letter-spacing: 1px;
    font-weight: 700;
}

.skills {
    padding: 20px 0 0;
}

.main-container {
    padding: 0 20px 0 25px;
}

.skills-title-holder,
.education-title-holder,
.projects-title-holder {
    width: 100%;
    text-align: center;
    padding: 8px 0;
    background-color: #FEBC2C;
    border-radius: 6px;
}

.skills-title,
.education-title,
.projects-title {
    text-transform: capitalize;
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

.skills-ability-cards-holder {
padding: 10px 0 0;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.skills-ability-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 5%;
}

.skills-technology {
    font-weight: 700;
    font-size: 15px;
    margin: 0;
    width: 10%;
}

.skills-ability-percentage {
    font-weight: 400;
    font-size: 15px;
    margin: 0;
    font-family: Roboto, sans-serif;
}

.skills-technology-knowledge-outer {
    height: 10px;
    background-color: #FEBC2C;
    width: 70%;
    border-radius: 10px;
}

.skills-technology-knowledge-inner {
    height: 10px;
    background-color: #272B2F;

    border-radius: 10px;
}

.scum {
    width: 85%;
}

.react {
    width: 80%;
}

.sql {
    width: 75%;
}

.javascript {
    width: 90%;
}

.git {
    width: 85%;
}

.html, .css, .teamwork{
    width: 95%;
}

.education {
    padding: 15px 0 0;
}

.projects {
    padding: 15px 0;
}

.education-school,
.projects-card {
margin-top: 10px;
    padding: 16px 8px;
    background-color: rgba(253, 109, 174, 0.2);
    border-radius: 6px;

}

.education-school-title,
.projects-card-title {
    margin: 0 0 5px;
    font-size: 10px;
}

.education-school-period {
    display: block;
}

.education-school-period,
.education-school-desc,
.projects-card-desc {
    color: #333333;
    font-size: 10px;
    margin: 0 0 5px;
}

.education-school-link {
    text-decoration: none;
    color: #333333;
}

.education-school-link:hover {
    text-decoration: underline;
}

.projects-card-link {
    text-decoration: none;
    font-size: 10px;
    color: #000;
    display: block;
    margin: 0 0 5px;
    width: fit-content;
    padding: 2px 5px;
    border: solid 1px #333333;
    border-radius: 20px;
    transition: background-color 0.5s;
}

.projects-card-link:hover{
    background-color: #000;
    color: #fff;
}

.projects-card {
    margin-bottom: 10px;
}

.projects-card:last-of-type {
    margin-bottom: 0;
}

@media (min-width: 1600px) {
    .about-me .about-me-content .about-me-content-text,
    .contacts .contacts-list .contacts-address .contacts-link,
    .social-media .social-media-list .social-media-address .social-media-link,
    .education-school-title,
    .education-school-period,
    .education-school-desc,
    .projects-card-title,
    .projects-card-link,
    .projects-card-desc
    {
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    .skills-technology-knowledge-outer {
        width: 60%;
    }
}

@media (max-width: 740px) {
    .skills-technology-knowledge-outer {
        width: 50%;
    }
    .wrapper {
        flex-direction: column;
    }
    .aside {
        width: 100%;
    }
    .main {
        width: 100%;
    }
    .aside .header .header-content .profile-photo {
        width: 50%;
    }
}

@media (max-width: 620px) {
    .skills-technology {
        width: 40%;
    }
}

@media (max-width: 480px) {
    .skills-ability-card{
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .aside .header .header-content .header-title {
        font-size: 22px;
    }

    .aside .header .header-content .header-specialization {
        font-size: 14px;
    }



    .about-me .about-me-content .about-me-content-title, .footer .contacts .contacts-title, .footer .social-media .social-media-title {
        font-size: 16px;
    }

}

@media (max-width: 400px) {
.contacts-link, .social-media-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
    .contacts-title, .about-me-content-title,
    .aside .header .header-content .header-title,
    .aside .header .header-content .header-specialization,
    .social-media-title{
        text-align: center;
    }

    .skills-title, .education-title, .projects-title {
        font-size: 16px;
    }

    .skills-technology, .skills-ability-percentage {
        font-size: 10px;
    }

    .education-school-title, .education-school-period, .education-school-desc,
    .projects-card-desc, .projects-card-title, .projects-card-link {
        font-size: 8px;
    }
}