@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

@import url("reset.css");

:root {
  --font-bebas: "Bebas Neue", sans-serif;
  --font-montserrat: "Montserrat", sans-serif;
  --blue: #3e7ec1;
  --pink: #de4a9b;
}

body {
  background-color: #000;
  color: #fff;
  background-image: url("images/background.jpg");
  background-size: cover;
  background-position: top center;
}

.line {
  display: block;
  position: relative;
  width: 100%;
  height: 2px;
  background-color: #fff;
}

.line.blue {
  background-color: var(--blue);
}

.line.pink {
  background-color: var(--pink);
}

.title-product {
  font-family: var(--font-bebas);
  font-weight: 600;
  font-size: 24px;
  position: relative;
  text-transform: uppercase;
}

.title-product.pink {
  color: var(--pink);
}
.title-product.blue {
  color: var(--blue);
}

.title-product.underlined::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
}

.title-product.underlined.pink::before {
  background-color: var(--pink);
}

.title-product.underlined.blue::before {
  background-color: var(--blue);
}