:root{
    --base-size:16px;
	--padding:12px;
	--body-black:#222222;
	--red:#DD1E26;
	--background:#FFF8E5;
}

body {
    background-color: var(--background); 
    padding-bottom: 120px; 
}


p{
	font-family: 'Courier Prime', monospace;
	line-height: 160%;
	color: var(--body-black);
	padding-left: var(--padding);
	padding-right: var(--padding);
	padding-top: var(--padding);
	margin-top: var(--padding);
}

/* Drop caps for paragraphs */
p:first-of-type::first-letter {
  font-size: 3em;
  font-family: 'Anton', sans-serif;
  color: #DD1E26;
  float: left;
  margin-right: 10px;
  line-height: 1;
}

h1{
    font-family: 'Anton';
    color: var(--background);
    -webkit-text-stroke: 1px #DD1E26;
    text-align: center;
    font-size: calc(var(--base-size)*2.5);
    padding-bottom: 0;
    margin-bottom: 0;
	background-color: var(--background);
}


cite{
  color: #000000;
	font-family: 'Anton';
	letter-spacing: 2px;
  text-align: center;
  text-transform: capitalize;
}

.Title {
    font-family: 'Climate Crisis';
    font-size: calc(var(--base-size)*2.6);
    letter-spacing: -3px;
    color: var(--red);
    text-align: center;
    text-transform: lowercase;
    display: inline-block; 
   }

   .NotTitle{
    letter-spacing: 20px;
    text-align: center;
  }



h2{
    font-family: 'Anton';
    color: var(--background);
    -webkit-text-stroke: 1px #DD1E26;
    text-align: center;
    font-size: calc(var(--base-size)*1.8);
    margin: var(--padding);
	background-color: var(--background);

}


/* Highlight some words for emphasis */
.highlight {
  font-family: 'Anton', sans-serif;
  background-color: black;
  color: #DD1E26;
  padding: 2px 4px; /* Adds spacing inside the highlight */
  border-radius: 2px; /* Optional for a softer look */
  display: inline;
}

    /* Navigation */
    /* Navbar Container */
    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--red);
      padding: 10px 20px; /* Space around the navbar */
      position: fixed; /* Fix the navbar to the bottom of the viewport */
      bottom: 0; /* Place it at the very bottom */
      left: 0;
      width: 100%; /* Stretch across the full width */
      z-index: 1000; /* Ensure it's on top of other elements */
      box-sizing: border-box;
    }
    
    /* Nav Box Styling */
    .nav-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 90px; /* Consistent box size */
      height: 90px;
      background-color: #FFF6E5; /* Cream background */
      text-decoration: none;
      font-family: 'Climate Crisis', sans-serif;
      color: #D72638; /* Red text */
    }
    
    
    /* Glyph Group Styling */
    .glyph-group {
      display: flex;
      gap: 0px; /* Spacing between each glyph in the group */
      justify-content: center;
      align-items: center;
    }
    
    /* Glyph Group Styling */
    .glyph {
      display: flex;
      flex-direction: column; /* Stack dashes vertically */
      justify-content: center;
      align-items: center;
      gap: 8px; /* Tighter spacing between dashes */
    }
    
    .glyph div {
      width: 40px; /* Dash length */
      height: 10px; /* Dash thickness */
      background-color: #D72638; /* Red to match navbar */
    }
    
    /* Spacing */
    .glyph-one, .glyph-two, .glyph-three {
      margin: 0 10px; /* Closer spacing between glyphs */
    }
    
    .home-button, .next-button {
      font-size: 40px;
      margin: 0 30px; /* Equal spacing for H and > */
    }



    @media (max-width: 550px) {
      .glyph-group {
        display: none; /* Hide glyph group on mobile */
      }
      .nav-box {
        width: 50%; /* Each button takes half the navbar's width */
        height: 100%; /* Full height of the navbar */
        flex: 1;
        height: 40px;
        justify-content: center; /* Center content horizontally */
        align-items: center; /* Center content vertically */
        padding: 0; /* Remove padding */
        margin: 0; /* Remove margins */
        border-left: 1px solid var(--red); /* Add a divider between buttons */
 
      }
    
      .navbar {
        padding: 0;
      
      }

      .nav-box:first-child {
        border-left: none; /* Remove border for the first button */
      }
      
      .home-button, .next-button {
        font-size: calc(var(--base-size)*1.8); /* Adjust font size for mobile */
        margin: 10px 10px;
        height: calc(var(--base-size)*3);
      }
    }

  @media (min-width: 800px) {

    cite{
      font-size: calc(var(--base-size)*2);
      letter-spacing: 2px;
      line-height: 0.2;
    }


/* Hover Effect */
.nav-box:hover {
  transform: scale(1.1); /* Scale effect on hover */
}

.nav-box {
  transition: background-color 0.3s ease, transform 0.3s ease;
}


/* Hover animatiosn for every button */
.home-button:hover .button-icon {
  content: "↗"; /* Change to diagonal arrow */
  font-size: 50px; /* Slightly increase size */
  transform: rotate(20deg); /* Add a playful rotation */
  transition: transform 0.3s ease, font-size 0.3s ease;
  color: #000000;
}


.glyph-one:hover .button-icon {
  transform: rotate(45deg); /* Rotate slightly */
  transition: transform 0.3s ease;
}

.glyph-one:hover .glyph div {
  background-color: #000000; /* Make the line (glyph) black */
  transition: background-color 0.3s ease;
}



.glyph-two:hover .glyph div:nth-child(1) {
  transform: translateY(-5px); /* Move first line up */
  transition: transform 0.3s ease;
  background-color: #000000; 
}

.glyph-two:hover .glyph div:nth-child(2) {
  transform: translateY(5px); /* Move second line down */
  transition: transform 0.3s ease;
  background-color: #000000; 
}




.glyph-three:hover .glyph div:nth-child(1) {
  transform: rotate(10deg); /* Skew first line slightly */
  transition: transform 0.3s ease;
  background-color: #000000; 

}

.glyph-three:hover .glyph div:nth-child(2) {
  transform: rotate(-10deg); /* Skew second line in the opposite direction */
  transition: transform 0.3s ease;
  background-color: #000000; 

}

.glyph-three:hover .glyph div:nth-child(3) {
  transform: rotate(15deg); /* Skew third line a bit more */
  transition: transform 0.3s ease;
  background-color: #000000; 

}


.next-button:hover .button-icon {
  transform: translateX(10px); 
  transition: transform 0.3s ease;
  color: #000000; 

}




  }