/* Default styles (apply to all screen sizes unless overridden) */
body {
  font-family: Arial, sans-serif;
  font-size: 1.09rem;
  line-height: 1.6;
  padding: 0.5rem;
}

p {
  font-size: 1.09rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

/* Styles for small screens (e.g., smartphones) */
@media (max-width: 767px) {
  body {
    font-size: 20px;
    padding: 0.5rem;
  }

  p {
    font-size: 20px;
  }
}

/* Styles for large screens (e.g., desktops) */
@media (min-width: 1024px) {
  body {
    font-size: 1.09rem;
    padding: 0.5rem;
  }

  p {
    font-size: 1.09rem;
  }
}


/* h1, h2, h3 {
  margin-left: 0.0rem;
  margin-right: 0.0rem;
}

/* Mobile-first styling */
/* p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-left: 5rem;
  margin-right: 5rem;
}

/* Mobile-first styling */
/* body {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-left: 5rem;
  margin-right: 5rem;
} */ 

/*For tablets and larger screens */
/* @media (min-width: 768px) { */
/* @media (min-width: 200px) {
  body {
    font-size: 1.1rem;
  }
} 

/* For desktops and larger screens */
/* @media (min-width: 1024px) { 
@media (min-width: 768px) {

  body {
    font-size: 1.1rem;
  }
} */

/* Universal paragraph style settings */ 
.basictext {
    line-height: 1.6; /* This is your line spacing */
    font-size: 1.1rem; /* This sets the font size to 10 pixels */
    color: red;
}

@media only screen and (max-width: 767px) {

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
  font-size: 0.8rem;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 0.8rem;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  /* background-color: #4CAF50; */
  background-color: #ffffff;
  color: white;
}

/* Show Only on Mobile */
.mobileShow {display: none;} 

  /* Smartphone Portrait and Landscape */ 
  @media only screen 
    and (min-device-width : 200px) 
    and (max-device-width : 767px){ 
      .mobileShow {display: inline;}
  }
  
/* Show Only on Larger Screens */
.desktopShow {display: none;} 

  /* Large Screen */ 
  @media only screen 
    and (min-device-width : 768px){ 
      .desktopShow {display: inline;}
  }

/* Style for images */
.allpics {
  width: 100%;
  max-width: 560px;
  height: auto;
}

/* Style for mobile logo */
.responsive {
  width: 100%;
  max-width: 200px;
  height: auto;
}

/* Style for desktop logo */
.responsivedesktop {
  width: 100%;
  max-width: 150px;
  height: auto;
}

/* Style for desktop top menu buttons */
.button {
  background-color: #FED700;
  border: none;
  color: black;
  padding: 10px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.8rem;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;
}

/* Style for desktop top menu buttons */
.button:hover {
  background-color: #FED700;
  color: white;
}

/* Style for desktop top menu */
.top-container {
  background-color: white;
  padding: 10px;
  text-align: center;
}

#desktopmenu {
  background-color: #FED700;
  top: 0px;
  position: fixed;
  width: 100%;
  max-width: 1000px;
}

#desktopmenu-wrapper {
  width: 1000px;
  margin: 0 auto;
  text-align: left;
}

#desktopmenu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #FED700;
  color: #0027FE;
}

#desktopmenu li {
  float: left;
  color: white;
  overflow: hidden;
}

#desktopmenu li a, .dropbtn {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 6px 16px;
  text-decoration: none;
}

#desktopmenu li a:hover, .dropdown:hover .dropbtn {
  /* background-color: black; */
  color: #0027FE;
}

#desktopmenu li.dropdown {
  display: inline-block;
}

#desktopmenu .dropdown-content {
  display: none;
  color: white;
  /* position: absolute; */
  position: fixed;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

#desktopmenu .dropdown-content a {
  color: black;
  padding: 6px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

#desktopmenu .dropdown-content a:hover {
  background-color: #FED700;
}

#desktopmenu .dropdown:hover .dropdown-content {
  display: block;
}

#desktopmenu .sticky {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
}

#desktopmenu .sticky + .content {
  overflow: hidden;
  padding-top: 0px;
  width: 100%;
}