/***************************************************************
Base CSS =======================================================
***************************************************************/
:root {
  /* [Var] Color Palette (Brown-White-Coral) [--color-*] */
  --color-background: oklch(93.455% 0.0272 72.74);
  --color-foreground: oklch(23.433% 0.01913 40.841);
  --color-accent: oklch(73.229% 0.15551 25.739);
  --color-primary: oklch(52.935% 0.07398 51.292);
  --color-primary-foreground: var(--color-background);
  --color-secondary: oklch(33.595% 0.05811 53.863);
  --color-secondary-foreground: var(--color-background);
  /* [Var] Text (Minor Third 1.2 Scale Rounded Ratio) [--text-*] */
  --text-xs: 0.833rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.44rem;
  --text-2xl: 1.728rem;
  --text-3xl: 2.074rem;
  --text-4xl: 2.488rem;
  --text-5xl: 2.986rem;

  /* Make sure the scrolling is smooth */
  scroll-behavior: smooth;
  /* [Fixed] Font */
  font-family: sans-serif;
}

body {
  margin: 0;
  background-color: var(--color-background);
  min-width: 352px; 
  scrollbar-color: var(--color-primary) var(--color-background);
  scrollbar-width: thin;
  color: var(--color-foreground);
  font-size: var(--text-base);
  line-height: 1.5;
}

h1 {
  margin: 1rem 0 1rem;
  font-weight: 700;
  /* title */
  font-size: var(--text-5xl);
  line-height: 1.15;
}

h2 {
  margin: 1rem 0 0;
  font-weight: 700;
  /* section heading */
  font-size: var(--text-4xl);
  line-height: 1.2;
}

h3 {
  margin: 0;
  font-weight: 700;
  /* subheading */
  font-size: var(--text-3xl);
  line-height: 1.25;
}

h4 {
  margin: 0;
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: 1.3;
}

h5 {
  margin: 0;
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: 1.35;
}

h6 {
  margin: 0;
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: 1.4;
}

p {
  margin: 0 0 1rem;
  font-size: var(--text-base);
  line-height: 1.6;
}

a {
  transition: color 200ms ease;
  color: var(--color-accent);
}

a:hover,
a:focus-visible {
  color: var(--color-secondary);
  text-decoration-color: var(--color-secondary);
}

/***************************************************************
[ALL] Navigation Bar
***************************************************************/
header {
  display: flex;
  position: fixed;
  top: 0;
  justify-content: space-between;
  align-items: center;
  background: var(--color-primary);
  padding: 0 2rem;
  width: calc(100% - 4rem);
  height: 3rem;
  color: var(--color-primary-foreground);
}

nav a {
  margin-left: 1rem;
}

/***************************************************************
[<768px] Layout: Mobile-First Design ===========================
***************************************************************/
.layout {
  display: flex;
  flex-direction: column;
  margin: 3rem auto 0;
  min-width: 320px;
  max-width: 1280px;
  min-height: calc(100vh - 5.5rem);
}

section {
  padding: 0 2rem 1rem;
}

footer {
  display: flex;
  justify-content: space-between;
  background: var(--color-primary);
  padding: 0.5rem 2rem;
  color: var(--color-primary-foreground);
  font-size: var(--text-sm);
}

/***************************************************************
[<768px] Other Section Specific Stuff
***************************************************************/

/***************************************************************
[>=768px] Layout: Tablet Design ================================
***************************************************************/
@media all and (width >=768px) {
  /* breakpoint for if shift of layout is needed */
  body {
    /* Example: change background color for tablet (delete later) */
    background-color: var(--color-background);
  }
}