@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Plus+Jakarta+Sans:wght@300;400;500&family=WindSong:wght@400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

/* VARIABLES */
:root {
  /* Deep Purple */
  --primary-color: #461657;
  --primary-color-20: #ece7ee;
  --primary-color-40: #d4c8d9;
  --primary-color-70: #7d5b89;
  --primary-color-80: #6a4478;
  /* Light Purple */
  --secondary-color: #ece7ee;
  /* Element colors */
  --site-bg-color: linear-gradient(to bottom, white 0%, var(--primary-color-20) 8%, var(--primary-color-70) 100%);
  --card-bg-color: var(--primary-color-20);
  /* Thistle / Light Purple */
  --text-light: #f9f9f9;
  --text-dark: #333;
  /* Fonts */
  --font-primary: "Plus Jakarta Sans", sans-serif;
  --font-heading: "Playfair Display", serif;
  --font-script: "WindSong", "Great Vibes", cursive;
}

/* RESET & BASIC SETUP */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body,
html {
  height: 100%;
  width: 100%;
  overflow: hidden;
  /* Prevent default scrolling, handled by scroll container */
  font-family: var(--font-primary);
  color: #333;
  scroll-behavior: smooth;
  perspective: 1000px;
  transform-style: preserve-3d;
  background: var(--site-bg-color);
}

footer {
  display: none;
}

h1 {
  font-family: var(--font-script);
  font-size: 4.5rem;
  letter-spacing: 5px;
  color: var(--primary-color);
}

h2 {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  color: var(--primary-color);
  margin-bottom: 20px;
}

hr {
  width: 80%;
  margin: 20px auto;
}