@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
:root {
  --amarillo: #eac926;
  --azul: #03264c;
  --celeste: #1259c3;
  --blanco:#f5f0ff;
  --morado:#6c2bd9;
  --gris-oscuro: #666;
  --gris-claro: #ebebeb;
  --verde: #39b54a;

  /* tipografia */
  --roboto: "Roboto", sans-serif;

  /* tamaños de fuentes */
  --texto: 12px;
  --titulares: 24px;

  --price: 18px;
  --discount: 1rem;
  --description: 1rem;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--roboto);
}

.price {
  font-size: var(--price);
}
body  {
  background-color: var(--gris-claro);
}
.mainLogin {
  height: 100vh;
}

p{
  font-size: var(--texto);
}
.titulares {
  font-size: var(--titulares);
}
.description {
  font-size: var(--description);
}
.logo {
    width: 90px;
}
.navbar {
    background-color: #eac926;
}

.img-audifono {
  width: 70px;
  cursor: pointer;
}
.img-fluid {
  width: 100%;
  height: auto;
}

.iconns{
  color: var(--morado);
  

}
.iconFinal
{
  color: var(--celeste);
}

.ofertaContainer {
  position: relative;
  width: 100%;
  height: auto;
  object-fit: cover;
  
}
.discount {
  font-size: var(--discount);
  position: absolute;
  top: 0;
  right: 0;

}

footer {
  background-color: var(--amarillo);
}
.img-usuario {
  width: 150px;
}