@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Nunito:wght@400;700&display=swap');

/* ==========================
CSS Variables
========================== */
:root {
    /* ------------------------------- Colors -----------------------------*/
    --primary-color: #333333;      /* main text color */
    --primary-bg: #FFE5D4;         /* main body background */
    --secondary-color: #f8f7f7;
    --secondary-bg: #FF6B6B;
    --accent-color: #4D96FF;
    --accent-color2: #F6C445;

    /* Link + Button specific */
    --link-color: #103059;
    --link-hover-color: #276B7D; 
    --link-visited-color: #913D22;
    --button-bg: #FF6B6B;
    --button-hover-bg: var(--link-hover-color);
    --button-text-color: #1E1E1E;
    --secondary-link-color: #f4b71c;
    --secondary-link-hover-color: #f9d67f;
    --secondary-link-visited-color: #eec283;

    /* Header and Footer */
    --headerFooter-color: #eee;
    --headerFooter-bg: #FFD700;

    /* Navigation-specific colors */
    --clr-nav: var(--link-color);
    --clr-nav-hover: var(--link-hover-color); 
    --clr-nav-hover-bg: #ffffff;
    --clr-nav-background: var(--headerFooter-bg);

    /* ------------------------------- Typography -----------------------------*/
    --font-primary: 'Nunito', sans-serif;
    --font-heading: 'Poppins', sans-serif;
    --font-size-base: 20px;

    --text-size-xs: 0.56rem;
    --text-size-sm: 0.75rem;
    --text-size-md: 1rem;
    --text-size-lg: 1.33rem;
    --text-size-xl: 1.78rem;
    --text-size-2xl: 2.37rem;
    --text-size-3xl: 3.16rem;
    --text-size-4xl: 4.21rem;
    --text-size-5xl: 5.61rem;

    /* ------------------------------- Spacing -----------------------------*/
    --spacing-sm: calc(var(--font-size-base) * 0.5);
    --spacing-md: calc(var(--font-size-base) * 1);
    --spacing-lg: calc(var(--font-size-base) * 2);
    --spacing-xl: calc(var(--font-size-base) * 3);
    --spacing-2xl: calc(var(--font-size-base) * 4);

    width: 100%;
    margin: 0;
    padding: 0;
}

/* ==========================
Minimal Normalize
========================== */
*,
*::before,
*::after { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.65;
    font-size: var(--text-size-md);
    position: relative;

    /* Main body colors */
    color: var(--primary-color);
    background-color: var(--primary-bg);
}

svg { font: inherit; }

audio, canvas, iframe, img, svg, video { vertical-align: middle; }

/* ==========================
General Styles
========================== */
html { font-size: var(--font-size-base); 
margin: 0; padding: 0;
}


html {font-size: 18px;}

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: false;
  line-height: 1.65;
}

p {
  font-size: 1em;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Poppins', sans-serif;
  font-weight: true;
  line-height: 1.15;
}

h1,
.text-size-h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  margin-top: 0;
  font-size: 2.49em;
}

h2,
.text-size-h2 { font-size: 2.07em; }

h3,
.text-size-h3 { font-size: 1.73em; }

h4,
.text-size-h4 { font-size: 1.44em; }

h5,
.text-size-h5 { font-size: 1.2em; }

.text-caption { font-size: 0.83em; }

small,
.text-small {
  font-size: 0.69em;
}
              
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--primary-color);
    color: var(--secondary-bg);
    padding: var(--spacing-sm);
    z-index: 100;
    text-decoration: none;
}

.skip-link:focus { top: 0; }

/* Links */
a { color: var(--link-color); text-decoration: underline; }
a:visited { color: var(--link-visited-color); }
a:hover, a:focus { color: var(--link-hover-color); }

/* Buttons */
button, .btn {
    background: var(--button-bg);
    color: var(--button-text-color);
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.3;
    font-size: var(--text-size-md);
}

button:hover, .btn:hover,
button:focus, .btn:focus {
    background: var(--button-hover-bg);
    color: #ffffff;
    outline: 2px solid var(--button-hover-bg);
    outline-offset: 2px;
}

/* Responsive Media */
img, picture, svg, video { max-width: 100%; height: auto; }

.videoWrapper { position: relative; padding-top: 25px; height: 0; }
.videoWrapper.ratio-16-9 { padding-bottom: 56.25%; }
.videoWrapper.ratio-4-3 { padding-bottom: 75%; }
.videoWrapper iframe { position: absolute; top:0; left:0; width:100%; height:100%; }