:root {
    --mobile-width: 800px;
    /*
    Original
    --brand-light: 249, 249, 247;
    --brand-dark: 41, 39, 56;
    --brand-accent: 222, 237, 59;
    --brand-earth-light: 211, 197, 183;
    --brand-earth-dark: 83, 88, 119;
    --brand-stone-light: 194, 231, 255;
    --brand-stone-dark: 72, 110, 135;*/

    --brand-light: 252, 239, 233;
    --brand-dark: 9, 10, 17;
    --brand-action: 48, 48, 255;
    --brand-accent: 212, 255, 82;
    --brand-earth-light: 212, 154, 125;
    --brand-earth-dark: 109, 67, 59;
    --brand-stone-light: 125, 154, 212;
    --brand-stone-dark: 59, 67, 109;

    --back-dark: 240, 231, 216;
    --back-light: 252, 239, 233;
    --brand-dialog: 249, 248, 247;


    --brand-logo: 239, 199, 69;
    --oura: 230, 221, 209;
    --foam: 209, 230, 224;
    --primary: 77, 255, 192;
    --secondary: 216, 243, 255;
    --tertiary: 120, 147, 179;

    /*--oatmeal: 180, 168, 156;*/
    /*--oatmeal: 247, 241, 232;*/
    --oatmeal: 245, 244, 240;
    /*--oatmeal: 209, 202, 195;*/
    /*--stone: 33, 89, 126;*/
    --stone: 28, 95, 135;
    --mint: 77, 255, 192;
    --lavender: 173, 138, 230;

    /*--font-accent: "Libertinus", serif;*/
    /*--font-accent: "Petrona", serif;*/

    --font-main: "Regola Pro Trial", sans-serif;
    --font-accent: "PP Eiko", serif;
    
    --announcement-height: 30px;
}

@font-face {
  font-family: 'PP Eiko';
  src: url('/fonts/PPEiko-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Eiko';
  src: url('/fonts/PPEiko-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Eiko';
  src: url('/fonts/PPEiko-Heavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Eiko';
  src: url('/fonts/PPEiko-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Eiko';
  src: url('/fonts/PPEiko-BlackItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Regola Pro Trial';
  src: url('/fonts/RegolaProTrial-Book.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Regola Pro Trial';
  src: url('/fonts/RegolaProTrial-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Regola Pro Trial';
  src: url('/fonts/RegolaProTrial-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Regola Pro Trial';
  src: url('/fonts/RegolaProTrial-Bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Regola Pro';
  src: url('/fonts/RegolaProTrial-BookOblique.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Regola Pro';
  src: url('/fonts/RegolaProTrial-RegularOblique.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Regola Pro';
  src: url('/fonts/RegolaProTrial-MediumOblique.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Regola Pro';
  src: url('/fonts/RegolaProTrial-BoldOblique.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}


body {
    box-sizing: border-box;
    background-color: rgb(var(--oatmeal));
    background-color: white;
    /*background: rgb(209, 230, 224);*/
    /*background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);*/
    padding: 0px;
    margin: 0px;
    border: 0px;
    color: rgba(var(--brand-dark), 0.7);
    font-family: var(--font-main);
    font-weight: 300;
}

h1 {
    font-size: 500%;
    font-weight: 100;
    font-stretch: 50%;
    margin-bottom: 20px;
    /*transform-origin: 0 50%;
    transform: scale(0.8, 1);*/
}

h2 {
    font-size: 260%;
    margin-block-start: 0px;
    margin-block-end: 0px;
}

h3 {
    font-weight: 500;
    font-size: 135%;
    margin-block-start: 0px;
    margin-block-end: 0px;
}

h4 {
    font-size: 100%;
    font-weight: 500;
    margin-block-start: 0px;
    margin-block-end: 0px;
}

a {
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

a:active, a:focus {
    filter:invert(0.1);
}

a:visited {
    color: inherit;
    text-decoration: none;
}

li {
    -webkit-tap-highlight-color: transparent;
}

.accent-font, .accent-font-italic {
    display: inline;
    font-family: var(--font-accent);
    transform-origin: 0 50%;
    transform: scale(0.8, 1);
}

.accent-font-italic {
    font-style: italic;
}

ul {
    padding-inline-start: 0px;
}

li {
    margin: 0px;
}

button {
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 1000px;
    padding: 20px 40px;
    background-color: rgb(var(--brand-dark));
    color:white;
    font-weight: 500;
    cursor: pointer;
    font-family: var(--font-main);
}

.fade-in {
    animation: fade-in ease-in-out 1.2s;
}

.fade-out {
    animation: fade-out ease-in-out 1.2s;
    opacity: 0.0;
}

@keyframes fade-in { 
    0% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes fade-out { 
    0% { opacity: 1.0; }
    100% { opacity: 0.0; }
}

.blur-in {
    animation: blur-in ease-in-out 0.6s;
}

.blur-out {
    animation: blur-out ease-in-out 0.6s;
    filter: blur(15px);
}

@keyframes blur-in { 
    0% { filter: blur(15px); }
    100% { filter: blur(0px); }
}

@keyframes blur-out { 
    0% { filter: blur(0px); }
    100% { filter: blur(15px);}
}

.rise-in {
    animation: rise-in ease-in-out 0.8s;
}

.rise-out {
    animation: rise-out ease-in-out 0.8s;
    translate: 0% 100%;
}

@keyframes rise-in { 
    0% {  translate: 0% 100%; }
    100% {  translate: 0% 0%; }
}

@keyframes rise-out { 
    0% {  translate: 0% 0%; }
    100% {  translate: 0% 100%;}
}

.parallax-bloom {
    position: relative;
    z-index: -1;
}

.bloom-gradient {
    position: absolute;
    aspect-ratio: 1.0;
    height: 100svh;
    left: calc((100vw - 100vh) + 0vw);
    top: calc(-50svh + 0svh);
}

.product-discount {
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    gap: 3px;
    height: 22px;
    background-color: rgba(var(--brand-action), 0.8);
    border-radius: 5px;
    padding: 5px;
    color: white;
    font-size: 75%;
}

.product-discount-tag {
    height: 100%;
    filter: invert();
}

.product-discount-price {
    display: inline-block;
}