/* =========================
   BASE / FOUNDATIONS
========================= */

/* Color palette */
:root {
  --picton-blue: #00a8dc;
  --vivid-sky-blue: #00d1e9;
  --tea-green-light: #88ae0c;
  --tea-green: #4f0d81;
  --snow: #f7f1fe;
  --coral-pink: #f2857d;
  --cambs-digital: #d23939;

  /* Typography */
  --font-main: "Helvetica Neue", Arial, sans-serif;
  --font-accent: Georgia, serif;
  --font-story: "Story Script";

  /* Spacing scale */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;
  --space-xl: 128px;
}

/* Reset / Normalize basics */
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  background-color: var(--snow);
  color: #333;
  font-family: var(--font-main);
  line-height: 1.6;
}

img,
iframe,
video {
  max-width: 100%;
  height: auto;
}
/* fonts */
@font-face {
    font-family: 'Story Script';
    src: url('fonts/StoryScript-Regular.woff2') format('woff2'),
        url('fonts/StoryScript-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    
}
.story-font {
  font-family: 'Story Script', cursive;
  font-size: 2.5rem;
}
.rem3{
  font-size: 3rem;
}