@import url('https://fonts.googleapis.com/css2?family=Racing+Sans+One&family=Roboto:wght@100&@700&display=swap');



/* inicio stylo de about*/





*{
    margin: 0%;
    font-family: Georgia, 'Times New Roman', Times, serif;   
}

body {   
  background: rgb(228, 222, 222);;
  background: linear-gradient(90deg, rgb(228, 224, 224) 0%, rgb(211, 206, 206) 51%, rgb(177, 168, 168) 100%);
  position: relative;   
}


.btn-wsp{
  text-decoration: none;
  width: 60px;
  height: 60px;
  border-radius:50%;
  background-color: #20ba5a;
  display: flex;
  justify-content: center;
  align-items: center;
  position:fixed;
  bottom:25px;
  right:25px;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
  z-index:100;
  transition: all 300ms ease;
}
.btn-wsp:hover{
  background: #20ba5a;
}
@media only screen and (min-width:320px) and (max-width:768px){
  .btn-wsp{
      width:50px;
      height:50px;
      line-height: 66px;
}
}


.btn-carrito{
  text-decoration: none;
  width: 60px;
  height: 60px;
  border-radius:50%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  position:fixed;
  bottom:100px;
  right:25px;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.3);
  z-index:100;
  transition: all 300ms ease;
}
.btn-carrito:hover{
  background: #f0f0f0;
}
@media only screen and (min-width:320px) and (max-width:768px){
  .btn-carrito{
      width:50px;
      height:50px;
      line-height: 66px;
}
}




 #logo {
    width: 80%;
    height: 80%;
}

.cardsAbout{    
    padding: 1.3em;
    max-width: 80em;
    margin:auto;
    background: linear-gradient(90deg, rgb(44, 44, 43) 0%, rgba(34,34,34,1) 100%, rgba(0,0,0,0.989233193277311) 100%);
    border-style: solid;
    border-radius: 1rem ;
    border-width: thin;
    border-color: white;
}

div{
 color: white;
}

/* fin de estylos de about*/


/* inicio de estylos de navbar*/
 
nav {
  background-color: black;
  overflow: hidden;
}



nav a {
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  color: black;
}

nav form {
  display: flex;
  align-items: end;
  margin-top: 8px;
  margin-right: 16px;
  justify-content: center;
}

nav forma {
  display: flex;
  margin-top: 8px;
  margin-right: 16px;
}


nav input[type="text"] {
  padding: 6px;
  border-radius: 4px;
  border: none;
}

nav button[type="submit"] {
  padding: 6px 12px;
  border-radius: 4px;
  border: none;
  background-color: #ddd;
  margin-left: -5px;
}

nav button[type="submit"]:hover {
  background-color: #bbb;
  cursor: pointer;
}

.highlight {
  background-color: yellow;
}

.logonav {
  height: 70px;
  border-radius: 10px 10px 10px;
}

.loginnav {
  border-radius: 80%;
  height: 40px;
  color: black;
  justify-content: center;
  align-items: center;
  display: flex;
  margin: 2px;
  margin-top: 12px;
}

.susnav {
  border-radius: 80%;
  height: 40px;
  color: black;

}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
}


  /* final de estylos de navbar*/


  /* inicio estylos footer*/


  footer {
    font-family: Georgia, "Times New Roman", Times, serif;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    background-color: rgba(27, 27, 27, 1);
    margin: 0;
  
  }
  
  .logoFooter {
    top: 0;
    width: 40%;
    height: 50%;
    border-radius: 10%;
  
  }
  
  .row {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .iconfooter {
    margin-right: 20px;
  }


  /* fin estylos footer*/

  .btn-wsp{
    position:fixed;
    bottom:20px;
    right:25px;
    color: black;
    border-radius:30px;
    text-align:center;
    justify-content: center;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index:100;
    transition: all 300ms ease;
  }
  .btn-wsp:hover{
    background: #20ba5a;
  }
  @media only screen and (min-width:320px) and (max-width:768px){
    .btn-wsp{
        width:63px;
        height:63px;
        line-height: 66px;
  }
  }
  
  
  .btn-carrito{
    position:fixed;
    
    bottom:93px;
    right:25px;
    color:black;
    border-radius:30px;
    text-align:center;
    justify-content: center;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index:100;
    transition: all 300ms ease;
  }
  .btn-carrito:hover{
    background: #f0f0f0;
  }
  @media only screen and (min-width:320px) and (max-width:768px){
    .btn-carrito{
        width:63px;
        height:63px;
        line-height: 66px;
  }
  }