@import "fonts.css";
@import "utils.css";

@import "index.css";
@import "index-2.css";

:root {
  /* Colors */
  --w-white: #fff;
  --w-secondary-text-color: #819cb1;
  --w-neutral-50: #fcfcf8;
  --w-primary-300: #37b971;
  --w-primary-200: #4bd675;
  --w-primary-100: #8ee8aa;
  --w-primary-600: #08544a;
  --w-primary-50: #d1fae0;
  --w-primary-800: #0f2333;
  --w-primary-950: #0a1017;

  --w-max-width: 980px;
  --w-main-font: "Euclid Square", sans-serif;
  --w-secondary-font: "Inter", sans-serif;
}

@media screen and (min-width: 1240px) {
  :root {
    --w-max-width: 1240px;
  }
}

html {
  font-size: 62.5%;
}

body {
  color: var(--w-white);
  background: var(--w-primary-950);
}

#winston-page {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

#winston-page .container-fluid {
  padding-inline: 2rem;
  max-inline-size: var(--w-max-width);
  margin: 0 auto;
}

section {
  margin: 0 !important;
}

mark {
  background-color: transparent;
  font-weight: 600;
  color: var(--w-primary-200);
  font-style: italic;
}

.secondary-font {
  font-family: var(--w-secondary-font) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  font-weight: 400;
  font-family: var(--w-main-font) !important;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}