:root {
    /* Colors */
    --color-cream-100: #fff4e6;
    --color-black-100: #1a1e27;
    --color-black-50: #393d46;
    --color-black-25: #5e5858;
    --color-blue-100: #2275f7;
    --color-green-100: #125f4d;
    --color-red-100: #f02d33;
    --color-yellow-100: #FEB824;
  
    /* Fonts */
    --ff-primary: "Montserrat", sans-serif;
    --ff-secondary: "cubano-sharp", sans-serif;
    --ff-body: var(--ff-primary);
    --ff-accent: var(--ff-secondary);
  
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
  
    --fs-200: 0.875rem;
    --fs-300: 1rem;
    --fs-400: 1.125rem;
    --fs-500: 1.5rem;
    --fs-550: 2rem;
    --fs-600: 2.25rem;
    --fs-700: 3rem;
    --fs-800: 5rem;
    --fs-900: 7.5rem;
  
    --fs-body: var(--fs-400);
    --fs-body-h2: var(--fs-600);
    --fs-body-h3: var(--fs-500);
    --fs-primary-heading: var(--fs-800);
    --fs-secondary-heading: var(--fs-700);
    --fs-primary-subheading: var(--fs-500);
    --fs-secondary-subheading: var(--fs-200);
    --fs-button: var(--fs-300);
    --fs-date: var(--fs-300);
    --fs-nav: var(--fs-400);
    --fs-site-title: var(--fs-900);
    --fs-page-title: var(--fs-800);
  }
  
  @media (max-width: 50em) {
    :root {
      --fs-body: var(--fs-300);
      --fs-body-h2: var(--fs-500);
      --fs-body-h3: var(--fs-400);
      --fs-primary-heading: var(--fs-600);
      --fs-secondary-heading: var(--fs-550);
      --fs-primary-subheading: var(--fs-400);
      --fs-secondary-subheading: var(--fs-200);
      --fs-button: var(--fs-300);
      --fs-date: var(--fs-200);
      --fs-nav: var(--fs-400);
      --fs-site-title: var(--fs-700);
      --fs-page-title: var(--fs-700);
    }
  }

  /* General Styling (Mine) */

body {
    font-family: var(--ff-body);
    font-size: var(--fs-body);
    color: var(--color-black-100);
    background: var(--color-cream-100);
  }
  
  /* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  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;
}

/* Set core body defaults */
html,
body {
  height: 100%;
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

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

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

/* 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;
  }
}

/* Utility Classes */

.container {
    --max-width: 1200px;
    --padding: 6rem;
  
    width: min(var(--max-width), 100% - var(--padding));
    margin-inline: auto;
  }
  
  @media (max-width: 50em) {
    .container {
      width: 90%;
    }
  }

  .padding-block-999 {
    padding-block: 6rem;
  }
  
  .padding-block-900 {
    padding-block: 4rem;
  }
  
  .padding-block-500 {
    padding-block: 2rem;
  }

  .padding-top-heavy {
    padding-top: 8rem;
    padding-bottom: 2rem;
  }

  .padding-bottom {
    padding-bottom: 2rem;
  }
  
  @media (max-width: 50em) {
    .padding-block-999 {
      padding-block: 3rem;
    }
  
    .padding-block-900 {
      padding-block: 1.5rem;
    }
  
    .padding-block-500 {
      padding-block: 1rem;
    }

    .padding-top-heavy {
      padding-top: 4rem;
      padding-bottom: 2rem;
    }
  }

  /* Text */

  p {
    max-width: 70ch;
    font-size: var(--fs-body);
  }

  .page-title {
    font-size: var(--fs-800);
    font-weight: var(--fw-bold);
    font-family: var(--ff-secondary);
    line-height: 1;
    color: var(--color-black-100);
  }

  @media (max-width: 50em) {
    .page-title {
      font-size: var(--fs-700);
    }
  }

  /* Buttons */

.button {
    border: 1px solid var(--color-black-100, #1a1e27);
    font-size: var(--fs-button);
    font-weight: var(--fw-bold);
    color: var(--color-black-100);
    background-color: var(--color-cream-100);
    padding: 0.5rem 0.75rem;
    line-height: 1;
    cursor: pointer;
    border-radius: .3rem;
  }
  
  .button a {
    text-decoration: none;
    color: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
  }
  
  @media (max-width: 50em) {
    .button[data-align="left"] a {
      justify-content: flex-start;
    }
  }
  
  .button:hover,
  .button:focus-visible {
    background-color: var(--color-black-25);
    border: 1px solid var(--color-black-25);
    color: var(--color-cream-100);
    transition: all 3ms ease;
  }
  
  .button:active {
    background-color: var(--color-black-100);
    transition: all 3ms ease;
  }
  
  .button[data-type="text-only"] {
    border: none;
    padding: 0.5rem 0;
  }
  
  .button[data-type="text-only"]:hover,
  .button[data-type="text-only"]:focus-visible {
    background-color: inherit;
    color: inherit;
    border-bottom: 1px solid var(--color-black-100);
  }
  
  .button[data-color="black"] {
    background-color: var(--color-black-100);
    color: var(--color-cream-100);
  }
  
  .button[data-color="black"]:hover,
  .button[data-color="black"]:active {
    background-color: var(--color-black-50);
  }
  
  .button[data-color="black"]:active {
    background-color: var(--color-black-100);
  }
  
  .button-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }
  
  @media (max-width: 50em) {
    .button-wrapper {
      flex-direction: column;
      justify-content: center;
      gap: 0.5rem;
    }
  }

  /* Elements */

  /* Intro */

  .intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

  .intro-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
  }

  /* Table */

  .table-wrapper {
    overflow-x: scroll;
    width: min(900px, 100%);
    border: 5px solid var(--color-black-100);
    border-radius: 0.25rem;
  }

  .prompt-table {
    width: 100%;
    border-collapse: collapse;
  }

  .prompt-table tr td {
    padding: .5rem;
    font-size: var(--fs-400);
    font-weight: var(--fw-medium);
  }

  .col1 {
    background: var(--color-blue-100);
    color: var(--color-cream-100);
  }

  .col2 {
    background: var(--color-red-100);
    color: var(--color-cream-100);
  }

  .col3 {
    background: var(--color-yellow-100);
    color: var(--color-black-100);
  }

  .col4 {
    background: var(--color-green-100);
    color: var(--color-cream-100);
  }
  

    /* Resolution */

    #generator {
      display: none;
    }

  .generated-content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.5rem;
  }

  .resolution {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
  }

  .resolution-label {
    font-size: var(--fs-300);
    text-transform: uppercase;
    font-weight: var(--fw-medium);
  }

  #generatedSentenceWrapper {
    display: flex;
  }

  .generatedSentence {
    font-size: var(--fs-600);
    font-weight: var(--fw-regular);
    color: var(--color-black-50);
  }

  @media (max-width: 50em) {
    .resolution-label {
      font-size: var(--fs-200);
      font-weight: var(--fw-bold);
    }
    .generatedSentence {
      font-size: var(--fs-500);
      line-height: 1.4;
    }
  }

  .genWord1 {
    font-weight: var(--fw-bold);
    color: var(--color-blue-100);
  }

  .genWord2 {
    font-weight: var(--fw-bold);
    color: var(--color-red-100);
  }

  .genWord3 {
    font-weight: var(--fw-bold);
    color: var(--color-yellow-100);
  }

  .genWord4 {
    font-weight: var(--fw-bold);
    color: var(--color-green-100);
  }