style.css

:root{

--colornav: rgb(56, 59, 64);
--colorenlace:rgb(255, 255, 255);
--colorcomprar: rgb(0, 255, 0);
--colorotroenlace: rgb(170, 174, 181);
--colortresenlaces: rgb(113, 115, 120);
--colorbtn:rgb(136, 204, 0) ;
--colorfooter: rgb(0, 51, 77);
--colordegradado:rgb(0, 85, 128);
--colortarjP:rgb(0, 102, 255);
--colortarjS:rgb(0, 204, 153);
--colortarjT:rgb(255, 255, 102);
--colorpagar:rgb(179, 218, 255) ;
--colorBresumen:rgb(136, 204, 0);

}

*{
    Margin: 0;
    Padding: 0;
    box-sizing: border-box; 
    
  }
  
body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}



  
  html{
    font-size: 12px;
    font-family : 'Montserrat', sans-serif;      
    
  }
.nav-primera{
background-color: var(--colornav);

}  
.nav-primera ul li a{
padding: 10px 10px;

    }  



a.navbar-brand{
margin:0px 5px 0px 0px;
padding:2px;
}

.nav-primera a{
color:var(--colorenlace);
text-align: center;
font-size: 14px;
}

.nav-primera .green{
    color: var(--colorcomprar);
    
}
@media screen and (max-width:700px){

    nav{
      flex-direction: column;
    }
  }

  img{
   filter: brightness(0.7);

  }
  .imagen p{
color: var(--colorenlace);
margin-right: 110px;
text-align:right;
font-family:'Montserrat', sans-serif ;
font-size: 11px;

  }
  .imagen h3{
    color:var(--colorenlace);
    text-align: right;
    margin-right: 115px;
    
  }
  .imagen {
    width: 100%;
    height: auto;
    position: relative;
  }
  
  .imagen img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  
  .imagen div {
    position: absolute;
    top: 100%;
    right: 0;
    transform: translate(0, -50%);
    text-align: right;
    
  }
  
  
  @media only screen and (max-width: 768px) {
    .imagen div {
      position: static;
      transform: none;
      text-align: center;
      margin-top: 10px;
      margin-bottom: 10px;
      
    }
    .imagen p{
      text-align:center;
      line-height: 1;
      margin-right: 50px;
      
      }
.imagen h3{
  text-align: center;
}
  }
  

  .btn-secondary{
  background-color: transparent;
  border: 1px solid white;
  color: white;
  padding: 4.5px 9px;
  margin-right: 2px;
  margin-top:20px;
  
  }

  .btn-secondary:hover{
    background-color: transparent;

  }
.btn-custon{
   background-color: var(--colorcomprar); 
   color: var(--colorenlace);
  margin-right: 110px;
  margin-top: 20px;
  
 
}

.container {
  display: flex;
  flex-wrap: wrap;
}


.titulo p{
text-align: center;
margin-top:7px;
margin-bottom: 5px;
}
.titulo p+h3{

  text-align: center;
margin-top:1px;
}
.btn-info {
background-color: gray;
color: var(--colorenlace);
margin-top: 1px;
border-style: none;
}

.custom-button{
 width: 25%;

}
.card{
margin-top: 30px;
}

.card-img-top{
margin-top: -30px;

}

.image-container {
  border: 1px solid white;}

.informe p{
  text-align: center;
 margin-bottom: 2px;
  }
  h3{
    text-align: center;
    margin-top: 0px;
    margin-bottom: 2px;
  }
 span{
    text-decoration: underline dotted;
  }
  #inputNombre2 {
    width: 79%;
    /*margin-left: 2cm;*/
   margin: auto;
   margin-right: 0.1cm;
  }

  #inputApellido2 {
    width: 79%;
    margin-left: 0.1cm;
   
  }
  #inputCantidad{
    width: 79%;
    margin-left:2cm;
    margin-top:0.2cm;
    margin: auto;
    margin-right:  0.1cm; ;
  }
  
  .my-class{
    margin-left: 2.3cm;
    margin-bottom: 0.2cm;
    
    
    
  }
 
  #inputState{
    width: 79%; 
    margin: auto; 
    margin-left: 0.1cm;
  }

  #inputTotalAPagar{
    width: 81%;
    margin-left: 2cm;
    margin: auto;

  } 
  
 .my-pago{
  margin-left:2.2cm;

  
    
  }



#inputNombre{
width:75%;


}


#myButton{
  justify-content: center;
  gap:0.4cm;
  width: 99%;
  flex-wrap: wrap;
  margin-bottom: 2cm;
  display:flex;
  
  
  }
#borrarButton{
width: 79%;
margin-left: 2cm;


}

#resumenButton{
  width: 79%;
  padding-left: 0px;
 

}

#inputApellido{
width: 75%;

}
  textarea{
    height: 75%px;

  }
  
 .mensaje p{

text-align: left;
margin-left: 325px;
margin-top: 5px;
font-size: 10px;
color: gray;
  }
  @media screen and (max-width:700px){

    .mensaje p{
  text-align: center;
  margin-left: 0;
    
    }
  }

    
 .btn-success{

  background-color: var(--colorbtn);
  margin-top: 10px;
  margin-bottom: 20px;
 }


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

  form{
    flex-direction: row;
    
  }
}
 
footer{
background: linear-gradient(to right, var(--colorfooter), var(--colordegradado));
 margin-top: auto;
 padding-top: 0;
 min-height: 80px;
  
}
.footer-link {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
  a{
  text-decoration: none;
  color:var(--colorenlace);
}
@media screen and (max-width: 768px) {
.col {
    text-align: center;
    flex-direction:row;
  }
}

.container2{
gap: 12px;
flex-wrap: wrap ;

}
.pagina2 h6  {
  margin-top: 20px;
  color:black;

} 
 
.pagina2 h5{
   margin-top: 20px;
}

.pagina2 p{
  margin-top: 20px;
  color:black;
}


.blue-border{
  border:1.5px solid var(--colortarjP);
  text-align: center;

}
 .green-border{
  border: 1.5px solid var(--colortarjS);
  text-align: center;
 }
 
 .yellow-border{
  border: 1.5px solid var(--colortarjT);
  text-align: center ;

 }

 .titulos h5, .titulos h2{
  text-align: center;
  margin-top: 20px;
}

#inputEmail1{
width: 72%;
justify-content: center;
/*margin-left: 3.3cm;
margin-right: 3cm;*/
display: flex;
margin:auto;

}

#inputTotalAPagar{
  background-color:var(--colorpagar);
  height: 40px;
}

.my-container {
  margin-right: 1px;
  display: flex;
  justify-content: center;
}




 
.datos{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}





@media screen and (max-width: 768px) {
  .datos {
    flex-direction: column;
     
    }
  }

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

    .my-pago{
  text-align: center;
  margin-left: 0.7cm;
    
    }
  }

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

    .my-class{
  text-align: center;
  margin-left: 0.3cm;
 
  
    
    }
  }

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

    #myButton{
  flex-direction: column;
  justify-content: center ;
  
    
    }
  }

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

    #borrarButton{
  /*margin:0.8cm;*/
  margin-bottom: 0.1cm;
  margin-top: 0.5cm;
  margin-left: 1.3cm;
  
    }
  }

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

    #resumenButton{
    
    /*margin:0.8cm;*/
    margin-top: 0.1cm;
    margin-left: 1.3cm;
   
    
    }
  }

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

    #inputCantidad{
    width: 2cm;
    margin-right: 0.8;
    
   
    
    }
  }
  @media screen and (max-width:700px){

    #inputState{
    width: 2cm;
  margin-left: 0;
    margin-right:2cm;
  
    }
  }

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

    #inputNombre2{
    width: 2cm;
  margin-left: 0;
    margin-right:2cm;
    margin-bottom: 0;
  
    }
  }

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

    #inputApellido2{
    width: 2cm;
  margin-left: 0;
    margin-right:2cm;
    margin-top: 0;
    
  
    }
  }

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

    #inputEmail1{
    width: 2cm;
    margin-left: 1cm;
  
  
    }
  }

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

    #inputTotalAPagar{
    width: 2cm;
    margin-left: 0.7cm;
  
  
    }
  }