html { 
  background: url('images/unpaved_city_backgroundr.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
/* font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; */

color: #fbfbfb;
}



.inter-tight-a {
  font-family: "Inter Tight", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

h1 {font-size: 6rem; letter-spacing: -6px; font-family: "Inter Tight", sans-serif;}
h2 {font-size: 2rem; letter-spacing: -1px; font-family: "Inter Tight", sans-serif;}
p {font-size: 95%; color:#fbfbfb; font-family: "Inter Tight", sans-serif; line-height: 98%;}

/* unvisited link */
a:link {
  color: #fafafa;
  text-decoration: none;
  font-size: 120%;
  padding-right: 10px;
 font-family: "Inter Tight", sans-serif;
}

/* visited link */
a:visited {
  color: #fafafa;
  text-decoration: none;
  font-size: 120%;
  padding-right: 10px;
  font-family: "Inter Tight", sans-serif;
}

/* mouse over link */
a:hover {
  color: orange;
  text-decoration: none;
  font-size: 120%;
  padding-right: 10px;
  font-family: "Inter Tight", sans-serif;
}

/* selected link */
a:active {
  color: #fafafa;
  text-decoration: none;
  font-size: 120%;
  padding-right: 10px;
font-family: "Inter Tight", sans-serif;
}


.footer {
   position: fixed;
   left: 20;
   bottom: 0;
   width: 100%;
}

body {margin: 30px;}

.ftr {
  position: fixed; /* Fixes the element's position relative to the viewport */
  top: 0;         /* Positions the element at the top edge */
  right: 0;   
margin-top: 25px;
margin-right: 35px;
    
}


.logosize {max-width: 100px;} /* was 60px */






/* ========================================== used for working hamburger screen thing but in the actual php files ===================== */



/* --- Fullscreen Overlay (Hamburger Menu) Styles --- */
.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1000; /* High z-index to ensure it's on top */
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 30px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  color: #f1f1f1; /* Make close button visible on dark background */
}

/* --- Top Right Menu Styles (Desktop) --- */
.top-right-menu {
  display: none; /* Hidden by default, shown on larger screens */
  position: fixed; /* Use fixed for desktop menu too for consistency */
  top: 20px;
  right: 20px;
  z-index: 500; /* Ensure it's above content but below overlay */
}

.top-right-menu a {
  text-decoration: none;
  /* color: #333;
  padding: 10px 15px;
  font-size: 18px;
  margin-left: 10px;
  border: 1px solid #ccc;
  border-radius: 5px; */

  transition: all 0.3s ease;
}

.top-right-menu a:hover {
  /* background-color: #f0f0f0; */
  color: #21046bff;
}

/* --- Mobile Hamburger Trigger Styles --- */
.mobile-nav-trigger {
    /* Use visibility/opacity for smoother transitions and better browser compatibility */
    visibility: visible;
    opacity: 1;
    transition: visibility 0s, opacity 0.5s ease;

    font-size:30px;
    cursor:pointer;
    position: fixed; /* Use fixed positioning for the hamburger */
    top: 20px;
    right: 20px;
    z-index: 900; /* High z-index to be on top of content */
    color: #333; /* Default color for hamburger */
    background-color: white; /* Give it a background for visibility */
    padding: 5px 10px;
    border-radius: 5px;
}

/* --- Media Queries --- */

/* Mobile-first: Hamburger trigger is visible by default */
.top-right-menu {
    display: none; /* Hide desktop menu on small screens */
}

/* When the overlay is active on mobile, hide the hamburger icon using visibility/opacity */
body.overlay-active .mobile-nav-trigger {
    visibility: hidden;
    opacity: 0;
}





/* ========================================== used for working hamburger screen thing but in the actual php files ===================== */



















/* +++++++++++++++++++++++++++++++++ Hamburger menu +++++++++++++++++++++++++++++++++++++++++++++++++++ */



 
/* On screens that are 600px wide or less, the background color is olive  margin: 15px; */
@media screen and (max-width: 400px) {
    
  body {max-width: 95%; 
  
  }
    
    h1 {font-size: 3.3rem; letter-spacing: -3px; margin-top: 80px;}
h2 {font-size: 2rem; letter-spacing: -1px;}
p {font-size: 95%; color:#fbfbfb;}



/* unvisited link */
a:link {
  color: #fafafa;
  text-decoration: none;
  font-size: 100%;
  padding-right: 10px;
 font-family: "Inter Tight", sans-serif;
}

/* visited link */
a:visited {
  color: #fafafa;
  text-decoration: none;
  font-size: 100%;
  padding-right: 10px;
  font-family: "Inter Tight", sans-serif;
}

/* mouse over link */
a:hover {
  color: orange;
  text-decoration: none;
  font-size: 100%;
  padding-right: 10px;
  font-family: "Inter Tight", sans-serif;
}

/* selected link */
a:active {
  color: #fafafa;
  text-decoration: none;
 font-size: 100%;
  padding-right: 10px;
font-family: "Inter Tight", sans-serif;
}

.footer {
   position: fixed;
   left: 20;
   bottom: 0;
   width: 90%;}
   
   .ftr {
  position: fixed; /* Fixes the element's position relative to the viewport */
  top: 0;         /* Positions the element at the top edge */
  right: 0;   
margin-top: 20px;
margin-right: 17px;}

.logosize {max-width: 60px; margin-top: -10px;}

.ruthie-regular {
  font-family: "Ruthie", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 14rem;
  text-align: center;
}



}