:root {
   --color-durazno:#FFAC81;
   ---font-principal:'Montserrat';
   --color-font:#202F22;
  }
h1{
    font-family: var(---font-principal);
    font-weight: bold;

}
p{
    font-family: var(---font-principal);
}

.form{
    width: 400px;
    margin: auto;
    padding-bottom: 50px;
}
.nav-login{
    margin: auto;
    max-width: 500px;
}
.input-login{
    border: 2px solid #000000;
    border-radius: 20px;
}
.shopping-cart-button {
    background-color: #FFAC81;
    color: #fff;
    font-family: var(---font-principal);
    margin: 10px;
    border-radius: 40px;
    padding: 8px;
    padding-left: 30px;
    padding-right: 30px;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--bs-nav-tabs-link-active-color);
    background-color: var(--bs-nav-tabs-link-active-bg);
    border-bottom: #202F22 solid ;
    border-right: #fff;
    border-left: #fff;
    border-top: #fff;
}
    
.nav-link{
    color: #202F22;
    font-family:  var(---font-principal);
}
.nav-tabs .nav-link {
    margin-bottom: calc(-1* var(--bs-nav-tabs-border-width));
    background: 0 0;
    border: none;
    border-top-left-radius: var(--bs-nav-tabs-border-radius);
    border-top-right-radius: var(--bs-nav-tabs-border-radius);
}
.login-section{
    padding-bottom: 120px;
    padding-top: 100px;
}
label{
    color: #202F22;
    font-family:  var(---font-principal);
}
/* start medias Web*/
@media screen and (max-width: 2561px) {  
}

@media screen and (max-width: 1500px){   
}

@media screen and (max-width: 1024px) {
   
}
/* Tablets*/
@media screen and (max-width: 850px) {

}
/*Movil-Horizontal*/
@media screen and (max-width: 841px) and (orientation: landscape) {
}
/*Movil-Horizontal*/
@media screen and (max-width: 820px) and (orientation: landscape) { /*iphone 11*/
}



 /**tablet**/
@media screen and (max-width: 769px) {
  
}
/*Movil-Horizontal*/
@media screen and (max-width: 670px) and (orientation: landscape) {
}
/* Movil horizontal */
@media (max-width: 570px) and (orientation: landscape) {
}

/* Movil-celular */
@media screen and (max-width: 590px){
    
}
@media screen and (max-width: 376px) {
}
@media screen and (max-width:320px) {

}