@import url(./header.css);
@import url(./main.css);
@import url(./hero.css);
@import url(./racket-black_wolf.css);
@import url(./racket-great_wolf.css);
@import url(./racket-white_wolf.css);
@import url(./racket-okami.css);
@import url(./footer.css);

/*
Breakpoints:
sm-576px-36rem
md-768px-48rem
lg-992px-62rem
xl-1200px-75rem
xxl-1400px-87.5rem
sxl-2400px-150rem
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  font: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:root {
  --white: #fff;
  --red: #ce0e2d;
  --red-hover: #99071f;
  --gray: #424242;
  --black: #000;
}
body {
  background-color: var(--white);
  color: var(--gray);
  scroll-behavior: smooth;
}
body,
input,
textarea,
select,
button {
  font-family: 'Montserrat', sans-serif;
}
a {
  text-decoration: none;
  color: inherit;
}
ul[role='list'] {
  list-style: none;
}

/* Buttons */
.btn-buy {
  background-color: var(--red);
  display: inline-block;
  margin: 0 auto;
  padding: 0.5rem 2rem;
  color: var(--white);
  transition: all 0.5s ease-in-out;
}
.btn-buy:hover {
  background-color: var(--red-hover);
  color: var(--white);
}
/*// Buttons */

@media (max-width: 768px) {
  html {
    font-size: 87.5%;
  }
}