@media (min-width: 768px) {

    .background {
        position: relative;
        width: 100%;
        height: 116.59vw;
        overflow: hidden;        
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url('../images/bigscreen/background-enterance.png');

    }


    .main-nav {
        z-index: 10;
        position: absolute;
        top: 0vw;
        left: 3.33vw;
        width: 30vw;
        transform-origin: left top;
        transform:rotate(-90deg) translateX(-100%);

    }

   .navbar-nav {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: row; 
    }

    .nav-item {
        margin: 1.5vw;
    }

    .nav-item:hover{
        color: #FAF6EB;
    }

    .nav-link {
        text-decoration: none;
        font-weight: 500;
    }


    .main-text-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 52vw;
        margin-left: auto;
        margin-right: auto;
        gap:1vw;
        margin-top:5.9vw;
    }

    .name{
        display: flex;
        flex-direction: column;
        gap: 0.2vw;
    }


    .description{
        display:flex;
        flex-direction: column;
        gap:1.111vw;
    }



    .about-me-button {
        display:flex;
        align-items: center;
        justify-content: center;
        background-color: #F1EBDC;
        border-radius: 16px;
        width: 12.36vw;
        height: 3.33vw;
    }

    .dive{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 32.8vw;
        text-align: center;
        gap:2.82vw;
    
    }

    .project-background{
        position: relative;
        background: linear-gradient(
            to bottom,
            rgba(21, 9, 3, 0) 0,
            rgba(21, 9, 3, 1) 10.7vw,
            #150903 29.93vw
        );
        height: 29.93vw;
        background-repeat: no-repeat;
        background-size: 100% auto; 
        z-index: 10;
        margin-top: -10.7vw;

    }

    
    .project-container{
        position: relative;
        width: 100%;
        height: 29.93vw;;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.667vw;
    }


    .project-container p, .project-container h2{
        margin: 0;
    }

     .project-container h2{
        margin-top: -40.7vw;
        margin-bottom: -1.6vw;
    }



    .swiper {
        width: 100%;
        overflow: visible;
    }

    
    .swiper-slide { 
        display: flex;
        justify-content: center;
        align-items: center;
        
        
    }
    
    .swiper-slide a {
        pointer-events: none;
        }

    .swiper-slide.swiper-slide-active a {
        pointer-events: auto;
    }
    
    
    .project-frame img{
        width: 66.53vw;
    }

    .swiper-pagination{
        display: none;
    }

     .see-all-button {
        display:flex;
        align-items: center;
        justify-content: center;
        background-color: #F1EBDC;
        border-radius: 16px;
        width: 12.36vw;
        height: 3.33vw;
    }


    .curtain-wrapper {
        width: 100%;
        height: 88vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        z-index: 11;
        position: relative;
        margin-top:-4vw;
        
    }

    .left-curtain, .right-curtain{
        width: 50.07vw;
        height: 85vw;
    }

    .left-curtain{
        transform: scaleX(-1);
    }


    
    .bust-texts{
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5vw;
    }

    .bust-texts p{
        margin:0;
        width: 36vw;
    }



    .center-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -67vw; 
        position: relative;
        text-align: center;
        gap: 3.33vw;
    }

    .profile-pic {
        width: 20.83vw;
        height: 31.25vw;
        object-fit: cover;
    }

    
    .skill-texts{
        width: 100%;
        position: relative;
        margin-top: 10vw;
    }


    .hand {
        width: 36.54vw;
        height: 33.76vw;
        position: absolute;
        left: 0; 
        top: -18vw;
    }

    .skill-texts h3{
        margin-top:-0.5vw;
    }
    

    .skills-section{
        max-width: 80vw;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 2.22vw;
        flex-wrap: wrap;
        position: relative;
    }

    .skills-card{
        background-color: #941B2D;
        border-radius: 32px;
        display: flex;  
        align-items: center;
        padding-left:25px;
        width: 18.33vw;   
        height: 8.05vw;        
        box-sizing: border-box;
    }
    .skills-card-inner {
        display: flex;
        flex-direction: row;
        align-items: flex-start; 
    }

    .skills-card-inner img{
        width: 5.556vw;
        border-radius: 16px;
        object-fit: cover;
    }

    .skills-card-text{
        display: flex;
        flex-direction: column;
        gap: 0.5vw;
        padding-left: 1.667vw;
        justify-content: center;
        align-items: flex-start;
    }

    .skills-experience{
        color: rgba(241, 235, 220, 0.72);
        margin-top: -1.5vw;
    }

    .core-competencies{
        margin-top: 1.73vw;
        display:flex;
        flex-direction: column;
        gap: 3.33vw;
    }

    .soft-skills{
        display:flex;
        flex-direction: row;
        gap: 2.64vw;
        justify-content: center;
        align-items: center;
    }
    
    .soft-skills-card{
        display: flex;
        flex-direction: column;
        gap:1.6vw;
        justify-content: center;
        align-items: center;
        background-color: #941B2D;
        border-radius: 32px;
        width: 11.111vw;
        height: 16.18vw;
    }

    .soft-skills-card img {
        width: 7.77vw;
    }

    .soft-skills-card figcaption{
        width: 7.7vw;
    }

    .contact-me{
        position: relative;
        margin-top: 15vw; 
        min-height: 46.5vw;
    }


    .left-column, .right-column{
        position: absolute;
        bottom:0;
        width: 19.51vw;
        height: 56.52vw;
    }

    .left-column{
        left: 0;
    }

    .right-column{
        right: 0;
        transform: scaleX(-1);
    }

    

   .contact-texts {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative; 
        gap: 0vw;
    }

    .contact-texts p {
        margin: 0; 
    }

    .contact-form{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        text-align: center;
        gap: 2.5vw;
        margin-top: 2vw;
    }

    .contact-form-name-email{
        width: 46.94vw;
        height: 4.31vw;
        border-radius: 16px;
        border: 1px solid #5F3413;
        background-color: transparent;
        padding-left: 2.5vw;

    }

    .contact-form-message{
        width: 46.94vw;
        height: 8.33vw;
        border-radius: 16px;
        background-color: transparent;
        border: 1px solid #5F3413;
        padding-left: 2.5vw;
        padding-top: 3vw;
        resize: none;
    }

    .send-button{
        padding: 0.55vw 2.77vw;
        border-radius: 16px;
        background-color: #150903;
    }

    .email-error{
      color: #B04C4E;
      text-align: left;
      margin-top: -1vw;
      display: none;
      white-space: nowrap;
    }

    .contact-logos{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 2.222vw;
    }
    
    .contact-logos img{
        width:4.44vw;
    }
}




@media (max-width: 768px) {

    .background{
        background-image: url('../images/smallscreen/background-entrance.png');
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 296.14vw;
        overflow: hidden;
        z-index: 1;
        position: relative;
    }

    .background::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 18.18vw;
        background-color: #1509037A;
        z-index: 2;
    }
    
    .main-nav {
        width: 100%;
        margin-top: 6vw;
        position: relative; 
        z-index: 3; 
    }

   .navbar-nav {
        list-style: none;
        display: flex;
        flex-direction: row; 
        justify-content: center;
        align-items: center;
        gap: 14.1vw;

    }

    .nav-item:hover{
        color: #FAF6EB;
    }

    .main-text-container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        width: 85.45vw;
        margin-left: auto;
        margin-right: auto;
        gap: 7.27vw;
        margin-top: 18vw;
        z-index: 4;
    }

    .name{
        display: flex;
        flex-direction: column;
        gap: 1.667vw;
    }

    .name h1{
        margin-top: 1.81vw;
        margin-bottom: 1vw;
    }

    .description{
        display:flex;
        flex-direction: column;
        gap: 3.8vw;
    }

    .main-text-container p{
        margin:0;
    }
    
    .about-me-button {
        display:flex;
        align-items: center;
        justify-content: center;
        background-color: #F1EBDC;
        border-radius: 16px;
        width: 33.18vw;
        height: 10.91vw;
    }

    .dive{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 58.18vw;
        text-align: center;
        gap:2.92vw;
    
    }
    

    .project-background{
        background: #150903;
        height: 50.6818vw;
        background-repeat: no-repeat;
        margin-top: -0.1vw;

    }
    
    .project-container{
        position: relative;
        width: 100%;
        height: 50.6818;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5.45vw;
        z-index: 4;
       
    }
    
    .project-container p, .project-container h2{
        margin: 0;
    }

    .project-container h2{
        margin-top: -95vw;
        margin-bottom: -3vw;
    }
    
    
    .swiper {
        width: 100vw;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 5.45vw;
    } 


    .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 1vw;
    }
    
    .swiper-slide a {
        pointer-events: none;
    }

    .swiper-slide.swiper-slide-active a {
        pointer-events: auto;
    }

    .project-frame img{
        width: 73.64vw;
    }

    .swiper-pagination {
        width: clamp(8px, 1.81vw, 14px);
        height: clamp(8px, 1.81vw, 14px);
        position: relative;
        display: flex;
        gap: 1.818vw;
        justify-content: center;
        align-items: center;
        
    }
    .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
        background-color: #5F3413;
    }

    .swiper-pagination-bullet-active {
        background-color: #F1EBDC;
    }


    .see-all-button{
        display:flex;
        align-items: center;
        justify-content: center;
        background-color: #F1EBDC;
        border-radius: 16px;
        width: 26.818vw;
        height: 10.91vw;
    }



    .left-curtain, .right-curtain{
        width: 50vw;
        height: auto;
    }

    .left-curtain{
        transform: scaleX(-1);
    }


    .curtain-wrapper {
        position: relative;
        width: 100%;
        height: 88vw;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        z-index: 11;
        position: relative;
        margin-top:-4vw;
    }

     .left-curtain, .right-curtain{
        width: 50vw;
        height: auto;
    }

    .left-curtain{
        transform: scaleX(-1);
    }
    

    .center-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -71vw; 
        position: relative;
        z-index: 14; 
        text-align: center;
    }

    .profile-pic {
        width: 45.45vw;
        object-fit: cover;
        margin-bottom: 7.27vw;
        margin-top: 14vw;
    }

    .the-face{
        margin-top: -1.5vw;
    }

    .learned{
        width: 85.45vw;
        margin-top: -0.5vw;
    }

    .skill-texts{
        width: 100%;
        position: relative;
        margin-top: 15vw;
    }

    .hand {
        width: 29.54vw;
        height: auto;
        position: absolute;
        left: 0;
        top: -26vw;
    }

    .skill-texts h3{
        margin-top:0.75vw;
    }
    

    .skills-section{
        max-width: 92.7vw;
        display: flex;
        gap: 1.818vw;
        flex-wrap: wrap;
        left:auto;
        right:auto;
        position: relative;
        margin-top: 5.45vw;
        margin-bottom:30vw;
    }

    .skills-card{
        background-color: #941B2D;
        border-radius: 32px;
        display: flex;  
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 29.54vw;   
        height: 44.54vw;        
        box-sizing: border-box;
        
    }
    .skills-card img{
        width: 20vw;
        border-radius: 16px;
        object-fit: cover;
    }


    .skills-card-text{
        margin-top:1.81vw;
    }

    .skills-experience{
        margin-top: -4.2vw;
    }


    .core-competencies{
        margin-top: 1.73vw;
        display:flex;
        flex-direction: column;
        gap: 3.33vw;
    }

    .soft-skills{
        display:flex;
        flex-direction: row;
        gap: 2.64vw;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .soft-skills-card{
        display: flex;
        flex-direction: column;
        gap:1.6vw;
        justify-content: center;
        align-items: center;
        background-color: #941B2D;
        border-radius: 32px;
        width: 29.54vw;
        height: 44.54vw;
    }

    .soft-skills-card img {
        width: 20vw;
    }

    .soft-skills-card figcaption{
        width: 20vw;
    }

    .contact-me{
        position: relative;
        margin-top: 35vw; 
        min-height: 145vw;
        
    }


    .left-column, .right-column{
        position: absolute;
        bottom: 15vw;
        width: auto;
        height: 157.72vw;
    }

    .left-column{
        left: 0;
    }

    .right-column{
        right: 0;
    }

   .contact-texts {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative; 
        gap: 0vw;
        width: 71.6vw;
        margin-left: auto;
        margin-right: auto;
    }
    

    .contact-texts p {
        margin: 0; 
    }

    .contact-texts h2{
        text-align: center;
    }
    .contact-form{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        text-align: center;
        gap: 7.27vw;
        margin-top: 2vw;
    }

    .contact-form-name-email{
        width: 71.6vw;
        height: 10.91vw;
        border-radius: 16px;
        border: 1px solid #5F3413;
        background-color: transparent;
        padding-left: 2.5vw;

    }

    .contact-form-message{
        width: 71.6vw;
        height: 21.36vw;
        border-radius: 16px;
        background-color: transparent;
        border: 1px solid #5F3413;
        padding-left: 2.5vw;
        padding-top: 3vw;
        resize: none;
    }

    .send-button {
        display:flex;
        align-items: center;
        justify-content: center;
        background-color: #150903;
        border-radius: 16px;
        width: 24.09vw;
        height: 10.91vw;
    }
    .email-error{
        color: #B04C4E;
        text-align: left;
        margin-top: -1vw;
        display: none;
    }

    .contact-logos{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 7.27vw;
    }
    .contact-logos img{
        width: 10.9vw;
    }

    
}