@font-face {
  font-family: 'Aeonik';
  src: url('Aeonik-Regular.otf');
}

:root {
  --clr-primary: hsl(0, 86%, 34%);
  --clr-accent: hsl(47, 95%, 49%);
  --clr-secondary: hsl(47, 54%, 88%);
  --clr-neutral: hsl(53, 60%, 97%);
  --clr-secondary-900: hsl(233, 14%, 11%);

  --clr-text-secondary: hsl(0, 0%, 57%);

  --fw-regular: 400;
  --fw-semi-bold: 500;
  --fw-bold: 700;

  --fs-300: 0.875rem;
  --fs-400: 1.125rem;
  --fs-500: 1.375rem;
  --fs-600: 2.25rem;
  --fs-700: 4rem;

  --fs-body: var(--fs-400);
  --fs-primary-heading: var(--fs-700);
  --fs-secondary-heading: var(--fs-600);
  --fs-nav: var(--fs-400);
  --fs-button: var(--fs-300);

  --ff-body: Aeonik, serif;
  --ff-heading: 'Cormorant Garamond', serif;

  --space-unit: 1rem;

  --space-xxxxs: calc(0.125 * var(--space-unit));
  --space-xxxs: calc(0.25 * var(--space-unit));
  --space-xxs: calc(0.375 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
  --space-xxl: calc(5.25 * var(--space-unit));
  --space-xxxl: calc(8.5 * var(--space-unit));
  --space-xxxxl: calc(13.75 * var(--space-unit));
}

@media (min-width: 769px) {
  :root {
    --fs-400: 1.25rem;
    --fs-500: 1.5rem;
    --fs-600: 2.5rem;
    --fs-700: 4.5rem;
    --fs-nav: 1.125rem;
  }
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}
/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-size: var(--fs-400);
  font-family: var(--ff-body);
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
a {
  color: inherit;
  text-decoration: none;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
input.form-control {
  background-color: unset;
  color: #fff;
  border: 1px solid #fff;
  font-size: var(--fs-300);
  padding-block: 0.8rem;
}
input.form-control::placeholder {
  color: #fff;
}

input.form-control:focus {
  background-color: unset;
  box-shadow: unset;
  color: #fff;
  border: 1px solid #fff;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.book-illustration {
  position: relative;
  z-index: 1;
}
.book-illustration::before {
  content: '';
  position: absolute;
  right: 0;
  width: 80%;
  height: 100%;
  border-radius: 50% 0 0 50%;
  border-radius: 40% / 50% 0 0 50%;
  background-color: rgba(255, 255, 255, 0.15);
  z-index: -1;
}
.lessons ul {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.illustration-container {
  position: relative;
}
.illustration-container::before {
  --overflow: 31px;
  --top-offset: 10%;

  content: '';
  position: absolute;
  top: var(--top-offset);
  left: calc(var(--overflow) / -2);
  width: calc(100% + var(--overflow));
  height: calc(100% + (var(--overflow) / 2));
  background-color: var(--clr-secondary);
  border-radius: 24px;
  z-index: -1;
}
@media (min-width: 769px) {
  .illustration-container::before {
    --top-offset: 20%;
    --overflow: 62px;
  }
}

/* Navigation */
.main-header {
  margin-top: 2rem;
}

.mobile-nav-toggle {
  display: none;
}

.mobile-nav-toggle .menu,
.mobile-nav-toggle .menu-close {
  display: none;
}
.nav-list {
  font-size: var(--fs-nav);
}

@media (max-width: 768px) {
  .main-nav {
    display: none;

    position: fixed;
    padding: 1rem;
    inset: 6rem 1rem auto;
    max-width: 30rem;
    margin-left: auto;
    background: var(--clr-neutral);
  }
  .main-nav[data-visible] {
    display: block;
    position: fixed;
  }
  .mobile-nav-toggle {
    display: block;
  }
  .mobile-nav-toggle .menu {
    display: block;
  }
  .mobile-nav-toggle .menu-close {
    display: none;
  }
  .nav-list {
    display: grid;
    gap: 0.5rem;
    text-align: center;
    color: #000;
  }
}
.hero {
  background-color: var(--clr-primary);
  background-repeat: no-repeat;
}
@media (min-width: 769px) {
  .hero {
    background-image: url(./public/hero-section.png);
    background-position: 12%;
    height: 1033px;
  }
}
@media (min-width: 1024px) {
  .hero {
    background-position: 25%;
  }
}

/* Utility */
.fw-500 {
  font-weight: var(--fw-semi-bold);
}
.ff-heading {
  font-family: var(--ff-heading);
}
.fs-300 {
  font-size: var(--fs-300);
}
.fs-400 {
  font-size: var(--fs-400);
}
.fs-500 {
  font-size: var(--fs-500);
}
.fs-600 {
  font-size: var(--fs-600);
}
.fs-700 {
  font-size: var(--fs-700);
}
.bg-primary-local {
  background-color: var(--clr-primary);
}
.text-secondary-local {
  color: var(--clr-text-secondary);
}
@media (min-width: 769px) {
  .rounded-md-700 {
    border-radius: 15px;
  }
}
.btn {
  font-weight: 400 !important;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  font-size: 1rem;
  padding: 0;
  border-radius: 0.25rem;
}
.btn-primary-local {
  padding: 0.7rem 2rem;
  background-color: var(--clr-accent);
}
.text-primary-local {
  color: var(--clr-primary);
}
.text-accent {
  color: var(--clr-accent);
}
.text-secondary-900 {
  color: var(--clr-secondary-900);
}
.mt-900 {
  margin-top: 100px;
}
.mb-400 {
  margin-bottom: 15px;
}
.mb-500 {
  margin-bottom: 25px;
}
.mb-700 {
  margin-bottom: 50px;
}
.mb-900 {
  margin-bottom: 100px;
}
.mb-800 {
  margin-bottom: 75px;
}

@media (min-width: 769px) {
  .mb-md-700 {
    margin-bottom: 50px;
  }
  .mb-md-800 {
    margin-bottom: 75px;
  }
}

@media (min-width: 769px) {
  .mt-900 {
    margin-top: 150px;
  }
}