*{
    box-sizing: border-box;
}


body
{
    font-family: Arial, Helvetica, sans-serif;
    padding:0;
    margin:0;
}

html
{
    scroll-behavior: smooth;
}

section
{
    min-height: 100vh;
    box-sizing: border-box;
}

#menu
{
    background-color: rgba(195,35,88,1);
    display: grid;
    grid-template-columns: repeat(4, 200px);
    grid-template-rows: repeat(2, 200px);
    justify-content: center;
    align-content: center;
    grid-template-areas: 
        "about about proyectos proyectos"
        "about about posts contacto";
   

}
#menu .tile
{
    height: 100%;
    overflow: hidden;
    cursor: pointer;
}

#menu .tile a
{
    text-decoration: none;
}

#menu .tile .front
{
        color:white;
        background-color: black;
        height: 100%;
        display: grid;
        justify-items: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        transition: all 0.3s ease;
        background-size:cover;
        background-position: center center;
}
#menu .tile .back
{
    background-color: #222;
    color: white;
    display: grid;
    height: 100%;
    justify-items: center;
    align-items: center;
    font-weight: bold;
    font-size: 28px;

}
#menu .tile:hover .front
{
    margin-top: -100%;
}
#menu .proyectos-tile:hover .front
{
    margin-top: -50%;
}

.about-tile
{
    grid-area: about;
}
.proyectos-tile
{
    grid-area: proyectos;
}
.posts-tile
{
    grid-area: posts;
}
.contacto-tile
{
    grid-area: contacto;
}


/* Ponemos las imágenes en la cabecera */
#menu .about-tile .front
{
    background-image: url('../img/profile.png');
 
   

}
#menu .proyectos-tile .front
{
    background-image: url('../img/work-01.png');
    
}
#menu .posts-tile .front
{
    background-image: url('../img/work-02.png');
    
}
#menu .contacto-tile .front
{
    background-image: url('../img/work-03.png');
    
}

/**********************************

        A B O U T

***********************************/

#about 
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    padding: 20px;

}

#about .tile 
{
    border-radius: 10px;
    padding: 40px;
    box-sizing: border-box;
    background-color: #eee;
    display: grid;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.5em;
}
#about .tile img
{
    width:70%;
}

#about .tile-1 
{

    grid-column: 1 / 2;


}
#about .tile-2 
{

    grid-column: 2 / 3;
    grid-row: 1 / 3;
}
#about .tile-2 img 
{
  
    border-radius: 50%;
    object-fit: cover;
}

/*
    para la parte de proyectos
*/

#proyectos {  
    background-color: black;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
    padding: 10px;
    grid-auto-flow: row;
    grid-template-areas:
      "main-photo main-photo main-photo photo-2 photo-2 photo-2 photo-3 photo-3 photo-4 photo-4"
      "main-photo main-photo main-photo photo-2 photo-2 photo-2 photo-3 photo-3 photo-4 photo-4"
      "main-photo main-photo main-photo photo-2 photo-2 photo-2 photo-5 photo-17 photo-4 photo-4"
      "main-photo main-photo main-photo photo-7 photo-7 photo-6 photo-6 photo-6 photo-9 photo-9"
      "main-photo main-photo main-photo photo-7 photo-7 photo-6 photo-6 photo-6 photo-9 photo-9"
      "main-photo main-photo main-photo photo-7 photo-7 photo-8 photo-8 photo-8 photo-8 photo-8"
      "main-photo main-photo main-photo photo-10 photo-10 photo-8 photo-8 photo-8 photo-8 photo-8"
      "main-photo main-photo main-photo photo-10 photo-10 photo-11 photo-11 photo-11 photo-12 photo-12"
      "main-photo main-photo main-photo photo-13 photo-14 photo-11 photo-11 photo-11 photo-12 photo-12"
      "main-photo main-photo main-photo photo-15 photo-16 photo-11 photo-11 photo-11 photo-12 photo-12";
  }
  #proyectos .tile
  {
    background-color: #ccc;
    border-radius: 5px;
    background-size: cover;
    background-position: center center;
  }
  #proyectos .tile a
  {
    display: grid;
    height: 100%;
  }
  #proyectos .tile:not(.main-photo)
  {
       transition: all 0.1s ease-in;
       opacity: 0.5;
  }
  #proyectos .tile:hover:not(.main-photo)
  {
        transform: scale(0.98);
        opacity: 1;
  }

  .main-photo { 
    grid-area: main-photo; 
    padding: 20px;
    color: white;
    font-size: 20px;
    background-image: url('../img/work-17.png');
}
.main-photo h2, 
.main-photo div
{
    background-color: rgba(0,0,0,.7);
    display: inline-block;
    padding: 20px;
    border-radius: 5px;
}
  
  .photo-2 { grid-area: photo-2; 
    background-image: url('../img/work-01.png');
            }
  
  .photo-3 { grid-area: photo-3; 
    background-image: url('../img/work-02.png');
            }
  
  .photo-4 { grid-area: photo-4; background-image: url('../img/work-03.png');}
  
  .photo-5 { grid-area: photo-5;background-image: url('../img/work-04.png'); }
  
  .photo-7 { grid-area: photo-7; background-image: url('../img/work-06.png');}
  
  .photo-17 { grid-area: photo-17;background-image: url('../img/work-05.png'); }
  
  .photo-6 { grid-area: photo-6; background-image: url('../img/work-07.png');}
  
  .photo-9 { grid-area: photo-9;background-image: url('../img/work-08.png'); }
  
  .photo-10 { grid-area: photo-10; background-image: url('../img/work-09.png');}
  
  .photo-8 { grid-area: photo-8;background-image: url('../img/work-10.png'); }
  
  .photo-11 { grid-area: photo-11; background-image: url('../img/work-11.png');}
  
  .photo-12 { grid-area: photo-12;background-image: url('../img/work-01.png'); }
  
  .photo-13 { grid-area: photo-13; background-image: url('../img/work-13.png');}
  
  .photo-14 { grid-area: photo-14; background-image: url('../img/work-14.png');}
  
  .photo-15 { grid-area: photo-15;background-image: url('../img/work-15.png'); }
  
  .photo-16 { grid-area: photo-16;background-image: url('../img/work-16.png'); }
  


/*
        Para la sección de posts
*/

#posts
{
    padding: 10px;
    background-color: rgb(66, 186, 255);
    display: grid;
    grid-template: repeat(2, 400px) / repeat(3, 350px);
    gap: 10px;
    justify-content: center;
    align-content: center;

}

#posts .post
{
    display: grid;
    align-content: end;
    border-radius:5px;
    background-color: white;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

#posts .post a
{
    color: white;
    text-decoration: none;
}
#posts .post .tile
{
    background-color: rgba(0,0,0,.7);
    color: white;
    padding: 10px;
}
#posts .post .tile:hover
{
    background-color: white;
    color: black;
}

#posts .post.post-1
{
    background-image: url('../img/work-15.png');
}
#posts .post.post-2
{
    background-image: url('../img/work-02.png');
}
#posts .post.post-3
{
    background-image: url('../img/work-05.png');
}
#posts .post.post-4
{
    background-image: url('../img/work-08.png');
}
#posts .post.post-5
{
    background-image: url('../img/work-10.png');
}
#posts .post.post-6
{
    background-image: url('../img/work-15.png');
}


/* 
        Sección Contacto
*/

section#contacto
{
    background-color: rgb(26, 72,151);
    display: grid;
    grid-template: auto 100px / 700px;
    justify-content: center;
    align-content:center;
    box-sizing: border-box;

}

#contacto form input, #contacto form textarea
{
    padding: 20px 10px;
    box-sizing: border-box;
    font-size: 18px;
    border-radius: 5px;
    border: none;
    width: 100%;
}
#contacto form 
{
    padding: 20px;
    color: white;
    display: grid;
    gap: 15px;
    grid-template: auto / auto;
    align-items: center;
    box-sizing: border-box;

}
#contacto input[type="submit"]
{
    background-color: #67ca50;
    font-weight: bold;
    font-size: 28px;
}

#contacto .social-networks
{
    justify-self: center;
    padding: 10px 0;
}

#contacto .social-networks a
{
    color: white;
    

}




/*

        A partir de aquí, los media querys para ver los puntos de ruptura y demás que vamos a utilizar.

*/

/* En este primer media query tengo que ver lo que quiero que pase a partir de 1090px */
@media screen and (max-width: 1090px)
{
    #posts
    {
    grid-template: repeat(3, 1fr) / repeat(2, 1fr);
    }
}


@media screen and (max-width: 800px) {
    #menu {
      background-color: red;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-template-areas:
        "about proyectos"
        "posts contacto";
    }
  
    #menu .tile:hover .front {
      margin-top: -50vh;
    }
  
    #about {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 20px;
      padding: 20px;
      box-sizing: border-box;
    }
  
    #about .tile-1 {
      grid-column: 1 / 3;
      grid-row: 1 / 2;
    }
    #about .tile-2 {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }
  
    #about .tile-3 {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }
  
    #about .tile-4 {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
    }
  
    #about .tile-5 {
      grid-column: 2 / 3;
      grid-row: 3 / 4;
    }
  
    section#contacto {
      padding: 0 20px;
      grid-template: auto 100px / 100%;
    }
  
    #proyectos {
      grid-template-areas:
        "main-photo main-photo main-photo main-photo main-photo main-photo main-photo main-photo main-photo main-photo"
        "main-photo main-photo main-photo main-photo main-photo main-photo main-photo main-photo main-photo main-photo"
        "main-photo main-photo main-photo main-photo main-photo main-photo main-photo main-photo main-photo main-photo"
        "photo-2 photo-2 photo-2 photo-7 photo-7 photo-6 photo-6 photo-6 photo-9 photo-9"
        "photo-2 photo-2 photo-2 photo-7 photo-7 photo-6 photo-6 photo-6 photo-9 photo-9"
        "photo-3 photo-3 photo-5 photo-7 photo-7 photo-8 photo-8 photo-8 photo-8 photo-8"
        "photo-3 photo-3 photo-5 photo-10 photo-10 photo-8 photo-8 photo-8 photo-8 photo-8"
        "photo-17 photo-4 photo-4 photo-10 photo-10 photo-11 photo-11 photo-11 photo-12 photo-12"
        "photo-17 photo-4 photo-4 photo-13 photo-14 photo-11 photo-11 photo-11 photo-12 photo-12"
        "photo-17 photo-4 photo-4 photo-15 photo-16 photo-11 photo-11 photo-11 photo-12 photo-12";
    }
  }

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

    #menu {
        background-color: red;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-template-areas:
          "about"
          "proyectos"
          "posts"
          "contacto";
      }
    
      #menu .tile:hover .front {
        margin-top: -25vh;
      }
    
      #menu .about-tile .front {
        background-image: url('../img/profile.png');
        background-size: cover;
        background-position: center -50px;
      }
    
      #about {
        display: grid;
        grid-template: auto / auto;
        gap: 20px;
        padding: 20px;
      }
    
      #about .tile-1 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
      }
      #about .tile-2 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
      }
    
      #about .tile-3 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
      }
    
      #about .tile-4 {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
      }
    
      #about .tile-5 {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
      }
    
      #contacto {
        padding: 0 20px;
      }
    
      #posts {
        grid-template: repeat(6, 1fr) / repeat(1, 1fr);
      }
    
}