body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
}

body#specialPage {
  background-image: url('img/go-live.PNG');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* Add a light background color to the top navigation */
.topnav {
  background-color: #f2f2f2;
  overflow: hidden;
  box-shadow: 0px 1px 5px rgba(0,0,0,0.1); /* Add a subtle shadow to give depth */
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Change the font to Segoe UI */
  transition: background-color .3s; /* Add a transition effect when hovering over a link */
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50; /* You can change this to any color you prefer */
  color: white;
}

/* Hide the icon that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* Style for page content */
.content {
  padding: 14px;
  font-size: 22px;
}

/* When the screen is less than 800 pixels wide */
@media screen and (max-width: 800px) {
  /* Hide all links, except for the selected tab */
  .topnav a:not(.active) {
    display: none;
  }

  /* Show the icon that should open and close the topnav */
  .topnav a.icon {
    float: right;
    display: block;
    color: #333; /* Change this to match the color of your icons */
    transition: color .3s; /* Add a transition effect when hovering over the icon */
  }
}

/* When the screen is less than 800 pixels wide, if the user clicks on the icon */
/* the "responsive" class attribute will be added to the topnav by the JavaScript code */
/* This media query sets the style for the unfolded topnav */
/* It makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
  .topnav.responsive {
    position: relative;
    background-color: #f2f2f2; /* Match this with your topnav background color */
    box-shadow: none; /* Remove shadow on small screens for a cleaner look */
  }

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
    color: #333; /* Match this with your icon color */
    transition: color .3s; /* Add a transition effect when hovering over the icon */
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    color: #333; /* Match this with your link color */
    border-top: solid thin #ddd; /* Add a border between links for clarity */
    transition: background-color .3s; /* Add a transition effect when hovering over a link */
 }
 
}