From a0d2589d976731a13cff6f8bfd599deb74482399 Mon Sep 17 00:00:00 2001
From: Sebin Nyshkim <sebin.nyshkim@icloud.com>
Date: Fri, 4 Apr 2025 18:41:45 +0200
Subject: [PATCH] feat: :sparkles: add base styling and colors

---
 src/css/base.css   |  34 ++++
 src/css/colors.css |  84 ++++++++
 src/css/fonts.css  | 497 +++++++++++++++++++++++++++++++++++++++++++++
 src/css/style.css  |  27 +++
 4 files changed, 642 insertions(+)
 create mode 100644 src/css/base.css
 create mode 100644 src/css/colors.css
 create mode 100644 src/css/fonts.css
 create mode 100644 src/css/style.css

diff --git a/src/css/base.css b/src/css/base.css
new file mode 100644
index 0000000..a4d5d5d
--- /dev/null
+++ b/src/css/base.css
@@ -0,0 +1,34 @@
+:root {
+  --font-size: 18px;
+  --font-family-headings: 'Sour Gummy', sans-serif;
+  --font-family-copy: 'Poppins', serif;
+  --text-line-height: 1.5;
+
+  --page-spacing: 1em;
+
+  --container-spacing-top-safe: max(1rem, env(safe-area-inset-top));
+  --container-spacing-right-safe: max(1rem, env(safe-area-inset-right));
+  --container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
+  --container-spacing-left-safe: max(1rem, env(safe-area-inset-left));
+
+  --border-thin: 0.0625em;
+  --border-radius: 0.75em;
+
+  --textblock-padding: 0 var(--container-spacing-right-safe) 0 var(--container-spacing-left-safe);
+
+  --refimage-max-width: 50rem;
+
+  --transition-color: color 0.5s, background-color 0.5s;
+
+  @media (min-height: 64em) {
+    --page-spacing: 3em;
+  }
+
+  @media (min-width: 80em) {
+    --font-size: 20px;
+  }
+
+  @media (min-width: 120em) {
+    --font-size: 24px;
+  }
+}
diff --git a/src/css/colors.css b/src/css/colors.css
new file mode 100644
index 0000000..8ad3fb9
--- /dev/null
+++ b/src/css/colors.css
@@ -0,0 +1,84 @@
+/* theme colors */
+:root {
+  --theme-c-night: oklch(0.19 0.0081 274.48);
+  --theme-c-eerie-black: oklch(0.23 0.0116 274.38);
+  --theme-c-raisin-black: oklch(0.27 0.0148 274.31);
+  --theme-c-gunmetal: oklch(0.31 0.0179 274.27);
+  --theme-c-onyx: oklch(0.35 0.0209 274.23);
+
+  --theme-c-text-light: oklch(0.26 0.0381 19.99);
+  --theme-c-text-dark: oklch(0.95 0.0234 69.6);
+}
+
+/* semantic color variables for this project */
+:root {
+  --clr-page-background: oklch(from var(--theme-c-night) calc(l * 4.75) c h);
+  --clr-text: var(--theme-c-text-light);
+
+  --clr-nav-background: oklch(from var(--theme-c-raisin-black) calc(l * 2.75) c h);
+
+  --clr-box-background: oklch(from var(--theme-c-eerie-black) calc(l * 3.75) c h);
+  --clr-box-border: oklch(from var(--theme-c-onyx) calc(l * 1.75) c h);
+
+  --clr-color-box-background: oklch(from var(--theme-c-gunmetal) calc(l * 2.5) c h);
+
+  @media (prefers-color-scheme: dark) {
+    --clr-page-background: var(--theme-c-night);
+    --clr-text: var(--theme-c-text-dark);
+
+    --clr-nav-background: var(--theme-c-raisin-black);
+
+    --clr-box-background: var(--theme-c-eerie-black);
+    --clr-box-border: var(--theme-c-onyx);
+
+    --clr-color-box-background: var(--theme-c-gunmetal);
+  }
+}
+
+.sebin {
+  --clr-accent-1: oklch(0.58 0.1607 32.69); /* scales */
+  --clr-accent-2: oklch(0.78 0.1261 68.88); /* chest */
+  --clr-accent-3: oklch(0.49 0.08 265.23); /* hair */
+  --clr-accent-4: oklch(0.71 0.2289 141.29); /* eyes */
+  --clr-accent-5: oklch(0.36 0.0098 17.62); /* horns */
+  --clr-accent-6: oklch(0.46 0.0826 32.71); /* tail spikes */
+
+  --clr-nav-link-active: var(--clr-accent-1);
+  --clr-heading-underline: var(--clr-accent-1);
+  --clr-heading-data: var(--clr-accent-1);
+  --clr-link: var(--clr-accent-1);
+  --clr-link-underline: var(--clr-accent-1);
+}
+
+.viktor {
+  --clr-accent-1: oklch(0.95 0.0234 69.6);
+  --clr-accent-2: oklch(0.85 0.0471 56.52);
+  --clr-accent-3: oklch(0.35 0.0365 50.88);
+  --clr-accent-4: oklch(0.3 0.0477 22.3);
+  --clr-accent-5: oklch(0.26 0.0381 19.99);
+  --clr-accent-6: oklch(0.9 0.0705 199.31);
+  --clr-accent-7: oklch(0.75 0.0912 228.1);
+  --clr-accent-8: oklch(0.71 0.0848 236.58);
+  --clr-accent-9: oklch(0.4 0.0437 228.49);
+
+  --clr-nav-link-active: var(--clr-accent-7);
+  --clr-heading-underline: var(--clr-accent-7);
+  --clr-heading-data: var(--clr-accent-7);
+  --clr-link: var(--clr-accent-7);
+  --clr-link-underline: var(--clr-accent-7);
+  --clr-timeline-stroke: var(--clr-accent-7);
+}
+
+.jarek {
+  --clr-accent-1: oklch(0.69 0.11 71.52);
+  --clr-accent-2: oklch(0.56 0.1 98.83);
+  --clr-accent-3: oklch(0.76 0.03 112.98);
+  --clr-accent-4: oklch(0.81 0.07 74.77);
+  --clr-accent-5: oklch(0.69 0.12 95.34);
+
+  --clr-nav-link-active: var(--clr-accent-1);
+  --clr-heading-underline: var(--clr-accent-1);
+  --clr-heading-data: var(--clr-accent-1);
+  --clr-link: var(--clr-accent-1);
+  --clr-link-underline: var(--clr-accent-1);
+}
diff --git a/src/css/fonts.css b/src/css/fonts.css
new file mode 100644
index 0000000..89b13ec
--- /dev/null
+++ b/src/css/fonts.css
@@ -0,0 +1,497 @@
+/* poppins-thin-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 100;
+  font-stretch: 100%;
+  src: local('Poppins Thin'), local('Poppins-Thin'), url(../fonts/poppins/poppins-thin-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-thin-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 100;
+  font-stretch: 100%;
+  src: local('Poppins Thin'), local('Poppins-Thin'),
+    url(../fonts/poppins/poppins-thin-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-light-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 300;
+  font-stretch: 100%;
+  src: local('Poppins Light'), local('Poppins-Light'),
+    url(../fonts/poppins/poppins-light-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-light-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 300;
+  font-stretch: 100%;
+  src: local('Poppins Light'), local('Poppins-Light'),
+    url(../fonts/poppins/poppins-light-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-medium-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  src: local('Poppins Medium'), local('Poppins-Medium'),
+    url(../fonts/poppins/poppins-medium-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-medium-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 500;
+  font-stretch: 100%;
+  src: local('Poppins Medium'), local('Poppins-Medium'),
+    url(../fonts/poppins/poppins-medium-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: local('Poppins Regular'), local('Poppins-Regular'), url(../fonts/poppins/poppins-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: local('Poppins Regular'), local('Poppins-Regular'),
+    url(../fonts/poppins/poppins-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-extralight-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 200;
+  font-stretch: 100%;
+  src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'),
+    url(../fonts/poppins/poppins-extralight-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-extralight-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 200;
+  font-stretch: 100%;
+  src: local('Poppins ExtraLight'), local('Poppins-ExtraLight'),
+    url(../fonts/poppins/poppins-extralight-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-black-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 900;
+  font-stretch: 100%;
+  src: local('Poppins Black'), local('Poppins-Black'),
+    url(../fonts/poppins/poppins-black-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-black-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 900;
+  font-stretch: 100%;
+  src: local('Poppins Black'), local('Poppins-Black'),
+    url(../fonts/poppins/poppins-black-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-semibold-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
+    url(../fonts/poppins/poppins-semibold-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-semibold-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
+    url(../fonts/poppins/poppins-semibold-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-bold-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: local('Poppins Bold'), local('Poppins-Bold'), url(../fonts/poppins/poppins-bold-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-bold-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: local('Poppins Bold'), local('Poppins-Bold'),
+    url(../fonts/poppins/poppins-bold-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-extrabold-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 800;
+  font-stretch: 100%;
+  src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
+    url(../fonts/poppins/poppins-extrabold-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-extrabold-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: normal;
+  font-weight: 800;
+  font-stretch: 100%;
+  src: local('Poppins ExtraBold'), local('Poppins-ExtraBold'),
+    url(../fonts/poppins/poppins-extrabold-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-thin-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 100;
+  font-stretch: 100%;
+  src: local('Poppins Thin Italic'), local('Poppins-ThinItalic'),
+    url(../fonts/poppins/poppins-thin-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-thin-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 100;
+  font-stretch: 100%;
+  src: local('Poppins Thin Italic'), local('Poppins-ThinItalic'),
+    url(../fonts/poppins/poppins-thin-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-extralight-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 200;
+  font-stretch: 100%;
+  src: local('Poppins ExtraLight Italic'), local('Poppins-ExtraLightItalic'),
+    url(../fonts/poppins/poppins-extralight-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-extralight-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 200;
+  font-stretch: 100%;
+  src: local('Poppins ExtraLight Italic'), local('Poppins-ExtraLightItalic'),
+    url(../fonts/poppins/poppins-extralight-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-light-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 300;
+  font-stretch: 100%;
+  src: local('Poppins Light Italic'), local('Poppins-LightItalic'),
+    url(../fonts/poppins/poppins-light-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-light-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 300;
+  font-stretch: 100%;
+  src: local('Poppins Light Italic'), local('Poppins-LightItalic'),
+    url(../fonts/poppins/poppins-light-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-medium-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 500;
+  font-stretch: 100%;
+  src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'),
+    url(../fonts/poppins/poppins-medium-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-medium-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 500;
+  font-stretch: 100%;
+  src: local('Poppins Medium Italic'), local('Poppins-MediumItalic'),
+    url(../fonts/poppins/poppins-medium-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-semibold-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
+    url(../fonts/poppins/poppins-semibold-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-semibold-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 600;
+  font-stretch: 100%;
+  src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
+    url(../fonts/poppins/poppins-semibold-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-bold-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
+    url(../fonts/poppins/poppins-bold-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-bold-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 700;
+  font-stretch: 100%;
+  src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
+    url(../fonts/poppins/poppins-bold-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-extrabold-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 800;
+  font-stretch: 100%;
+  src: local('Poppins ExtraBold Italic'), local('Poppins-ExtraBoldItalic'),
+    url(../fonts/poppins/poppins-extrabold-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-extrabold-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 800;
+  font-stretch: 100%;
+  src: local('Poppins ExtraBold Italic'), local('Poppins-ExtraBoldItalic'),
+    url(../fonts/poppins/poppins-extrabold-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: local('Poppins Italic'), local('Poppins-Italic'),
+    url(../fonts/poppins/poppins-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 400;
+  font-stretch: 100%;
+  src: local('Poppins Italic'), local('Poppins-Italic'),
+    url(../fonts/poppins/poppins-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* poppins-black-italic-latin */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 900;
+  font-stretch: 100%;
+  src: local('Poppins Black Italic'), local('Poppins-BlackItalic'),
+    url(../fonts/poppins/poppins-black-italic-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2212, U+2215;
+  font-display: swap;
+}
+
+/* poppins-black-italic-latin-ext */
+@font-face {
+  font-family: Poppins;
+  font-style: italic;
+  font-weight: 900;
+  font-stretch: 100%;
+  src: local('Poppins Black Italic'), local('Poppins-BlackItalic'),
+    url(../fonts/poppins/poppins-black-italic-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20CF, U+2C60-2C7F, U+A720-A7FF;
+  font-display: swap;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Sour Gummy';
+  font-style: italic;
+  font-weight: 100 900;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(../fonts/sour-gummy/8At7Gs2gPYuNDii97MjjLLvpghcw76OXBoIHpHgGTN1IOK1G.woff2)
+    format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
+    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Sour Gummy';
+  font-style: italic;
+  font-weight: 100 900;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(../fonts/sour-gummy/8At7Gs2gPYuNDii97MjjLLvpghcw76OXBoIHpHgGTNNIOA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+  font-family: 'Sour Gummy';
+  font-style: normal;
+  font-weight: 100 900;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(../fonts/sour-gummy/8At5Gs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5qBNfNFQPA.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
+    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
+    U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Sour Gummy';
+  font-style: normal;
+  font-weight: 100 900;
+  font-stretch: 100%;
+  font-display: swap;
+  src: url(../fonts/sour-gummy/8At5Gs2gPYuNDii97MjjBrLbYfdJvDU5AZfP5qBDfNE.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/src/css/style.css b/src/css/style.css
new file mode 100644
index 0000000..c7a0832
--- /dev/null
+++ b/src/css/style.css
@@ -0,0 +1,27 @@
+:root {
+  font-family: var(--font-family-copy);
+  font-size: var(--font-size);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: var(--clr-page-background);
+  color: var(--clr-text);
+
+  margin: 0;
+  min-height: 100dvh;
+
+  transition: var(--transition-color);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-headings);
+}