*{
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
    background: var(--color-day);
    color: #121212;
}

:root{
    --fondoDark:#121212;
    --color-boton:#224da9;
    --color-day:#f4f4f4;  
    --title: #ffe0db;
    --fondoRecuadro:#aa8e7db2;
    --tituloColor: #4c3830;
    --radio-border:25px;
    --minImag:50%;
}
 /* ================== generales ================== */
button{
    width: 30%;
    color: white;
    background-color: var(--color-boton);
    border-radius: 50px;
    border: none;
    font-size: 1.5rem;
    padding: 2%;
    transition: all 0.3s ease;
}

button:hover{
    background-color: #c0b388 ;
    color: #121212;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 200, 200, 0.3);

}
/*============= cambios============  */

nav .botonCamb{ 
    width: 3rem;
    height: 3rem;
     background-color: #121212;
     background-image: url(img-portafolio/mediamoon.png);
     background-size: 80%;
    background-position-y: 50%;
     background-position-x: 50%;
     background-repeat: no-repeat;   
     transform: scale(1.1);
     cursor: pointer;
}


 /* ================== main ================== */
 main{
    width: 100vw;
    background-image: url(img-portafolio/IMG_02722.jpeg);
    background-size: cover;
 }

 header{
    width: 100vw;
    display: flex;
    justify-content: space-between;
    background-color: rgba(30, 30, 30, 0);
    backdrop-filter: blur(8px);
    box-shadow: 0px 0px 7px rgb(0 0 0 / 27%);
 }

.logo-ig{
    width: 5rem; 
    margin: 0 5%;
}
nav{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3rem;
    margin: 0 5%;
}
nav ul{
    display: flex;
    list-style: none;
    text-decoration: none;
    gap: 40px;
}
nav a{
    text-decoration: none;
    color: #171717;
    font-size: 2rem;
}

nav a:hover{
    color:rgb(71, 104, 165);
}

 /* ======== perfil ======== */

.imagenPerfile{
    width: 35%;
    margin-right: 8%;
    filter: contrast(0.9);
}

.inicio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
}
.info{
    position: relative;
}
.title{
    padding: 7%;
    background-color: rgba(30, 30, 30, 0);
    backdrop-filter: blur(8px);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.142);
    text-align: center;
}

.title h2{
    font-size: 3rem;
    font-weight: 100;
}
.title h1{
    font-size: clamp(2rem, 6vw, 6rem);
}
.title p{
    font-size: 1.5rem;
}


.botones{
    padding: 5%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.linkedin{
    color: #f4f4f4;
    width: 100%;
    padding: 13px;
    box-shadow: 0px 0px 2px 0px #464646bf;
}
 /* ======== lenguajes ======== */

.lenguajes{
    width: 100vw;
    display: flex;
    align-items: center;
    background-image: url(../img-portafolio/bookANDcaffe.png);
}

.info-page-proyect{
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4%;
    text-align: center;
    font-size: x-large;
}

.flex-circ{
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.circulos{
    color: #1d1c1c;
    background-color: #a2bcf3;
    padding: 2% 2%;
    margin: 3%;
    font-size: 1.2rem;
    border-radius: 30px;
    text-align: center;
    box-shadow: 0px 0px 5px 0px  rgba(38, 38, 38, 0.193);
    transition: all 0.3s ease;
}
.circulos:hover{
    transform: scale(1.2);
    
}

 /* ================== separadores ================== */
.separador{
    width: 100vw;
    padding: 1%;
    margin: 6% 0;
}
.line{
    width: 10%;
    height: 15px;
    border-radius: 25px;
    background-color: var(--color-boton);
    margin: 0 auto;

    animation-name: lineasepar;
    animation-direction: normal;
    animation-delay: 4s;
    animation-duration: 10s;
    animation-iteration-count:infinite;
    animation-timing-function: ease-in;

}

@keyframes lineasepar {
  0% {
      width: 10%;  }
  50% {
      width: 80%;
  }
    100% {
      width: 10%;
  }
}

 /* ================== proyectos ================== */

.title-paraffo{
    width: 100vw;
    text-align: center;
    margin-bottom: 5%;
}
.title-paraffo h1{
    font-size: 4rem;
    margin: 50px 0;
}
.title-paraffo p, a{
    font-size: x-large;
    margin:0;
}
.title-paraffo a{
    text-decoration: none;
    color: var(--colorRosetD);
}


 /* ======== figure ======== */
 .galeria{
    display: flex;
    align-items: center;
    margin: 6% 0;
}

.proyect-post{
    display: flex;
    flex-direction: column;
    align-items: center; 
    
}
.box{
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.box:hover {
  transform: translateY(-10px);
}


.box-title-wrapper{
    width: 95%;
    display: flex;
    justify-content: space-between;
    padding: 2% 5%;
    background-color: #e7e7e727;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.box-title{
    font-size: 2rem;
}
.box-icon{
    width:7%;
    background-color: #802e2e;
    border-radius: 50%;
}

.post-img{
    width: 95%;
    margin: 0;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.tercero{
    filter: brightness(0);
}
.detalles{
    width: 95%;
    padding: 2%;
    margin: 0;
    text-align: center;
    background-color: #e7e7e727;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}
.miniText{
    font-size: 1.3rem;
  line-height: 1.2;
}
.boton-git{
    width: 23%;
    padding: 1%;
    background-color: var(--color-boton);
    border: none;
    box-shadow: 0px 0px 4px rgba(63, 63, 63, 0.266);
}

.boton-git a{
    color:rgb(254, 247, 232);
    text-decoration: none;
}
 /* ================== contactos ================== */

.quest{
    width: 100vw;
    background-image:url(img-portafolio/cartas.png), url(img-portafolio/IMG_02721.jpeg);
    background-size: cover;
    padding: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.into {
  background-color: rgba(240, 248, 255, 0.2);
  backdrop-filter: blur(10px);
  box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  padding: 2rem;
  max-width: 500px;
  width: 100%;
}
.Marco {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 15px;
}

.Marco h2{
    font-size: 3rem;
}
/* ===== rellenos ====== */
label{
    font-size: 1.2rem;
}
input{
    font-size: 1rem;
}


.belt,
select,
textarea {
  width: 100%;
  padding: 0.8rem;
  margin:10px 0px;
  border-radius: 25px;
  border: 1px solid rgba(128, 128, 128, 0.4);
  transition: all 0.3s ease;
}

.belt:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 6px rgba(74, 74, 74, 0.241);
}

.belt:hover,
select:hover,
textarea:hover {
  transform: scale(1.02);
}

textarea {
  resize: vertical;
}
.botonContact{
    text-align: center;
}

/* ===== footer ====== */


 /* ================== footer ================== */

footer{
    width: 100vw;
    background-color: #121212;
    padding: 0.5%;
}
footer .foot {
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.foot a{
    color: #f4f4f4;
    font-size: 1.5rem;
    text-decoration: none;
}




/* ================== laptop ================== */

@media (max-width: 1440px) {
  /* main */
.logo-ig{width: 3rem;}
.title h1{font-size: clamp(2rem, 4vw, 7rem);}
.title h2, .title p{font-size: 2rem;}
nav a, button{font-size: 1.5rem;}
.info .triangulo, .info .mintriangulo{display: none;}
  /* proyecto */
.title-paraffo h1 {font-size: 3rem;}
.box-icon {width: 10%;}
.title-paraffo p, a {font-size: x-large;}
.title-paraffo {margin-bottom: 10px;}
.galeria{margin-bottom:95px;}
  /* info */
.info-me p{  margin-top: 80px;}
.flex-circ{margin: 70px 0px;width: 90%;}
/* contacto */
.questionario h3 {margin: 10px 0px;}
.questionario input {margin: 8px 0px;width: 77%;padding: 2.5% 17px;}
.recuadro-text{width: 80%; height: 150px;}
}
 /* ================== phone ================== */

@media (max-width: 800px) {
    main{display: flex;flex-direction: column;align-items: center;}
    .imagenPerfile{display: none;}
    nav a{display: none;}
    .info{padding: 1rem;}
    /* galery */
    .galeria {flex-direction: column; align-items: center;}
    .box-icon {width: 7%;}
    .detalles p {display: none;}
    /* infomacion */
    .info-me p{font-size: 1.2rem;}
    .img-lap {width: 60%;}
    .boton-git a{font-size: 1.5rem;}
    .circulos {padding: 2%;}
    /* questionario */
    .questionario{margin: 0 auto; padding: 1%;width: 80vw;}
    .separador{margin-top: 65px;}
    .questionario p {font-size: 1.5rem;margin: 8px;}
    .botones .more, .botones .linkedin{font-size: 1.2rem;}
}

 /* ================== modo oscuro ================== */


.body-dark{
    background-color: black;
     color: white;
}
.body-dark .imgMain{
    background-color: #6f83e5;
    background-blend-mode: multiply;
}
.body-dark .contact-dark{
    background-blend-mode: darken;
    background-color: cornflowerblue;
}
.body-dark .headerBlack{
    background-color: rgba(0, 0, 0, 0.64);
}

.body-dark .title-black{
    background-color: rgba(0, 0, 0, 0.64);
}

.body-dark .logoImgdark {
    filter: invert(1);
}
.body-dark .linkA{
    color: rgb(235, 235, 235);
}

.body-dark .botonSun{
    background-image:url(img-portafolio/sun.png);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position-y: 50%;
    background-position-x: 50%;
 
}