/* COLOR PALETTE 
#D2E0FB - light blue
#FEF9D9 - yellow
#DEE5D4 - green 
#8EACCD - dark blue
*/



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

  .container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box; }
  .column,
  .columns {
    width: 100%;
    float: left;
    box-sizing: border-box; }
  
  @media (min-width: 400px) {
    .container {
      width: 100%;
      padding: 0; }
    .columns {
      margin-left: 4%; }
  }
    @media (min-width: 650px) {
    .container {
      width: 100%; }
    .column,
    .columns {
      margin-left: 4%; }
    .column:first-child,
    .columns:first-child {
      margin-left: 0; }
  
    .one.column,
    .one.columns                    { width: 4.66666666667%; }
    .two.columns                    { width: 13.3333333333%; }
    .three.columns                  { width: 22%;            }
    .four.columns                   { width: 30.6666666667%; }
    .five.columns                   { width: 39.3333333333%; }
    .six.columns                    { width: 48%;            }
    .seven.columns                  { width: 56.6666666667%; }
    .eight.columns                  { width: 65.3333333333%; }
    .nine.columns                   { width: 74.0%;          }
    .ten.columns                    { width: 82.6666666667%; }
    .eleven.columns                 { width: 91.3333333333%; }
    .twelve.columns                 { width: 100%; margin-left: 0; }
  
    .one-third.column               { width: 30.6666666667%;}
    .two-thirds.column              { width: 60.3333333333%;}

  
    .one-half.column                { width: 48%; }
  
    /* Offsets */
    .offset-by-one.column,
    .offset-by-one.columns          { margin-left: 8.66666666667%; }
    .offset-by-two.column,
    .offset-by-two.columns          { margin-left: 17.3333333333%; }
    .offset-by-three.column,
    .offset-by-three.columns        { margin-left: 26%;            }
    .offset-by-four.column,
    .offset-by-four.columns         { margin-left: 34.6666666667%; }
    .offset-by-five.column,
    .offset-by-five.columns         { margin-left: 43.3333333333%; }
    .offset-by-six.column,
    .offset-by-six.columns          { margin-left: 52%;            }
    .offset-by-seven.column,
    .offset-by-seven.columns        { margin-left: 60.6666666667%; }
    .offset-by-eight.column,
    .offset-by-eight.columns        { margin-left: 69.3333333333%; }
    .offset-by-nine.column,
    .offset-by-nine.columns         { margin-left: 78.0%;          }
    .offset-by-ten.column,
    .offset-by-ten.columns          { margin-left: 86.6666666667%; }
    .offset-by-eleven.column,
    .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
  
    .offset-by-one-third.column,
    .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }
  
    .offset-by-one-half.column,
    .offset-by-one-half.columns     { margin-left: 52%; }
  
  }
  
  
  /* Base Styles
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* NOTE
  html is set to 62.5% so that all the REM measurements throughout Skeleton
  are based on 10px sizing. So basically 1.5rem = 15px :) */
  html {
    font-size: 62.5%; }
  body {
    font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
    line-height: 1.6;
    font-weight: 400;
    font-family: "Trebuchet MS", Helvetica, sans-serif;;
    color: #232121; }
  
  
  /* Typography
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  h1, h2, h3, h4, h5, h6 {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    font-weight: 300; }
  h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
  h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
  h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
  h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
  h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
  h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: -.01rem; }
  
  /* Larger than phablet */
  @media (min-width: 650px) {
    h1 { font-size: 5.0rem; }
    h2 { font-size: 4.2rem; }
    h3 { font-size: 3.6rem; }
    h4 { font-size: 3.0rem; }
    h5 { font-size: 2.4rem; }
    h6 { font-size: 1.5rem; }
  }
  
  p {
    margin-top: 0; }
  
  
  /* Links
  –––––––––––––––––––––––––––––––––––––––––––––––––– */
  a {
    color: #8EACCD; }
  a:hover {
    color: #8EACCD; }
  











/* Navigation Bar ===========================================================*/
/* Navigation Bar ===========================================================*/
nav {
    list-style-type: none;
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    margin-bottom: 3rem;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    background-color: #FEF9D9;
    align-items: flex;
    height: 55px;
    position: relative;
    z-index: 1000;
}

nav ul {
    list-style-type: none;
    width: 100%;
    max-width: 970px;
    margin: 0 auto;
    margin-bottom: 3rem;
    padding: 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    background-color: #FEF9D9;
    align-items: flex;
    height: 55px;
    position: relative;
    z-index: 1000;
}
nav .site-name {
    display: flex;
    margin-left: -2%;
    width: 50%;
    text-align: center;
}

nav ul li {
    text-align: center;
}
nav ul li a {
    display: block;
    padding: 1em;
    color: rgb(47, 47, 47);
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
}

nav ul li a:hover {
    color: #DEE5D4;
}




@media (max-width: 650px) {
    nav ul {
        display: none;
        margin-top: 0px;
    }
    nav .site-name {
        display: flex;
        margin-left: 0px;
        text-align: center;
    }

    .hamburger {
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        cursor: pointer;
        margin-left: 10px;
        margin-top: 12px;
        margin-bottom: 12px;
    }
    .hamburger span {
        display: block;
        height: 3px;
        background-color: rgb(47, 47, 47);
        border-radius: 3px;
        transition: 0.3s ease;
        margin-top: 10%;
        margin-bottom: 10%;
    }

    nav .container {
        justify-content: space-between; 
        
    }

    .site-name {
        display: block;
        flex: 1;
        text-align: center;
    }

    /* Show menu when toggled by JavaScript */
    nav ul.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 55px;
        left: 0;
        width: 100%;
        height: 240px;
        background-color: #FEF9D9;
    }

    nav ul.open li {
        text-align: center; /* Align text for vertical list */
    }
}




html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* Make the content area take up the remaining space */
.content {
  flex: 1; /* This pushes the footer to the bottom */
}


/* FOOTER */
footer {
  color: #8EACCD;
  text-align: right;
  padding: 20px 0;
  font-size: 1rem; /* Adjusted for readability */
  line-height: 1.6;
  width: 100%;
}

footer p {
  margin: 0;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
}

/* Ensure footer is properly aligned on larger screens */
@media (min-width: 650px) {
  footer p {
      font-size: 1.2rem; /* Slightly larger for larger screens */
  }
}