@media screen and (max-width: 2000px) {
    
    nav {
        width: 100%;
        position: relative;
        bottom: 0px;
    }
    #secOne {
        width: 100% !important;
        position: relative;
    }
    #secThree {
        position: relative;
        height: 50% !important;
        
    }
    
 }
    
@media (max-width: 1400px) {
    

    nav {
        width: 103% !important;
        position: relative;
    }

    nav img {
        margin-top: 40px;
        width: 80px;
        height: 80px;
    }

    body {
        position: relative;
        z-index: 1;
        overflow-x: hidden;
        min-height: 100vh;
        width: 100%;
    }

    main {
        position: relative;
        z-index: 2;
        width: 100%;
        max-width: 100vw;
    }

    #secOne {
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        position: relative;
        overflow: hidden;
        bottom: 100px;
        
    }
    

    #secTwo {
        position: relative;
        width: 840px !important;
        bottom: 50px;
        height: 50% !important;
        margin: 0;
        right: 0px;
    }

    .background {
        width: 99.1%;
        height: 100%;
        position: fixed;
        right: 0%;
        top: 0%;
        left: 0%;
        z-index: -1;
        overflow: hidden;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transform: scale(1); 
    }

    #secThree {
        position: relative;
        width: 100%;
        left: 20px;
        bottom: 50px;
    }

    

    footer {
        position: relative;
        z-index: 2; 
        width: 103% !important;
        left: 0%;
        padding-right: 20px !important;
        padding-left: 30px !important;
        padding-bottom: 100px !important;
        flex-shrink: 0; 
    }
}

 @media screen and (max-width: 1680px) {
    nav {
        position: relative;
        bottom: 0px;
    }
    #secOne {
        width: 100% !important;
        bottom: 40px !important;
        margin-bottom: 0px;
        position: relative;
        left: 0%;
        padding-bottom: 100px;
    }

    #secTwo {
        width: 100% !important;
        position: relative;
        padding-bottom: 100px;
        bottom: 50px !important;
    }
    #secTwo > * {
        position: relative;
        top: 10%;
    }

     #secThree {
        position: relative;
        width: 100%;
        left: 0px;
        bottom: 0px;

    .background {
        max-width: 100%;
        position: fixed;
        height: 2000px !important;
        top: 0% !important;
    }
    
 }

@media screen and (max-width: 1024px){
    nav {
        position: relative;
    }
    #secOne {
        width: 94% !important;
        bottom: 100px !important;
        margin-bottom: 0px;
        position: relative;
        left: 4%;
        padding-bottom: 100px;
    }
}



@media (max-width: 1144px) {
    nav {
        position: relative;
    }

    #secTwo {
        padding-bottom: 200px !important;
    }
    #secTwo div {
        position: relative;
        top: 20%;
    }

    #secTwo h1 {
        font-size: 1.4rem;
    }
    .initial-container h1 {
        font-size: 30px
    }

    #secThree {
        width: 100%;
        margin: 0;
        bottom: 100px !important;
        padding: 125px 0px 125px 0px;
        display: grid;
        grid-template:
        "progress skills" 500px;
        gap: 30px;
        align-items: center;
        justify-content: center;
}

@media (max-width: 1182px) {
    nav {
        position: relative;
        bottom: 12px;
    }

    #secOne {
        width: 100% !important;
        left: 0%;
        margin-bottom: 10px;
    }
    
}

@media (max-width: 1000px) {

    nav {
        width: 100%;
        position: relative;
    }
    
    .wave::before {
        
        right: 0%;
        top: 30%;
        transform: rotate(1deg);
      }

      

    #secOne {
        grid-template: 
            "title title" auto
            "presentation register" auto;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 100%;
        min-height: 100%;
        margin-top: 50px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transform: scale(1.1);
        justify-items: center;
    }
    

    #secOne > div  {
        margin: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
        align-items: center;
        padding: 0;
        margin-bottom: 30px;
    }

    #secOne h1 {
        margin: 0;
        padding: 10px;
        width: 100%;
    }

    

    .info-container {
        margin: 0;
        height: 70%;
        
        width: 70%;
    }
    .info-container p {

        font-size: 11px;
    }

    .info-container img {
        margin: 0;
        width: 50%;
    }

   
    .presentation {
        width: 80%;
    }

    

    .presentation img {
        width: 30%;
        border-radius: 20%;
        margin-bottom: 100px;
    }

    .register-container {
        height: 70%;
        width: 70%
    }

    .register-container p {

        font-size: 11px;
        min-width: none;
    }

    .register-container img {
        margin: 0;
        width: 40%;
        height: 30%;
        margin-bottom: 20px;
    }

    .register-container a {
        margin: 0;
        font-size: 15px;
        margin-bottom: 10px;
    }

    
    
    #secTwo {
        grid-template: 
            "about-me" auto
            "studios" auto
            "laboral-experience" auto;
        
    }

    #secThree {
        grid-template:
    "progress" auto
    "skills" auto;
        margin-top: 50px;
        margin-bottom: 100px;
    }
    .background {
        max-width: 100%;
        position: relative;
        height: 1000px !important;
        top: 0% !important;
    }
}

@media (max-width: 801px) {


    nav {
        height: 13vh;
    }

    nav img {
        width: 70px;
        height: 70px;
    }

    .wave {
        transform: rotate(0deg);
        left: 2%;
        bottom: 5%;
    }

    nav img {
        position: relative;
        bottom: 3px;
    }
    
    nav .menu ul,
    .login-btn,
    #menu-btn {
        display: none;
    }
    nav button {
        margin: 20px;
    }

    main {
        width: 100%;
        max-width: 801px;
    }
    
    #secOne {
        grid-template-areas: 
            "title"
            "presentation"
            "register";
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        grid-template-columns: 1fr;
        gap: 20px;
        width: 100%;
        height: auto;
        padding: 150px 0px 30px 0px;
        margin: 0;
    }

    #secOne img {
        width: 40%;
    }

    #secOne > div {
        width: 90%;
        margin: 0 auto;
        height: auto;
        padding: 15px;
    }

    .presentation {
        grid-area: title;
    }

    .info-container {
        grid-area: presentation;
    }

    .register-container {
        grid-area: register;
    }
    

    .presentation img,
    .info-container img,
    .register-container img {
        width: 80%;
        height: auto;
        margin: 10px 0;
    }

    #secOne h1 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }   

    #secOne p {
        font-size: 0.9rem;
        padding: 0 10px;
        margin: 10px 0;
    }
    

    .register-container a {
        width: 80%;
        padding: 10px;
        text-align: center;
    }
    #secTwo div {
        
        margin: 30px;
        margin-bottom: 20px;
    }
    #secTwo p {
        font-size: 16px;
    }

    #secThree {
        position: relative;
    }

    #secThree .progress,
    #secThree .skills {
        margin: 20px;
    }

    #secThree h1 {
        font-size: 26px
    }

    #secThree h3 {
        font-size: 18px;
    }
    
    #secThree p {
        font-size: 16px;
    }

    .background {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        overflow: hidden;
    }


    body {
        position: relative;
        z-index: 1;
    }
    footer {
        flex-direction: column;
        height: auto;
        padding: 20px 0;
        gap: 20px;
    }

    footer div {
        width: 90%;
        margin: 0 auto;
        text-align: center;
    }

    .foo-socials p, 
    .foo-pub p,
    .tributo p {
        margin: 10px 0;
        font-size: 0.9rem;
    }

    .foo-socials a,
    .foo-pub a {
        display: inline-block;
        margin: 5px 0;
        font-size: 0.8rem;
    }

    .foo-socials i {
        margin-left: 0;
    }

    .tributo {
        margin-top: 10px;
    }

}

@media (max-width: 768px) {
    
    .main {
        margin-top: 90px;
    
    }

    nav {
        grid-template: "logo language menu-burger" 70px / auto 1fr auto;
        padding: 10px;
        background: rgba(44, 62, 80, 0.98);
        bottom: 87.5%;
        width: 100% !important;
        box-sizing: border-box;
    }

    nav img {
        position: relative;
        bottom: 35px;
    }
    
    .music-btn {
        display: none;
    }
    .music-btn.layer {
        position: relative;
        display: flex;
        z-index: 100;
    }

    #secOne {
        grid-template: 
            "title" auto
            "presentation" auto
            "register" auto / 1fr;
        width: 100% !important;
        box-sizing: border-box;
        overflow-x: hidden;
        min-height: 100vh;
        padding: 20px;
        left: 0;
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
        transform: none;
        position: relative;
        bottom: 90px !important;
    }

    #secOne > div {
        margin: 10px 0;
        width: 100%;
        max-width: 500px;
        justify-self: center;
    }

    #secTwo {
        position: relative;
        bottom: 100px !important;
        width: 100% !important;
        box-sizing: border-box;
        left: 0%;
    }

    .info-container {
        padding: 20px;
        backdrop-filter: blur(10px);
        background: rgba(44, 62, 80, 0.3);
        border-radius: 20px;
        margin-bottom: 20px;
    }

    .img-info {
        width: 100%;
        max-width: 300px;
        height: auto;
        margin: 20px auto;
        display: block;
    }

    .wave {
        height: 80px;
    }

    .wave::before,
    .wave::after {
        transform: none;
    }

    main .title {
        font-size: 26px;
    }

    .background {
        width: 100%;
        height: 200vh; 
        min-height: 2000px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        background-size: cover;
        background-position: center;
        background-attachment: scroll;
        overflow-x: hidden;
              
    }

    
}

@media (max-width: 480px) {
    #secOne {
        margin-top: 60px;
        padding: 15px;
    }

    #secOne h1 {
        font-size: 24px;
    }

    #secOne p {
        font-size: 16px;
    }
    #secThree {
        position: relative;
        bottom: 250px !important;
        padding-bottom: 100px !important;
        height: 600px !important;
    }
}