*{
 text-decoration: none;
 color: black;
}

.white{
    color: white;
}

html {
    scroll-behavior: smooth;
  } 
  

body{
    padding: 0%;
    padding-top: 0;
}

.flex{
    display: flex;
}

nav{
   padding-top: 11px;
   padding-bottom: 19px;
   padding-left: 0px;
   height: 5vb;
   display: flex;
   justify-content: space-between;
   width: 100% ; 
   
   position: fixed;
   right: 0px;
   top: 0px;

   background-color: rgb(23, 104, 170);
}

aside{
    width: 20%;
    height: 100%;
    margin-right: 15px;
}

.charlotte{
    text-align: left;
    margin-top: 25px;
    font-size: 60px;
    
    font-style: normal;
    font-weight: 800;
    line-height: 88.62%;
    
    align-items: center;
    text-align: left;
    letter-spacing: -0.02em;
    grid-area: title;

}


.navdiv{
  height: 5vb;
  font-size: 6vb;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0px;
  color: white;
}


.container{
 padding-top: 0px;
 display: grid;
 grid-template-columns: 33% 34% 33%;
 grid-template-rows: 40% 20% 40%;
 width: 100%;
 height: 0vb;
 
}

.container2{
    padding-bottom: 30px;
    display: grid;
    grid-template-columns: 20% 30% 48%;
    grid-template-rows: auto ;
    width: 100%;
    height: auto;
    grid-gap: 15px;
    grid-template-areas: 
     "title title text";
   }
   
.container3{
    scroll-margin-top: 60px;
    margin-top: 59px;
    margin-bottom: 60px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows:   30% 70%;
    width: 95%;
    height: auto + 100px;
    grid-gap: 30px;
    grid-template-areas: 
     "img  logo"
     "img  text"
     ;
}

.container4{
    background-color: #ffffff;
    margin-top: 0px;
    margin: 15px;
    display: grid;
    grid-template-columns:  25% 25% 25% 25%;
    grid-template-rows:  75vb ;
    width: 95%;
    height: 80vb;
    grid-gap: 10px;
    grid-template-areas: 
     "c  a  b1 b2 "
     
     ;
    
}

main{
    padding-top: 0px;
}

.bio_side{
 grid-area: text;
}

.biotext{
   
    padding-top: 0px;
    margin-right: 50px;
    margin: 0%;
     font-size: clamp(0.5rem, 3vw, 1.4rem);
    word-break: keep-all;
}

.bioimg{
    margin-top: 0px;
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-area: img;
    
}

.biologo{
    margin-top: 0px;
    object-fit: cover;
    width: 40%;
    grid-area: logo;
    margin-left: 0%;
    margin-top: 0%;
 
  cursor: grab;

}




.biotitulo{
    margin: 0%;
    font-size: 30px;
    padding-left: 20px;
    text-align: left;
    grid-area: biotitulo;
    scroll-margin-top: 60px;
}

.link1{
    text-decoration: underline;
}


.portfoliotitulo{
    font-size: 30px;
    padding-top: 14px;
    padding-right: 100px;
    padding-left: 20px;
    margin-top: 45px;
    text-align: left;
    scroll-margin-top: 60px;
    margin-bottom: 10px;
}


.portfolio1{
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-area: a;
}
.portfolio2{
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-area: c;
}

.portfolio3{
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-area: b1;
}

.portfolio4{
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-area: d;
}

.portfolio5{
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-area: b2;
}

.portfolio6{
    object-fit: cover;
    width: 100%;
    height: 100%;
    grid-area: e;
}

.zoom{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.zoom:hover{
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

.zoom2{
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.zoom2:hover{
    transform: scale(1.1);
}

.portfoliofloor{
    background-color: white;
    height: 20px;
}

.padding_mobile{
    padding-left: 1%;
    padding-right: 5%;
    padding-top: 0%;
}

footer {
    margin-top: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    height: 5vh;
    background-color: rgb(23, 104, 170);
    display: flex;
    justify-content: center;
    align-items: center;
    /* position: fixed; */
    bottom: 0;
    
}

footer p{
    color: white;
    font-size: 24px;
}





::-webkit-scrollbar {
    width: 40px; /* Ancho de la barra de desplazamiento vertical */
    height: 12px; /* Alto de la barra de desplazamiento horizontal */
  }
  
  /* Personalizar el "thumb" (la parte que puedes arrastrar) */
  ::-webkit-scrollbar-thumb {
    background-color: rgb(110, 169, 224); /* Color del "thumb" */
    border-radius: 0px; /* Bordes redondeados del "thumb" */
    border: 3px solid #ffffff; /* Añadir un borde blanco alrededor del "thumb" */
  }



  @media all and (max-width: 600px) {

    .container2{
        padding-top: 20px;
        padding-bottom: 60px;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 30% 50% ;
        width: 100%;
        height: 300px;
        grid-gap: 15px;
        grid-template-areas: 
         "title"
         "text" ;
       }

    .container3{
        margin-top: 40px;
        margin-bottom: 100px;  
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows:  50% 10% 30%;
        width: 100%;
        height: auto;
        grid-gap: 15px;
        grid-template-areas: 

         "img "
         "logo"
         "text "
         ;

        }

      .biologo{
       margin-top: 0px;
       object-fit: cover;
       width: 40%;
       grid-area: logo ; 
       margin-left: 30%;
       }

    .container4{
            background-color: #ffffff;
            margin-top: 5px;
            margin: auto;
            display: grid;
            grid-template-columns: 100% ;
            grid-template-rows: 40vb 40vb 40vb 40vb ;
            width: 95%;
            height: 165vb;
            grid-gap: 10px;
            grid-template-areas: 
             "c" 
             "a"
             "b1"
             "b2"
             ;
            
        }

        .portfoliotitulo{
            font-size: 30px;
            padding-top: 14px;
            padding-right: 100px;
            margin-top: 20px;
            text-align: left;
            scroll-margin-top: 60px;
        }

        .biotitulo{
            margin: 0%;
            font-size: 30px;
            text-align: left;
            grid-area: biotitulo;
            scroll-margin-top: 100px;
        }

          
        .biotext{
          grid-area: text;
          padding-top: 20px;
          margin-right: 30px;
          margin-left: 30px;
          font-size: 24px;
          word-break: keep-all;
        }
        

        .charlotte{
            text-align: left;
            margin: 0px;
            font-size: 60px;
            
            font-style: normal;
            font-weight: 800;
            line-height: 88.62%;
            display: flex;
            align-items: center;
            text-align: left;
            letter-spacing: -0.02em;
            grid-area: title;
        
        }

        body{
            padding: 0%;
            padding-top: 0;
        }
        
        .homeimg{
            object-fit: cover;
            width: 100%;
            height: 400px;
            
         }

        .padding_mobile{
            padding-left: 7%;
            padding-right: 7%;
            padding-top: 0%;
        }
         
        .navdiv{
            height: 5vb;
            font-size: 3vb;
            padding-left: 10px;
            padding-right: 20px; 
            margin: 0px;
          }

        nav{
            
            padding-top: 11px;
            padding-bottom: 19px;
            padding-left: 0px;
            height: 2vb;
            display: flex;
            justify-content: space-between;
            width: 100% ; 
            
            position: fixed;
            right: 0px;
            top: 0px;
            background-color: rgb(23, 104, 170);
         }

         .portfoliofloor{
            background-color: white;
            height: 8px;
        }
}