/* app/styles/_button.css */
button,
.button {
  display: inline-block;
  padding: .8rem 2rem .625rem;
  line-height: 1;
  background-color: var(--color-secondary-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1px solid transparent;
  border-radius: 2rem;
  box-sizing: border-box;
  text-decoration: none;
  font-size: var(--font-size-small);
  cursor: pointer;
  font-weight: 700;
  transition: all .5s ease-in-out;
}
.button:hover,
.button:active {
  outline: 0;
}
.button:hover {
  background-color: var(--color-secondary);
}
.button-secondary:not(:hover) {
  border-color: var(--color-primary);
  background-color: transparent;
}
.button-small {
  padding: .8rem 1.5rem .625rem;
}

/* app/styles/_navigation.css */
nav ul li a {
  position: relative;
}
nav ul li a:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 0;
  margin: auto;
  width: 0%;
  content: ".";
  color: transparent;
  background: var(--color-secondary);
  height: 1px;
  border-radius: 1rem;
  transform: translate(-50%);
}
nav ul li a {
  position: relative;
  transition: all 2s;
}
nav ul li a:after {
  text-align: left;
  content: ".";
  margin: 0;
  opacity: 0;
}
nav ul li a:hover {
  z-index: 1;
}
nav ul li a:hover:after {
  z-index: -1;
  animation: fill 1s forwards;
  -webkit-animation: fill 1s forwards;
  -moz-animation: fill 1s forwards;
  opacity: 1;
}
body:has(.nav-open) {
  overflow-y: hidden;
}
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 2rem;
    height: 1px;
  }
  to {
    width: 2rem;
    background: var(--color-secondary);
  }
}

/* app/styles/_typography.css */
:root {
  --font-weight-thin: 100;
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-heavy: 900;
  --font-stack: "raleway", sans-serif;
  --font-heading: "stixgeneral-bold", serif;
  --font-size-default: 1rem;
  --line-height-default: 1.44;
  --line-height-header: 1.2;
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.5rem;
  --font-size-h5: 1.25rem;
  --font-size-h6: 1rem;
  --font-size-small: .875rem;
}
@media (min-width: 1024px) {
  :root {
    --font-size-default: 1.125rem;
    --font-size-h1: 3.75rem;
    --font-size-h2: 3rem;
    --font-size-h3: 2rem;
    --font-size-h4: 1.875rem;
    --font-size-h5: 1.5rem;
    --font-size-h6: 1.125rem;
    --font-size-small: 1rem;
  }
}
h1,
.h1 {
  margin-left: -3px;
  font-size: var(--font-size-h1);
}
h2,
.h2 {
  margin-left: -2px;
  font-size: var(--font-size-h2);
}
h3,
.h3 {
  font-size: var(--font-size-h3);
}
h4,
.h4 {
  font-size: var(--font-size-h4);
}
h5,
.h5 {
  font-size: var(--font-size-h5);
}
h6,
.h6 {
  font-size: var(--font-size-h6);
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-header);
  margin-bottom: .25rem;
}
p,
.p,
a,
ul {
  font-size: var(--font-size-default);
}
b {
  display: inline-block;
  margin-block: .5rem;
  font-weight: var(--font-weight-bold);
}
.text b:not(:last-child),
.text p:not(:last-child) {
  margin-top: 1rem;
}
.text li {
  color: var(--color-primary-light);
  margin-bottom: .5rem;
}
.text li p {
  font-size: var(--font-size-small);
}
@font-face {
  font-family: stixgeneral-bold;
  src: url(/fonts/stixgeneral-bold.otf) format("opentype");
  font-weight: 400;
}
@font-face {
  font-family: raleway;
  src: url(/fonts/Raleway-Light.ttf) format("truetype");
  font-weight: 300;
}
@font-face {
  font-family: raleway;
  src: url(/fonts/Raleway-Regular.ttf) format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: raleway;
  src: url(/fonts/Raleway-SemiBold.ttf) format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: raleway;
  src: url(/fonts/Raleway-Bold.ttf) format("truetype");
  font-weight: 700;
}

/* app/styles/main.css */
:root {
  --color-primary: hsl(236, 50%, 18%);
  --color-primary-light: hsl(236, 10%, 35%);
  --color-secondary: hsl(33, 37%, 46%);
  --color-secondary-light: hsl(33, 100%, 98%);
  --color-white: hsl(40, 100%, 99%);
  --color-black: hsl(240, 66%, 12%);
}
body {
  font-family: var(--font-stack);
  font-weight: 300;
  color: var(--color-black);
  font-size: 1rem;
  font-variant-numeric: lining-nums;
}
section {
  padding-block: 2rem;
}
img {
  display: inline-block;
}
img:not(:last-child) {
  margin-bottom: 1rem;
}
@media screen and (min-width: 1024px) {
  section {
    padding-block: 4rem;
  }
}