/* =============================================================================
   IMPORTS
   ============================================================================= */

@import "./hero.css";
@import "./kontakt.css";
@import "./prosjekter.css";
@import "./omMeg.css";
@import "./hamburger.css";

/* =============================================================================
   CSS VARIABLES
   Global design tokens used across all stylesheets.
   ============================================================================= */

:root {
  --Primary: #222222;   /* Page background */
  --Secondary: #363636; /* Card / nav background */
  --Tertiary: #9a9d21;  /* Accent color (olive green) */
  --Lorem: #e0e0e0;     /* Body text and headings */

  --base-space: 1vw;

  --offset-value: 30;   /* Controls logo and hamburger button positioning */
  --btn-size: 60;       /* Hamburger button diameter in px */
}

/* =============================================================================
   RESET
   ============================================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

body {
  background-color: var(--Primary);
  height: 100svh;
}

.root {
  height: 90svh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =============================================================================
   TEXT SELECTION
   ============================================================================= */

::selection {
  background: var(--Tertiary);
}

span::selection {
  background: var(--Lorem);
}

/* =============================================================================
   BACKGROUND BALLS
   Absolutely positioned decorative circles animated via the Web Animations API.
   z-index: -1 keeps them behind all page content.
   ============================================================================= */

.ball {
  position: absolute;
  border-radius: 100%;
  opacity: 0.5;
  z-index: -1;
}