/* .visually-hidden {
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    overflow: hidden;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
} */
/* 320px-767px-mobile  */

a:link {
    cursor: pointer;
    border-bottom: 1px solid;
}
@media screen and (min-width: 320px) and (max-width: 479px) {

    * {
        box-sizing: border-box;
    }

    body {
        max-width: 479px;
        font-family: 'Montserrat', sans-serif;
        background-color: #F3F781;
        margin: 0;
    }

    /* main styles */
    .main {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-content: center;
        /* flex-wrap: wrap; */
    }

    .main-content {
        position: absolute;
        background-color: #F3F781;
    }

    /* about styles */
    .about {
        top: 0;
        right: 0;
        margin-bottom: 30px;
    }
                
    .about-position {
        font-style: normal;
        font-weight: 700;
        font-size: 10px;
        line-height: 1.2;
        color: #000000;
        margin-bottom: 10px;
    }
                
    .about-name {
        font-style: normal;
        font-weight: 700;
        font-size: 15px;
        line-height: 1.22;
        color: #000000;
        margin-bottom: 10px;
    }
                
    .about-description {
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 1.7;
        color: #595959;
        width: 200px;
    }
                
    /* projects styles */
    .projects {
        margin-bottom: 10px;
        width: 200px;
    }
                
    .title {
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 1.125;
        color: #000000;
        margin-bottom: 10px;
    }
                
    .projects-list {
        padding: 0;
        margin-left: 10px;
    }
                
    .project-item {
        font-style: normal;
        font-weight: 600;
        font-size: 10px;
        line-height: 1.7;
        color: #000000;
        padding-bottom: 10px;
    }
                
    .project,
    .project-link {
        font-style: normal;
        font-weight: 500;
        font-size: 8px;
        line-height: 1.7;
        color: #595959;
    }
                
    .project-link {
        margin-left: 10px;
    }
                
    .project-bracket {
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 1.7;
        text-decoration: none;
        color: #000000;
    }
                
    /* work styles */
    .work {
        width: 200px;
    }
                
    .work-position {
        font-style: normal;
        font-weight: 500;
        font-size: 8px;
        line-height: 1.25;
        color: #000000;
        margin-bottom: 5px;
    }
                
    .organization {
        font-style: normal;
        font-weight: 600;
        font-size: 10px;
        line-height: 1.25;
        color: #FB6D3A;
    }
                
    .period {
        font-style: normal;
        font-weight: 600;
        font-size: 12px;
        line-height: 1.25;
        color: #A8A8A8;
        margin-bottom: 5px;
    }
                
    .line {
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 1.25;
        color: #000000;
    }
                
    .work-list {
        padding: 0;
        margin-left: 15px;
    }
                
    .work-list-item {
        font-style: normal;
        font-weight: 600;
        font-size: 10px;
        line-height: 1.7;
        color: #595959;
        width: 200px;
        margin-bottom: 5px;
    }
                
    /* education styles */
    .table {
        position: absolute;
        white-space: nowrap;
        width: 1px;
        height: 1px;
        overflow: hidden;
        border: 0;
        padding: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        margin: -1px;
    }
    .education {
        width: 200px;
    }
                
    .organization {
        padding-right: 20px;
    }
                
    .education-position {
        font-style: normal;
        font-weight: 700;
        font-size: 10px;
        line-height: 1.2;
        color: #000000;
        padding-right: 20px;
        margin-right: 20px;
    }
                
    /* sidebar styles */
    .main-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        width: 120px;
        height: 100vh;
    }
    
    .sidebar {
        background-color: #A9F5E1;
        margin-bottom: 10px;
    }
    
    .photo {
        width: 120px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .contact-titel {
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 1.125;
        color: #000000;
    }

    .contact-list {
        padding: 5px;
    }
                
    .contact-type {
        font-style: normal;
        font-weight: 200;
        font-size: 8px;
        line-height: 1.7;
        color: #000000;
        padding: 0;
        list-style: none;
    }
                
    .contact-item {
        list-style: none;
        margin-bottom: 5px;
    }
                
    .contact-icon {
        width: 14px;
        height: 14px;
        border: none;
        margin-right: 5px;
        fill: #FB6D3A;
    }
                
    .contact-link {
        font-style: normal;
        font-weight: 200;
        font-size: 8px;
        line-height: 1.7;
        color: #000000;
        margin-bottom: 5px;
    }

    .link-mail{
        font-style: normal;
        font-weight: 200;
        font-size: 7px;
        line-height: 1.7;
    }
                
    .contact-titel,
    .tech-skills,
    .soft-skills,
    .languages-skills {
        margin-left: 5px;
    }
                
    .contact {
        margin-bottom: 5px;
    }
                
    .tech-skills {
        margin-bottom: 5px;
        list-style: inside;
        padding: 3px;
    }
                
    .skills-list {
        color: #000000;
        padding: 0;
        margin-left: 7px;
    }
                
    .skills-text {
        font-style: normal;
        font-weight: 200;
        font-size: 9px;
        line-height: 1.7;
        color: #000000;
    }                                        
                                
    .skills-item {
        list-style: inside;
        color: #FB6D3A;
        padding: 3px;
    }
                
    .languages-skills {
        padding-bottom: 500px;
    }
    .footer {
        padding: 100px 30px;
    }
    
    .footer__container {
        display: flex;
        align-items: baseline;
    }
}

/* ---------------------------------------------- */
/* 768px-tablet */
@media screen and (min-width: 768px) {
    body{
        min-width: 768px;
        max-width: 1279px;
        font-family: 'Montserrat', sans-serif;
        background-color: #F3F781;
        margin: 0;
    }

    /* main styles */
    .main {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-content: flex-start;
        flex-wrap: wrap;
    }
    
    .main-content {
        position: absolute;
        top: 0;
        left: 38%;
        background-color: #F3F781;
        
    }
    
    /* about styles */
    .about {
        margin-bottom: 30px;
    }
        
    .about-position {
        font-style: normal;
        font-weight: 600;
        font-size: 10px;
        line-height: 1.2;
        color: #000000;
        margin-bottom: 10px;

    }
        
    .about-name {
        font-style: normal;
        font-weight: 600;
        font-size: 20px;
        line-height: 1.22;
        color: #000000;
        margin-bottom: 10px;
    }
        
    .about-description {
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 1.7;
        color: #595959;
        width: 500px;
    }
        
    /* projects styles */
    .projects {
        margin-bottom: 10px;
        width: 500px;
    }
        
    .title {
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.125;
        color: #000000;
        margin-bottom: 10px;
    }
        
    .projects-list {
        padding: 0;
        margin-left: 15px;
    }
        
    .project-item {
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 1.7;
        color: #000000;
        padding-bottom: 20px;
    }
        
    .project,
    .project-link {
        font-style: normal;
        font-weight: 700;
        font-size: 10px;
        line-height: 1.7;
        color: #595959;
    }
        
    .project-link {
        margin-left: 10px;
    }
        
    .project-bracket {
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 1.7;
        text-decoration: none;
        color: #000000;
    }
        
    /* work styles */
    .work {
        width: 500px;
    }
        
    .work-position {
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 1.25;
        color: #000000;
        margin-bottom: 10px;
    }
        
    .organization {
        font-style: normal;
        font-weight: 600;
        font-size: 10px;
        line-height: 1.25;
        color: #FB6D3A;
    }
        
    .period {
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 1.25;
        color: #A8A8A8;
        margin-bottom: 10px;
    }
        
    .line {
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 1.25;
        color: #000000;
    }
        
    .work-list {
        padding: 0;
        margin-left: 15px;
    }
        
    .work-list-item {
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 1.7;
        color: #595959;
        width: 518px;
    }
        
    /* education styles */
    .table {
        position: absolute;
        white-space: nowrap;
        width: 1px;
        height: 1px;
        overflow: hidden;
        border: 0;
        padding: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        margin: -1px;
    } 

    .education {
        width: 500px;
    }
        
    .organization {
        padding-right: 30px;
    }
        
    .education-position {
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 1.2;
        color: #000000;
        padding-right: 30px;
        margin-right: 30px;
    }
        
    /* sidebar styles */
    .main-sidebar {
        position: absolute;
        top: 0;
        left: 3%;
        width: 250px;
    }
        
    .sidebar {
        background-color: #A9F5E1;
        margin-bottom: 50px;
    }
        
    .sidebar-titel {
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 1.125;
        color: #000000;
        margin-bottom: 10px;
        text-align: start;
    }
        
    .photo {
        width: 250px;
        margin-top: 20px;
        margin-bottom: 10px;
    }
        
    .contact-type {
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 1.125;
        color: #000000;
        margin-bottom: 10px;
        padding: 0;
        list-style: none;
    }
        
    .contact-item {
        list-style: none;
        margin-bottom: 10px;
    }
        
    .contact-icon {
        width: 20px;
        height: 20px;
        border: none;
        margin-right: 10px;
        fill: #FB6D3A;
    }
        
    .contact-link {
        font-style: normal;
        font-weight: 500;
        font-size: 10px;
        line-height: 1.7;
        color: #000000;
        margin-bottom: 20px;
    }
        
    .sidebar-titel,
    .tech-skills,
    .soft-skills,
    .languages-skills {
        margin-left: 30px;
    }
        
    /* .contact {
        margin-bottom: 20px;
    } */
        
    .tech-skills {
        margin-bottom: 20px;
    }
        
    .skills-list {
        color: #000000;
        padding: 0;
        margin-left: 17px;
    }
        
    .skills-text {
        font-style: normal;
        font-weight: 400;
        font-size: 10px;
        line-height: 1.7;
        color: #000000;
    }
        
    .skills-item {
        color: #FB6D3A;
    }
        
    .languages-skills {
        padding-bottom: 100px;
    }
}

/* ---------------------------------------------- */
/* 1280px-desktop */
@media screen and (min-width: 1280px) {
    body {
        min-width: 1280px;
        background-color: #F3F781;
    }

    .main-content {
        width: 800px;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 35%;
        padding: 20px 50px;
    }

    /* about styles */
    .about {
            margin-bottom: 30px;
    }
        
    .about-position {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.2;
        color: #000000;
        margin-bottom: 10px;
    }
        
    .about-name {
        font-style: normal;
        font-weight: 700;
        font-size: 45px;
        line-height: 1.22;
        color: #000000;
        margin-bottom: 10px;
    }
        
    .about-description {
        font-style: normal;
        font-weight: 700;
        font-size: 18px;
        line-height: 1.7;
        color: #595959;
        width: 800px;
    }
        
    /* projects styles */
    .projects {
        margin-bottom: 10px;
        width: 800px;
    }
        
    .title {
        font-style: normal;
        font-weight: 700;
        font-size: 24px;
        line-height: 1.125;
        color: #000000;
        margin-bottom: 10px;
    }
        
    .projects-list {
        padding: 0;
        margin-left: 15px;
    }
        
    .project-item {
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 1.7;
        color: #000000;
        padding-bottom: 30px;
    }
        
    .project,
    .project-link {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.7;
        color: #595959;
    }
        
    .project-link {
        margin-left: 10px;
    }
        
    .project-bracket {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.7;
        text-decoration: none;
        color: #000000;
    }
        
    /* work styles */
    .work {
        width: 800px;
    }
        
    .work-position {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.25;
        color: #000000;
        margin-bottom: 10px;
    }
        
    .organization {
        font-style: normal;
        font-weight: 800;
        font-size: 18px;
        line-height: 1.25;
        color: #FB6D3A;
    }
        
    .period {
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 1.25;
        color: #A8A8A8;
        margin-bottom: 10px;
    }
        
    .line {
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 1.25;
        color: #000000;
    }
        
    .work-list {
        padding: 0;
        margin-left: 15px;
    }
        
    .work-list-item {
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 1.7;
        color: #595959;
        width: 800px;
    }
        
    /* education styles */
    .education {
        width: 800px;
    }
        
    .organization {
        padding-right: 50px;
    }
        
    .education-position {
        font-style: normal;
        font-weight: 700;
        font-size: 14px;
        line-height: 1.2;
        color: #000000;
        padding-right: 50px;
        margin-right: 50px;
    }
        
    /* sidebar styles */
    .main-sidebar {
        position: absolute;
        top: 0;
        left: 5%;
        width: 400px;
        height: 100vh;
    }
        
    .sidebar {
        background-color: #A9F5E1;
        margin-bottom: 50px;
    }
        
    .sidebar-titel {
        color: #000000;
        font-style: normal;
        font-weight: 700;
        font-size: 22px;
        line-height: 1.23;
        margin-bottom: 10px;
    }
        
    .photo {
        width: 400px;
        margin-top: 30px;
        margin-bottom: 10px;
    }
        
    .contact-type {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 1.7;
        color: #000000;
        padding: 0;
        list-style: none;
    }
        
    .contact-item {
        list-style: none;
        margin-bottom: 10px;
    }
        
    .contact-icon {
        width: 24px;
        height: 24px;
        border: none;
        margin-right: 15px;
        fill: #FB6D3A;
    }
        
    .contact-link {
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 1.7;
        color: #000000;
        margin-bottom: 20px;
    }
        
    .sidebar-titel,
    .tech-skills,
    .soft-skills,
    .languages-skills {
        margin-left: 40px;
    }
        
    .contact {
        margin-bottom: 20px;
    }
        
    .tech-skills {
        margin-bottom: 20px;
        }
        
    .skills-list {
        color: #000000;
        padding: 0;
        margin-left: 17px;
    }
        
    .skills-text {
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.7;
        color: #000000;
    }
        
    .skills-item {
        color: #FB6D3A;
    }
        
    .languages-skills {
        padding-bottom: 320px;
    }
}