body{
    font-family:"Poetsen One", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;    
    /*background: rgb(10,148,92);
    background: linear-gradient ( 100deg, rgb(111,59,227) 80%, rgb(10,148,92) 20%);*/}

html{
    scroll-behavior: smooth; /*** crea una animacion a cada hipervinculo en nuestro menu**/
}

/*.poetsen-one-regular {
  font-family: "Poetsen One", sans-serif;
  font-weight: 400;
  font-style: normal;
}*/


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


#menu{    
    /*background-color: rgba(10, 148, 92);*/
    background: linear-gradient(45deg, rgb(26, 255, 0), blue);
    display: grid;
    grid-template-columns: repeat(4,200px);
    grid-template-rows: repeat(2,200px);
    justify-content: center;
    align-content: center;

    grid-template-areas:
    "uber uber projekte projekte"
    "uber uber posts kontakt";
}

#menu .tile{
    height: 100%;
    overflow: hidden; /*se manipularan dos capas y se moveran*/
    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;

    background-size: cover;
    background-position: center;
    
    transition: all 0.3s ease;
}

#menu .tile .back{
    background-color: #222;
    color: white;
    display: grid;
    justify-items: center;
    align-items: center;
    height: 100%;
    font-weight: bold;
    font-size: 28px;
}

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

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

#menu .uber-tile .front{
    background-image: url(img/1.jpg);
    background-position: 10%;   
}

#menu .projekte-tile .front{
    background-image: url(img/2.jpg);    
}

#menu .posts-tile .front{
    background-image: url(img/3.png);    
}

#menu .kontakt-tile .front{
    background-image: url(img/4.jpeg);    
}

.uber-tile{
    grid-area: uber;
}

.projekte-tile{
    grid-area: projekte;
}

/*******************************   section uber****************************************************/

#uber{
    display: grid;
    /*grid-template-columns: 1fr 1fr 1fr;*/
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
}

#uber h2{
    color: #AD3D72;
    font-weight: bold;
    letter-spacing: 4px;
}

#uber .tile{
    border-radius: 10px;
    padding: 40px;
    box-sizing: border-box;
    background-color: rgb(120, 182, 182);

    display: grid;
    align-items: center;
    justify-items: center;
    text-align: center;
    font-size: 1.3em;
}

#uber .tile-1{
    grid-column: 1 / 2;
    background-image: url(img/98.webp);
    
}

#uber .tile-2{
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-items: flex-start;
}

#uber .tile-2 img{
    object-fit: cover;
}

#uber .tile-3{
    background-image: url(img/GT350.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

#uber .tile-4{
    background-image: url(img/1967_01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

#uber p{
    color: white;
    line-height: 1.5em;
}

#uber .tile-5{
    background-image: url(img/eleanor1967_01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}


/***********************               projekte               ****************************************/

#projekte{  
    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;
    background-color: black;
    margin-top: 100px;
    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";
  }

  #projekte .tile{
    background-color: #ccc;
    border-radius: 5px;
    background-size: cover;
    background-position: center center;
  }

  #projekte .tile a{
    display: grid;
    height: 100%;
  }

  #projekte .tile:not(.main-photo){
    transition: all 0.1s ease-in;
    opacity: 0.5;    
  }

  #projekte .tile:hover:not(.main-photo){
    transform: scale(0.99);
    opacity: 1;    
  }

  #projekte .tile p{
    color: white;
  }
  
  .main-photo { 
    grid-area: main-photo;
    color: #AD3D72;
    padding: 20px;
    font-size: 20px;
    background-image: url(img/gt500_01.webp);
    text-align: center;
  }
  
  .photo-2 { 
    grid-area: photo-2;
    background-image: url(img/muscleCar.avif);     
  }
  
  .photo-3{
    grid-area: photo-3;
    background-image: url(img/1967shelbycobra.avif);
  }
  
  .photo-4 { 
    grid-area: photo-4;
    background-image: url(img/bullitt.jpg); 
  }
  
  .photo-5 {
    grid-area: photo-5;
    background-image: url(img/eleanor1967_02.jpg);
  }
  
  .photo-17{
    grid-area: photo-17;
    background-image: url(img/shelbysgt5006.webp);
  }
  
  .photo-7 { 
    grid-area: photo-7;
    background-image: url(img/gt500_02.webp);
  }
  
  .photo-6 { 
    grid-area: photo-6;
    background-image: url(img/1702574273250.avif);
  }
  
  .photo-9{
    grid-area: photo-9;
    background-image: url(img/cobra.avif);
  }
  
  .photo-10 { 
    grid-area: photo-10;
    background-image: url(img/bullitt01.avif);
  }
  
  .photo-8{
    grid-area: photo-8;
    background-image: url(img/conjunto.avif);
  }
  
  .photo-11 { 
    grid-area: photo-11;
    background-image: url(img/1967gt500.jpeg);
  }
  
  .photo-12 { 
    grid-area: photo-12;
    background-image: url(img/2024.avif);
  }
  
  .photo-13{
    grid-area: photo-13;
    background-image: url(img/predator.jpg);
  }
  
  .photo-14{
    grid-area: photo-14;
    background-image: url(img/mus1.webp);    
  }
  
  .photo-15{
    grid-area: photo-15;
    background-image: url(img/gt50002.jpg);
  }
  
  .photo-16 {
    grid-area: photo-16;
    background-image: url(img/1964Shelby289Cobra.jpg);
  }


  /************************      section posts   ************************************************/

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

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

  #posts .posts a{
    color: white;
    text-decoration: none;
  }

  #posts .posts .title{
    background-color: rgba(0,0,0,0.7);
    color: white;
    padding: 10px;
  }

  #posts .posts .title:hover{
    background-color: white;
    color: black;
    opacity: 40%;
  }

  .post-1{
    background-image: url(img/lemans.webp);
  }

  .post-2{
    background-image: url(img/lemans1.jpg);
  }

  .post-3{
    background-image: url(img/lemans2.jpg);
  }

  .post-4{
    background-image: url(img/lemans3_1.jpg);
  }

  .post-5{
    background-image: url(img/lemans4.jpg);
  }

  .post-6{
    background-image: url(img/lemans5.jpg);
  }



  /************************      section contacto   ************************************************/

  #kontakt{  
    background-color: #47b387; 
    display: grid;
    grid-template: auto 100px / 700px;
    justify-content: center;
    align-content: center;
    box-sizing: border-box;        
  }

  #kontakt form{
    padding: 20px;
    color: black;
    display: grid;
    gap: 15px;
    grid-template: auto / auto;
    align-items: center;
    box-sizing: border-box;
    background-color: #6FCDA7;
    border-radius: 10px;
  }

  #kontakt form label{
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 3px;
  }

  #kontakt h2{
    color:black;
    font-size: 30px;
    text-align: center;
    letter-spacing: 3px;
  }

  #kontakt form input,
  #kontakt form textarea {
    padding: 20px 10px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 100%;
    resize: none;
  }

  #kontakt .proveedores{
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    justify-self: center;
    padding: 10px 0;
    width: 100%;
    margin-top: 30px;
  }

  #kontakt form input.input:focus{
    /*outline: 3px solid rgb(0, 153, 255);*/
    outline: 3px solid #000;
  }

  #kontakt form textarea:focus{
    outline: 3px solid #000;
  }

  #kontakt .btn{
    width: 100%;
    border: none;
    font-weight: bold;
    padding: 15px 0;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 5px;
    letter-spacing: 3px;
  }

  #kontakt .btn.btn-enviar{
    background-color: black;
    color: white;
  }

  #kontakt .btn.btn-enviar:hover{
    background-color: white;
    color: black;
  }

  #kontakt .btn.btn-twitter{
    background-color: #00acee;
    color: white;
  }

  #kontakt .btn.btn-twitter:hover{
    background-color: white;
    color: black;
  }

  #kontakt .btn.btn-facebook{
    background-color: #3b5998;
    color: white;
  }

  #kontakt .btn.btn-facebook:hover{
    background-color: white;
    color: black;
  }

  #kontakt .btn.btn-instagram{
    /*background-color: #833ab4;*/
    background: linear-gradient(to right,#833ab4,#fd1d1d,#fcb045);
    color: white;
  }

  #kontakt .btn.btn-instagram:hover{
    background: white;
    color: black;
  }



  /**********************************               media queries             ****************************************/

  @media  screen and (max-width:1090px) {  /*1376*/
    #posts{
      grid-template: repeat(3,1fr) / repeat(2,1fr);
    }
  }

  
  @media  screen and (max-width:800px) {
    #menu{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2,1fr);
      grid-template-areas: 
      "uber projekte"
      "posts kontakt";
    }

    #menu .tile:hover .front{
      margin-top: -50vh;
    }

    #uber{
      display: grid;
      grid-template-columns:repeat(2,1fr);
      grid-template-rows: repeat(3,1fr);
      gap: 20px;
      padding: 20px;
      box-sizing: border-box;
    }

    #uber .tile img{
      width: 70%;
    } 

    #uber .tile-2{
      grid-column: 1 / 3;
      grid-row: 1 / 2;
    }

    #uber .tile-1{
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }

    #uber .tile-3{
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }

    #uber .tile-4{
      grid-column: 1 / 2;
      grid-row: 3 / 4;
    }

    #uber .tile-5{
      grid-column: 2 / 3;
      grid-row: 3 / 4;
    }


    #projekte{
      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"; 
    }


    #kontakt{
      padding: 0 20px;
      grid-template: auto 100px / 100%;
    }



  }

  @media  screen and (max-width:500px) {
    #menu{
      display: grid;
      grid-template-columns: repeat(1,1fr);
      grid-template-rows: repeat(4,1fr);
      grid-template-areas: 
      "uber"
      "projekte"
      "posts"
      "kontakt";
    }

    #menu .tile:hover .front{
      margin-top: -25vh;
    }

    #uber{
      display: grid;
      grid-template: auto / auto;
      gap: 20px;
      padding: 20px;
    }

    #uber .tile-2{
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }

    #uber .tile-1{
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }

    #uber .tile-3{
      grid-column: 1 / 2;
      grid-row: 3 / 4;
    }

    #uber .tile-4{
      grid-column: 1 / 2;
      grid-row: 4 / 5;
    }

    #uber .tile-5{
      grid-column: 1 / 2;
      grid-row: 5 / 6;
    }


    #posts{
      grid-template: repeat(6,1fr) / repeat(1,1fr);   /*6 filas / 1 columna*/
    }

    #posts .tile{
      display: grid;
    }


  }