*,
*::before,
*::after{
    box-sizing: border-box;
}

/* Custom Properties */

:root{
    --ff-poppins: 'Poppins', sans-serif;
    --ff-nunito: 'Nunito', sans-serif;

    --fw-reg: 300;
    --fw-bold: 900;
    /*
    --clr-light: #fff;
    --clr-dark: #14453D;
    --clr-accent: #43C59E;
    --clr-accent-2: #3D7068;
    --clr-accent-3:#3DFAFF;
    --clr-select: #48BEFF;
    */
    --clr-light: #ECE8EF;
    --clr-dark: #161925;
    --clr-accent: #FFA630;
    --clr-accent-2: #FFCA85;
    --clr-accent-3:#B76E01;
    --clr-select: #7165F6;

    --fs-h1: 3.52em;
    --fs-h2: 1.80em;
    --fs-h3: 1.63em;
    --fs-body: 14pt;
}
/*-------DESKTOP VERSION-------*/
@media (min-width: 800px){
    :root {        
        --fs-h1: 6.52em;
        --fs-h2: 1.80em;
        --fs-h3: 1.63em;
        --fs-body: 12pt;
        
    }
}
/* General Styles */
body{
    background: var(--clr-light);
    color: var(--clr-dark);
    margin: 0;
    font-family: var(--ff-nunito);
    font-size: var(--fs-body);
    line-height: 1.5em;
}

strong{ font-weight: var(--fw-bold)}

.nav_link{
    padding-right:0.41em;
    padding-left:0.41em;
    float: right;
    text-align: center;
}
.nav_link:link, .nav_link:visited{
    text-decoration: none;
    color: var(--clr-dark);
}
.nav_link:hover, .nav_link:active{
    text-decoration: none;
    color: var(--clr-select);
}
/* Typography */

h1,
h2,
h3 {
    line-height: 1.5em;
    margin: 0;
}
.nav_link{
    font-family: var(--ff-poppins);
    font-size: var(--fs-body);
}

h1{ 
    font-family: var(--ff-poppins);
    font-size: var(--fs-h1)
}
h2{ 
    font-family: var(--ff-poppins);
    font-size: var(--fs-h2)
}
h3{ font-size: var(--fs-h3)}




/* Home Screen */

.home_bg_left{
    background-color: var(--clr-accent-2);
}

.home_bg_right{
    background-color: var(--clr-light);
}

.home_box_left{
    background: var(--clr-accent);
}

.home_box_right{
    background: var(--clr-light);
}
/*-------MOBILE VERSION-------*/
@media (max-width: 799px){
    html, body{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    .main_header{
        display: flex;
        flex-direction: row;
        background-color: var(--clr-light);
        width: 100%;
        height: 3.00em;
        padding: 1.0em;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
    }
    .nav_link{
        padding-right:0.41em;
        padding-left:0.41em;
        float: right;
        text-align: center;
    }
    .nav_link:link, .nav_link:visited{
        text-decoration: none;
        color: var(--clr-dark);
    }
    .nav_link:hover, .nav_link:active{
        text-decoration: none;
        color: var(--clr-select);
    }
    .main_footer{
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: var(--clr-light);
        min-height: 3.00em;
        z-index: 100;
        justify-content: center;
        align-items: center;
        margin: auto;
        text-align: center;
    }
    .main_footer p{
        padding: 0.5em 0.5em;
    }
    .main_footer img{
        display:block;
        margin:auto;
        max-width: 9%;
        height: 0 auto;
    }
    .home_screen {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: auto;
        margin: 0;
        height: auto;
    }
    .home_bg_mobile{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        background: linear-gradient(180deg, var(--clr-light) 0%,var(--clr-accent-2) 60%);
    }
    .home_bg_left,
    .home_bg_right {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        background: var(--clr-light);
        margin: 0;
        box-sizing: border-box;
    }
    .home_bg_right {
        top: 40%;
        height: 30em;
        background: var(--clr-light);
    }
    .home_box-cnt {
        margin-top: 5em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 90%;
        margin-right: 0em;
        z-index: 2;
      }
    .home_box_left,
    .home_box_right {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
    }
    
    .home_box_left {
        max-width: 100%;
        background: var(--clr-accent);
        box-shadow: -5px 4px 8px 0 rgba(0, 0, 0, 0.2), -5px 6px 20px 0 rgba(0, 0, 0, 0.19);
        z-index: 2;
        margin-bottom: 1em;
    }
    
    .home_box_right {
        max-width: 33em;
        background: var(--clr-accent-2);
        z-index: 1;
    }
    
    .home_box_left-cnt{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .img_portrait{
        width:70%;
        max-width: 100%;
        height: auto;
        padding-top: 2em;
        padding-bottom: 0.1em;
    }
    .home_box_left-name{
        font-family: var(--ff-nunito);
        display:inline-block;
        margin: 0.78em;
        max-width:50%;
        text-align:center;
    }
    .home_box_left-name h2{
        line-height: 1.05;
        font-size: 35pt;
    }
    .home_box_left-vorname{
        font-size: 25pt;
        color: var(--clr-accent-3)
    }
    .home_box_left-hr{
        border: none;
        height: 2px;
        width: 20%;
        margin: 1.0em;
        background-color: var(--clr-select);
    }
    .home_box_left-title{
        font-size: 12pt;
        padding-bottom: 2.5em;
    }
    .home_box_left-media{
        background: var(--clr-light);
        padding-top: 1.0em;
        padding-bottom: 1.0em;
        display: grid;
        grid-template-columns: 30% 13.3% 13.3% 13.4% 30%;
    }
    .media_a{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .media_img{
        width: 45%;
        max-width: 100%;
        height: auto;
    }
    .home_box_right-cnt{
        text-align: justify;
        align-items: left;
        padding: 0;
        padding-left: 0;
        line-height: 1.3;
    }
    .home_box_right h3{
        font-size: 1.2em;
        line-height: 1.1;
        padding-top: 0;
        padding-bottom:0em;
        
    }
    .home_box_right p{
        margin-bottom: 1.5em;
        line-height: 1.3;
    }
    .btn_cont{
        display: flex; 
        justify-content: space-around;
        width: 100%;
        padding: 0.0em 0 0.0em 0;
    }
    .btn_resume, .btn_projects{
        cursor: pointer;
        display: inline-block;
        width: 50%;
        min-height: 3.13em;
        margin-top: 1.5em;
        margin-bottom: 1.5em;
        margin-left: 0.3em;
        background-color: var(--clr-select);
        color: var(--clr-light);
        border: none;
        border-radius: 1.56em;
    }
    .btn_resume:hover{
        background-color: var(--clr-light);
        color: var(--clr-dark);
        border: 0.16em solid var(--clr-dark);
    }
    .btn_projects{
        background-color: var(--clr-accent);
        color: var(--clr-dark);
        border: 0.16em solid var(--clr-accent);
    }
    .btn_projects:hover{
        background-color: var(--clr-light);
        color: var(--clr-dark);
        border: 0.16em solid var(--clr-dark);
    }
}
/*-------DESKTOP VERSION-------*/

@media (min-width: 800px){
    .main_header{
        background-color: var(--clr-light);
        width: 100%;
        height: 3.00em;
        padding: 1.0em;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
    }
    .nav_link{
        padding-right:0.41em;
        padding-left:0.41em;
        float: right;
        text-align: center;
    }
    .nav_link:link, .nav_link:visited{
        text-decoration: none;
        color: var(--clr-dark);
    }
    .nav_link:hover, .nav_link:active{
        text-decoration: none;
        color: var(--clr-select);
    }

    .main_footer{
        /*position: fixed;
        bottom: 0;
        min-height: 3.00em;
        /* box-shadow: inset 0vw -8px 6px -6px gray; */
        position: relative;
        display: flex;
        flex-direction: column;
        background-color: var(--clr-light);
        min-height: 3.00em;
        z-index: 100;
        justify-content: center;
        align-items: center;
        margin: auto;
        text-align: center;
    }
    .main_footer p{
        padding-left: 1.0em;
    }
    .main_footer img{
        position: fixed;
        bottom: 0.5em;
        right: 0.5em;
        max-width: 1.5%;
        height: auto;
        
        margin-right: 0.0em;
    }

    body, html {
        margin: 0;
        padding: 0;
    }
    .home_screen {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden; /* Para evitar el desbordamiento de elementos fijados */
        margin: 0;
        height: 100vh;
    }
    
    .home_bg_left,
    .home_bg_right {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        background: var(--clr-accent-2);
        margin: 0;
        box-sizing: border-box;
    }
    
    .home_bg_right {
        left: 40%;
        background: var(--clr-light);
    }
    .home_box-cnt {
        margin-top: 20vh;
        display: flex;
        justify-content: center;
        width: 50em;
        margin-right: 7em;
        z-index: 2;
      }
    .home_box_left,
    .home_box_right {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
    }
    
    .home_box_left {
        max-width: 23em;
        background: var(--clr-accent);
        box-shadow: -5px 4px 8px 0 rgba(0, 0, 0, 0.2), -5px 6px 20px 0 rgba(0, 0, 0, 0.19);
        z-index: 2;
    }
    
    .home_box_right {
        max-width: 33em;
        background: var(--clr-light);
        z-index: 2;
    }
    
    .home_box_right h1,
    .home_box_right h3,
    .home_box_right p {
        margin: 0;
    }
    .home_box_left-cnt{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .img_portrait{
        width:60%;
        max-width: 100%;
        height: auto;
        padding-top: 2em;
        padding-bottom: 0.1em;

    }
    .home_box_left-name{
        font-family: var(--ff-nunito);
        display:inline-block;
        margin: 0.78em;
        max-width:50%;
        text-align:center;
    }
    .home_box_left-name h2{
        line-height: 1.05;
        font-size: 35pt;
    }
    .home_box_left-vorname{
        font-size: 25pt;
        color: var(--clr-accent-3)
    }
    .home_box_left-hr{
        border: none;
        height: 2px;
        width:20%;
        margin: 1.0em;
        background-color: var(--clr-select);
    }
    .home_box_left-title{
        font-size: 13pt;
        padding-bottom: 2.5em;
    }
    .home_box_left-media{
        background: var(--clr-light);
        padding-top: 1.0em;
        padding-bottom: 1.0em;
        display: grid;
        grid-template-columns: 30% 13.3% 13.3% 13.4% 30%;
    }
    .media_a{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .media_img{
        width: 45%;
        max-width: 100%;
        height: auto;
    }
    .home_box_right-cnt{
        text-align: justify;
        align-items: left;
        padding: 0.9em;
        padding-left: 1.0em;
        line-height: 1.3;
    }
    .home_box_right h3{
        font-size: 1.7em;
        line-height: 1.4;
        padding-top: 0;
        padding-bottom:0em;
        
    }
    .home_box_right p{
        margin-bottom: 1.5em;
        line-height: 1.5;
    }
    .btn_cont{
        display: flex; 
        justify-content: space-around;
        width: 100%;
        padding: 2.0em 0 2.0em 0;
    }
    .btn_resume, .btn_projects{
        cursor: pointer;
        display: inline-block;
        width: 40%;
        min-height: 3.13em;
        margin: 0.78em;
        background-color: var(--clr-select);
        color: var(--clr-light);
        border: none;
        border-radius: 1.56em;
    }
    .btn_resume:hover{
        background-color: var(--clr-light);
        color: var(--clr-dark);
        border: 0.16em solid var(--clr-dark);
    }
    .btn_projects{
        background-color: var(--clr-light);
        color: var(--clr-dark);
        border: 0.16em solid var(--clr-accent);
    }
    .btn_projects:hover{
        background-color: var(--clr-accent-2);
        color: var(--clr-dark);
        border: 0.16em solid var(--clr-dark);
    }
}

/* Resume Screen */

.resume_bg{
    background-color: var(--clr-accent-2);
    width: 100%;
}
/*------ MOBILE VERSION -------*/
@media (max-width: 799px){
    .resume_screen{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        height: 100vh;
    }
    .resume-title{
        font-size: 3em;
        text-align: center;
        padding-top: 2em;
        line-height: 1.5;
    }
    .btn_download{
        cursor: pointer;
        min-width: 15em;
        min-height: 2.0em;
        margin-top: 0.0em;
        margin-bottom: 1.5em;
        background-color: var(--clr-accent);
        color: var(--clr-dark);
        border:0.1vw solid var(--clr-dark);
        border-radius: 1.0em;
    }
    .btn_download:hover{
        background-color: var(--clr-light);
        color: var(--clr-dark);
        border: 0.1vw solid var(--clr-dark);
    }
    .work_experience-cnt{
        width: 95%;
        margin-right: auto;
        margin-left: auto;
    }
    .work_experience-title p{
        font-size: 1.5em;
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        margin-left: 0;
        margin-right: 0em;
        line-height: 1.5;
    }
    .work_experience-title ul{
        display: inline-block;
        vertical-align: middle;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        text-align: left;
    }
    .work_experience-title li{
        display: inline-block;
        margin-left: 1.5em;
        margin-bottom: 0.5em;
    }
    .work_experience-title li a {
        display: block;
        color: var(--clr-dark);
        text-align: center;
        padding: 0.2em;
        text-decoration: none;
        min-width: 8em;
        border: 0.1em solid var(--clr-dark);
        border-radius: 1em;
    }
    .work_experience-title li a:hover {
        background-color: var(--clr-select);
        color: var(--clr-light);
        border: none;
    }
    .btn_cont{
        display: flex;
        justify-content: center;
    }
    .work_experience-exp{
        margin-bottom: 3vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        position: relative;
        padding: 1.5em; 
        background-color: var(--clr-light);
        box-shadow: -5px 4px 8px 0 rgba(0, 0, 0, 0.2), -5px 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .work_experience-exp-left,
    .work_experience-exp-right {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
    }
    .work_experience-exp-left {
        max-width: 100%;
        background: var(--clr-light);
        z-index: 2;
        text-align: justify;
    }
    .work_experience-exp-right {
        height: 100%;
        max-width: 100%;
        background: var(--clr-light);
        z-index: 2;
        height: auto;
    }
    .work_experience-exp h1,h2,h3{
        line-height: 2em;
    }
    .work_experience-exp h2{
        color: var(--clr-select);
        line-height: 1.2;
        text-align: left;
    }
    .work_experience-exp h3{
        font-size: 0.9em;
        line-height: 1.2;
        text-align: left;
    }
    .work_experience-exp ol, ul{
        padding-left: 1em;
    }
    .work_experience-exp ul{
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }
    .work_experience-exp-right img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        width: 100%;
        height: auto;
    }
    .education-cnt{
        width: 95%;
        margin-right: auto;
        margin-left: auto;
    }
    .education-title p{
        font-size: 1.5em;
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        margin-right: 0em;
    }
    .education-title ul{
        display: inline-block;
        vertical-align: middle;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .education-title li{
        display: inline-block;
    }
    .education-title li a {
        display: block;
        color: var(--clr-dark);
        text-align: center;
        padding: 0.2em;
        text-decoration: none;
        min-width: 15em;
        border: 0.1em solid var(--clr-dark);
        border-radius: 1em;
    }
    .education-title li a:hover {
        background-color: var(--clr-select);
        color: var(--clr-light);
        border: none;
    }
    .education-edu{
        margin-top: 1vh;
        margin-bottom: 3vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        position: relative;
        z-index: 2;
        padding: 1.5em; 
        background-color: var(--clr-light);
        box-shadow: -5px 4px 8px 0 rgba(0, 0, 0, 0.2), -5px 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .education-edu-top,
    .education-edu-bot,
    .education-edu-left,
    .education-edu-right {
        width: 100%;
        margin: 0 0;
        box-sizing: border-box;
        position: relative;
    }
    .education-edu-top{
        width: 100%;
    }
    .education-edu-bot{
        display: flex;
        flex-direction: column;
    }
    .education-edu-left {
        max-width: 10em;
        height: auto;
        padding-top: 0.5em;
        margin: auto;
        text-align: center;
        background: var(--clr-light);
    }
    .education-edu-right {
        height: 100%;
        max-width: 100%;
        background: var(--clr-light);
        text-align: justify;
        height: auto;
        padding-left: 0em;
    }
    .education-edu-top h2{
        line-height: 1.2;
        color: var(--clr-select)
    }
    .education-edu-top h3{
        line-height: 1.2;
        font-size: 0.9em;
    }
    .education-edu-left img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        width: 100%;
        height: auto;
    }
    .education-edu-right ul{
        columns: 1;
        -webkit-columns: 1;
        -moz-columns: 1;
    }
}

/*------ DESKTOP VERSION -------*/
@media (min-width: 800px){ 
    .resume_screen{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        height: 100vh;
    }
    .resume-title{
        font-size: 3em;
        text-align: center;
        padding-top: 3em;
        line-height: 0.5;
    }
    .btn_download{
        cursor: pointer;
        min-width: 15em;
        min-height: 2.0em;
        margin-top: 0.0em;
        margin-bottom: 0.5em;
        background-color: var(--clr-accent);
        color: var(--clr-dark);
        border:0.1vw solid var(--clr-dark);
        border-radius: 1.0em;
    }
    .btn_download:hover{
        background-color: var(--clr-light);
        color: var(--clr-dark);
        border: 0.1vw solid var(--clr-dark);
    }
    .work_experience-cnt{
        width: 100%;
        max-width:70em;
        margin-right: auto;
        margin-left: auto;
    }
    .work_experience-title p{
        font-size: 1.5em;
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        margin-right: 3em;
    }
    .work_experience-title ul{
        display: inline-block;
        vertical-align: middle;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .work_experience-title li{
        display: inline-block;
    }
    .work_experience-title li a {
        display: block;
        color: var(--clr-dark);
        text-align: center;
        padding: 0.2em;
        text-decoration: none;
        min-width: 8em;
        border: 0.1em solid var(--clr-dark);
        border-radius: 1em;
    }
    .work_experience-title li a:hover {
        background-color: var(--clr-select);
        color: var(--clr-light);
        border: none;
    }
    .btn_cont{
        display: flex;
        justify-content: center;
    }
    .work_experience-exp{
        margin-top: 1vh;
        margin-bottom: 3vh;
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        position: relative;
        padding: 1.5em; 
        background-color: var(--clr-light);
        box-shadow: -5px 4px 8px 0 rgba(0, 0, 0, 0.2), -5px 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .work_experience-exp-left,
    .work_experience-exp-right {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
    }
    .work_experience-exp-left {
        max-width: 50em;
        background: var(--clr-light);
        z-index: 2;
        text-align: justify;
    }
    .work_experience-exp-right {
        height: 100%;
        max-width: 20em;
        background: var(--clr-light);
        z-index: 2;
        height: auto;
    }
    .work_experience-exp h1,h2,h3{
        line-height: 2em;
    }
    .work_experience-exp h2{
        color: var(--clr-select)
    }
    .work_experience-exp h3{
        font-size: 0.9em;
    }
    .work_experience-exp ul{
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }
    .work_experience-exp-right img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        width: 100%;
        height: auto;
    }
    .education-cnt{
        width: 100%;
        max-width:70em;
        margin-right: auto;
        margin-left: auto;
    }
    .education-title p{
        font-size: 1.5em;
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        margin-right: 3em;
    }
    .education-title ul{
        display: inline-block;
        vertical-align: middle;
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .education-title li{
        display: inline-block;
    }
    .education-title li a {
        display: block;
        color: var(--clr-dark);
        text-align: center;
        padding: 0.2em;
        text-decoration: none;
        min-width: 12em;
        border: 0.1em solid var(--clr-dark);
        border-radius: 1em;
    }
    .education-title li a:hover {
        background-color: var(--clr-select);
        color: var(--clr-light);
        border: none;
    }
    .education-edu{
        margin-top: 1vh;
        margin-bottom: 3vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 100%;
        position: relative;
        z-index: 2;
        padding: 1.5em; 
        background-color: var(--clr-light);
        box-shadow: -5px 4px 8px 0 rgba(0, 0, 0, 0.2), -5px 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .education-edu-top,
    .education-edu-bot,
    .education-edu-left,
    .education-edu-right {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
    }
    .education-edu-top{
        width: 100%;
    }
    .education-edu-bot{
        display: flex;
        flex-direction: row;
    }
    .education-edu-left {
        max-width: 14em;
        background: var(--clr-light);
    }
    .education-edu-right {
        height: 100%;
        max-width: 56em;
        background: var(--clr-light);
        text-align: justify;
        height: auto;
        padding-left: 2em;
    }
    .education-edu-top h2{
        line-height: 2vw;
        color: var(--clr-select)
    }
    .education-edu-top h3{
        line-height: 2vw;
        font-size: 0.8vw;
    }
    .education-edu-left img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        width: auto;
        height: auto;
    }
    .education-edu-right ul{
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }
}

/* Project Screen */
.projects_bg{
    background-color: var(--clr-accent-2);
    width: 100%;
}
/* ------MOBILE VERSION------- */
@media (max-width: 799px){ 
    .projects-screen{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        height: 100vh;
    }
    .projects-title{
        font-size: 3em;
        text-align: center;
        padding-top:2em;
        line-height: 0.5;
        padding-bottom: 0.5em;
    }
    .project_cont{
        display: flex;
        flex-direction: column;
        max-width: 95%;
        height: auto;
        margin: auto;
        margin-top: 1vh;
        margin-bottom: 3vh;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        padding: 0em; 
        background-color: var(--clr-light);
        box-shadow: -5px 4px 8px 0 rgba(0, 0, 0, 0.2), -5px 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .project_cont-left,
    .project_cont-right {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
    }
    .project_cont-left {
        padding: 1.0em;
        max-width: 56em;
        background: var(--clr-light);
        text-align: justify;
    }
    .project_cont-right {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        max-width: 100%;
        background-color: var(--clr-accent)
    }
    .project_cont h1,h2,h3{
        line-height: 2vw;
    }
    .project_cont h2{
        color: var(--clr-select);
        line-height: 1.2;
        text-align: left;
    }
    .project_cont h3{
        font-size: 0.8vw;
    }
    .project_cont-right img {
        max-width: 60%;
        max-height: 100%;
        object-fit: contain;
        width: 100%;
        height: auto;
        padding: 0.5em;
    }
    .project_cont-click{
        display: flex;
        flex-direction: column;
        max-width: 100%;
        margin: auto;
        margin-top: 1vh;
        margin-bottom: 3vh;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        padding: 0em; 
        background-color: var(--clr-light);
        box-shadow: -5px 4px 8px 0 rgba(0, 0, 0, 0.2), -5px 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .project_cont-click:hover{
        cursor: pointer;
        box-shadow: -25px 24px 28px 0 rgba(0, 0, 0, 0.2), -25px 26px 40px 0 rgba(0, 0, 0, 0.19);
    }
    .project_cont-click h2{
        color: var(--clr-select);
        line-height: 1.2;
        text-align: left;
    }
}

/* ------DESKTOP VERSION------- */
@media (min-width: 800px){ 
    .projects-screen{
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        height: 100vh;
    }
    .projects-title{
        font-size: 3em;
        text-align: center;
        padding-top:3em;
        line-height: 0.5;
        padding-bottom: 0.5em;
    }
    .project_cont{
        display: flex;
        flex-direction: row;
        max-width: 70em;
        height: 15em;
        overflow: hidden;
        margin: auto;
        margin-top: 1vh;
        margin-bottom: 3vh;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        padding: 0em; 
        background-color: var(--clr-light);
        box-shadow: -5px 4px 8px 0 rgba(0, 0, 0, 0.2), -5px 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .project_cont-left,
    .project_cont-right {
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        position: relative;
    }
    .project_cont-left {
        padding: 1.0em;
        max-width: 56em;
        background: var(--clr-light);
        text-align: justify;
    }
    .project_cont-right {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        width: 100%;
        max-width: 14em;
        background-color: var(--clr-accent)
    }
    .project_cont h1,h2,h3{
        line-height: 2vw;
    }
    .project_cont h2{
        color: var(--clr-select)
    }
    .project_cont h3{
        font-size: 0.8vw;
    }
    .project_cont-right img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        width: 100%;
        height: auto;
        padding: 0.5em;
    }
    .project_cont-click{
        display: flex;
        flex-direction: row;
        max-width: 70em;
        height: 15em;
        overflow: hidden;
        margin: auto;
        margin-top: 1vh;
        margin-bottom: 3vh;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        padding: 0em; 
        background-color: var(--clr-light);
        box-shadow: -5px 4px 8px 0 rgba(0, 0, 0, 0.2), -5px 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    .project_cont-click:hover{
        cursor: pointer;
        box-shadow: -25px 24px 28px 0 rgba(0, 0, 0, 0.2), -25px 26px 40px 0 rgba(0, 0, 0, 0.19);
    }
    .project_cont-click h2{
        color: var(--clr-select)
    }
}