/* page styling css, navigation bar and footer (if used at a later date). used on all pages*/
/* Tested and uploaded 19 Dec 2023*/

/*set overall webpage appearance*/
body {
  font-family: Tahoma; /* to cover slides and any other text*/
  margin: 4px;
  margin-top: 30px; /*greater at the top to deal with navbar*/
}

@media screen and (max-device-width: 380px) {
  body{
      margin-top: 70px; /*navbar on 2 lines hence larger top*/
}
}

.blck1 {
/* used on all pages*/
  margin-right: 20px;
  margin-left: 20px;
}

/*top navigation header*/
.navbar {
  overflow: hidden;
  background-color: #111111;
  position: fixed;
  top: 0px;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  z-index: 99;
  font-family: Tahoma;
  color: #f2f2f2;
  text-align: center;
  padding: 1.4rem 2.6rem;
  text-decoration: none;
  font-size: 1.7rem;
}

@media screen and (max-device-width: 660px) {
/*header reduces in size for small screen */
.navbar a {
  padding: 1.0rem 1.2rem;
  font-size: 1.5rem;
}
}

@media screen and (max-device-width: 465px) {
/*header reduces in size for small screen */
.navbar a {
  padding: 0.8rem 0.5rem;
  font-size: 1.4rem;
}
}

.active {
  background-color: #008000;
}

.navbar .icon {
  display: none;
}

/* only some of the details below are currently used */
/* details for mouse hover used for all*/
.navbar a:hover, footer a:hover, .dropdown:hover, .dropdown-content a:hover, .dropbtn {
  background-color: #fff111;
  color: red;
}