* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    margin: 0;
    padding: 0;
    
  }
  
header {
    background-color: #432f11; color: white; font-size: 1.25em; font-family: 'Courier New', Courier, monospace;border-bottom: 3px solid orange;
    padding: 0.5em; color: gray; }
  

p {margin-bottom: 1.5em;}

  
  li {
    display: inline;
    margin-right: 2em;
    margin-left: 2em;
  }

  li a {color: yellow; text-decoration: none;}




  h2 {margin-bottom: 1em; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size: 4vw; text-align: center; margin-bottom: 0.75em; }
  h3 {margin-top: 0.5em; margin-bottom: 1em; color: orange;}

  
  
 
  .reasons li {
    display: block; margin: 0px;/* Ensure .reasons is behaving as a block-level container */
  }

  .reasons li a {color: orange;}

  


  .content {
    margin: 0 auto;
    max-width: 1222px;
    line-height: 2.5em;
    padding-top: 2em;
    font-size: 1.25em;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
}



/* Hide the checkbox */
#menu-toggle {
    display: none;
}

/* Hamburger Icon Styles */
.menu-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
    width: 30px;
    height: 25px;
    justify-content: space-between;
}

.bar {
    width: 30px;
    height: 4px;
    background-color: white;
    border-radius: 2px;
}

a:hover {
  color: skyblue;
  text-decoration: underline;
}

.good-friday-timeline {margin: 0 auto; max-width: 1222px; font-size: 1.25em; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; padding: 1em}

/* Responsive for smaller screens */
@media (max-width: 1222px) {

  h2 {font-size: 4vh;}

  .content {font-size: 1.1em;}
    .menu-icon {
        display: flex;
    }

    .menu {
        display: none;
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
    }

    .menu li {
        text-align: center;
        padding: 15px;
        border-top: 1px solid #444;
    }

    /* Show menu when checkbox is checked */
    #menu-toggle:checked + .menu-icon + .menu {
        display: flex;
    }
}

  
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #222;
      color: #ffffff;
    }

    a {
        color: #bb86fc;
      }

 
    

      header {border-color: white;}
  }

  @media (max-width: 1919px) {
.content {display: block; padding: 1em; }
  }