:root {
  --main-black: #100710;
  --main-violet2: #C21292;
  --main-blue: #6A4CB5;
  --main-lile:#C59AF8;
  --main-yellow: #7b55cb;/*buscar un color que haga contraste sobre main-orange*/
  --main-white:#E8E9FF;

  /*en RGBA*/
  --main-black-rgb: 16, 7, 16;
  --main-violet2-rgba: 194, 18, 146;
  --main-blue-rgba: 106, 76, 181;
  --main-lile-rgba: 197, 154, 248, 0.75;
  --main-blile-rgba: 123, 85, 203;
  --main-white-rgba: 32, 233, 255;
}
@font-face {
  font-family: 'Rubik Broken Fax';
  src: url('/fonts/RubikBrokenFax-Regular.ttf');/*sera necesario cambiar la fuente, por motivos esteticos*/
}

.btn1{
 text-decoration: none;
 color:var(--main-black);

}
.btn2{
  color:var(--main-white);
  /* text-decoration: none; */
}
body{
  width:100%;
  margin:0;
  font-weight: 400;
  line-height: 1.4;
}/*se debe cambiar todo el espaciado mediante margins*/
#head{/*seria bueno crear una transicion para esta navbar, que cambia segun el gradiente de sombreado sobre el que este*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8%;
  background-color: #000;

  z-index:5;
  color:var(--main-white);
}
main{
  background-image:linear-gradient(to bottom, var(--main-black), var(--main-violet2), var(--main-blue), var(--main-lile));
  z-index:4;
  place-items: center;
}
footer{
  z-index: 1;
}
#header-img{
  height: 150%;
  margin-left: 3%;
  /*aqui estaria bueno colocarle sombreado blanco
  con --main-white*/
}
.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  
}

.nav-list li {
  display: inline-block;
  margin-right: 10px;
  
}

#welcome-section{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;

}
#hi{
   margin-top: 50px;
    display: flex;
    justify-content:center;
    color:var(--main-white);
}/*requiero mejores fuentes para titulos y subtitulos*/
#reliable,#heres,#some-projects-view, #heres{
    display: flex;
    justify-content:center;
}
#heres{
  color:var(--main-white);
}
#some-projects-view{
   margin: 0px;
   margin-bottom: 10%;
   padding-top:8%;
   color:var(--main-white);/*seria bueno hacerlo un tono un poco mas gris*/

}

#projects, #welcome-section, #lets-work-together {
  padding-top: 5%;
}
#reliable,#coffee{
color:var(--main-white);
}
#projects{
  
  height: 100%;
  display: grid; 
  place-items: center;
}
.projects-grid{
  list-style-type: none;
  display:grid;
  grid-column: auto;
  width:100%;
  place-items: center;
  /*necesito centrar el grid*/
}
.project-tile{
  background-color: rgba(var(--main-blile-rgba),0.5);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  display: inline-block;
  width: 60%;
  margin: 5px;
  padding: 2px;
  text-align:center;
}
.project-title{
  color:var(--main-white);
  text-decoration: none;
}
.link-img{
  object-fit: cover;
  width:90%;
  display:block;
  margin:auto ;
}
.corc{
  display:none;
  color:white;
  transition: color 0.3s ease-out;
  margin:0;
  padding:0;
}
.project-tile:hover .corc {
  display: block;
  background-color: rgba(var(--main-blue-rgba),0.5);;
}
.btn-show-all {
  font-size: 2rem;
  background: var(--main-lile);
  display: flex;
  justify-content:center;
  padding: 1rem 2rem;
  border-radius: 2px;
  border: 1% var(--main-black);
  width:15%;
  height:7%;
  color:var(--main-white);
}
#lets-work-together{
  text-align: center;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0 auto;
  flex: 1;
  z-index: 3;
}
#lwt h2, #lwt h3{
  display: flex;
  justify-content:center;
}
.nav-list2 {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  font-family:'Rubik Broken Fax';
}
#navbar{
  display: flex;
  justify-content: center;

}
.nav-list2 ul{
  display: flex; /* Aplica un layout flexible */
  justify-content: center;
}
.nav-list2 li {
  margin: 1%;
  text-align: center;
}
.contact-img{
  height: 4vh;
  padding: 6px;
  margin:5%;
}
@media (prefers-color-scheme: dark) {
  :root {
      --main-violet: #562D88;
      --main-pink: #8E0E6A;
      --main-orange: #B03030;
      --main-gray: #1E252B;
      --main-yellow: #CC8400;
  }
}

/*de aqui empiezan los estilos para tablet y pc*/

@media (min-width: 772px) {
  .project-tile {
    display: inline-block;
    width: 77%;
    margin: 5px;
    padding: 2px;
    vertical-align: top;
    align-items: center;
  }
  .projects-grid{
    grid-template-columns: 50% 50%;
  }
  .link-img {
    width: 90%;
    max-height: 30vh;
    display: block;
    margin: auto;
  }
}

@media (min-width: 998px) {
  .project-tile {
    display: inline-block;
    width: 80%;
    margin: 5px;
    padding: 2px;
  }
  #projects{
    place-items: center;
  }
  .projects-grid{
    grid-template-columns: 30% 30% 30%;
    align-items: center;
    place-items: center;
  }
  .link-img{
    width:90%
  }
}



/*debo disminuir cuando disminuya el tamano de la pantalla:
  -Logo
  -Imagenes
se debe debugguear
  -Desliz de projects-grid debajo de #lets-work-together
*/