* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
}

body {
  font-family: Helvetica, Arial, Sans-Serif;
  font-style: italic;
  min-height: 100vh;
  background: url("../img/madlum.jpg") no-repeat center center/cover;
  filter: saturate(150%) contrast(110%) hue-rotate(5deg);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6vw;
  width: 100%;
  position: sticky;
  top: 0;
  background: transparent;
  box-shadow: 0 1vw 2vw rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(1vw);
  z-index: 999;
}

.navbar-container {
  /* menu area */
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 0vw;
  max-width: 160vw;
  background-color: #1f3a06;
  font-size: 3.5vw;
  line-height: 4vw;
  margin: 0vw 0 0 0vw;
  text-shadow: 0.1vw 0.1vw 0.2vw #dfc014;
}

.navbar-logo {
  /* menu logo */
  font-weight: 600;
  width: 10%;
  margin: 0.5vw 0 0 1vw;
  text-decoration: none;
}

.navbar-container .navbar-menu {
  display: flex;
  text-align: center;
  gap: 1.5vw;
  list-style: none;
}

.navbar-container .navbar-menu li a {
  /* menu text */
  text-decoration: none;
  color: magenta;
  font-size: 2.5vw;
  font-weight: bold;
  padding: 0.3vw 2vw;
  border-radius: 2vw;
  border: 0.2vw solid transparent;
  transition: all 0.7s ease;
  white-space: nowrap;
}

.navbar-container .navbar-menu li a:hover,
.navbar-container .navbar-menu li a.active {
  color: #fff;
  border: 0.2vw solid #fff;
}

.navbar-toggle {
  display: none;
  background: transparent;
  padding: 1.5vw;
  border: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 2.5vw;
  height: 0.3vw;
  margin: 0.5vw auto;
  background: #fff;
  transition: all 0.3s ease-in-out;
}

.fa fa-volume-up,
.fa-volume-up {
  font-size: 1.5vw;
  color: red;
  opacity: 1;
  border: 0.1vw solid red;
  background: white;
  cursor: pointer;
}

.enclosed-text {
  border: 0.2vw solid black; /* Sets the border width, style, and color */
  padding: 1.5vw; /* Adds space between the text and the border */
  margin: 1vw 0; /* Adds space above and below the enclosed text */
  background-color: #f9f9f9; /* Optional: adds a light background color */
  border-radius: 0.5vw; /* Optional: rounds the corners */
  width: 80%; /* Optional: sets the width of the box */
}

.container {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background-color: #4caf50;
  padding: 1vw 0vw 1vw 0vw; /* top right bottom left */
}

.box {
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding: 2vw 2vw 2vw 2vw; /* top right bottom left */
  background-color: #4caf50;
}

a:link {
  color: #fff;
  font-style: italic;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: magenta;
  background-color: transparent;
  text-decoration: none;
}

h7,
h8 {
  position: absolute;
  color: magenta;
  font-weight: bold;
}

h9 {
  position: absolute;
}

h10 {
  position: absolute;
  color: red;
  font-weight: bold;
}

h11 {
  color: white;
  text-align: center;
  text-shadow: 0.1vw 0.1vw 0.1vw magenta;
}

h12 {
  text-align: center;
  color: #000000;
}

h13 {
  position: absolute;
  color: blue;
}

h14 {
  color: #000000;
  text-align: center;
}

h15 {
  color: #000000;
  text-align: center;
}

.myButton {
  display: flex;
  background-color: green; /* For browsers that do not support gradients */
  background-image: linear-gradient(yellow, green);
  font-weight: bold;
  text-align: center;
  align-items: center;
  justify-content: center;
  color: magenta;
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
}

.table1,	/* glossary */
.table2,	/* poetry */
.table3,	/* # */
.table5 {
  /* # */
  width: 100%;
  max-width: 70vw;
  margin: 0vw 0 0 12vw;
  background-color: #4caf50;
  overflow: hidden;
  cursor: pointer;
}

.table4 {
  /* includes */
  width: 100%;
  max-width: 60vw;
  margin-left: auto;
  margin-right: auto;
  background-color: #4caf50;
  overflow: hidden;
  cursor: pointer;
}

.table1 thead th,	/* glossary */
.table1 thead tr,
.table2 thead th,	/* poetry */
.table2 thead tr,
.table3 thead th,	/* # */
.table3 thead tr,
.table4 thead th,	/* # */
.table4 thead tr,
.table5 thead th,	/* # */
.table5 thead tr {
  color: #000000;
  font-weight: medium;
}

.table1 thead th,	/* glossary */
.table1 thead tr,
.table2 thead th,	/* poetry */
.table2 thead tr {
  text-align: center;
}

.table1 th,		/* glossary */
.table1 td,
.table2 th,		/* poetry */
.table2 td,
.table3 thead th,	/* # */
.table3 thead tr,
.table3 th,		/* # */
.table3 td,
.table4 thead th,	/* includes */
.table4 thead tr,
.table4 th,	 	/* includes */
.table4 td,
.table5 thead th,	/* # */
.table5 thead tr,
.table5 th,		/* # */
.table5 td {
  color: #000000;
}

.table1,	/* glossary */
.table2,	/* poetry */
.table3,
.table4,	/* includes */
.table5 {
  margin-top: 4vw;
}

.table2 thead th,	 /* poetry heading */
.table5 thead th {
  font-size: 2vw;
  line-height: 2.5vw;
  border: 0.15vw solid;
}

.table2 tr td,	/* poetry members */
.table5 tr td {
  font-size: 1.75vw;
  line-height: 2.25vw;
  border: 0.15vw solid;
  padding: 0vw 4vw 0vw 4vw;
}

.table1 thead th {
  /* glossary */
  font-size: 4vw;
  line-height: 4vw;
  border: 0.15vw solid;
  padding: 0vw 0vw 0vw 3vw;
}

.table1 tr td {
  /* glossary */
  font-size: 3vw;
  line-height: 3.5vw;
  color: #000000;
  border: 0.15vw solid;
  padding: 2vw 1vw 1vw 2vw;
}

.table3 thead th,
.table4 thead th {
  /* includes */
  font-size: 2vw;
  line-height: 2vw;
  border: 0.15vw solid;
  padding: 0vw 0vw 0vw 3vw;
}

.table3 tr td,
.table4 tr td {
  /* includes */
  font-size: 1.75vw;
  line-height: 2.5vw;
  color: #000000;
  border: 0.15vw solid;
  padding: 0vw 1vw 0vw 1vw;
}

.myButton {
  width: 9vw;
  height: 2.5vw;
  border-radius: 1.5vw;
  font-size: 1.5vw;
}

.fa fa-volume-up,
.fa-volume-up {
  font-size: 1.5vw;
  color: red;
  opacity: 1;
  border: 0.1vw solid red;
  background: white;
  cursor: pointer;
}

.container {
  width: 80%;
  max-width: 40vw;
  font-size: 1.5vw;
  color: yellow;
  line-height: 2.5vw;
  text-align: justify;
  border: 0.1vw solid magenta;
  margin: 2vw 0 0 27vw;
}

.box {
  width: 100%;
  max-width: 80vw;
  font-size: 1.5vw;
  line-height: 2vw;
  color: #000000;
  text-align: justify;
  border: 0.1vw solid magenta;
  margin: 5vw 0 0 8.5vw;
}

h7 {
  font-size: 3vw;
  line-height: 3.5vw;
  text-shadow: 0.2vw 0.2vw 0.4vw yellow;
  margin: 0vw 0 0 6vw;
}
h8 {
  font-size: 2.5vw;
  line-height: 3vw;
  text-shadow: 0.2vw 0.2vw 0.4vw yellow;
  margin: 1vw 0 0 24vw;
}

h11 {
  font-size: 2vw;
  line-height: 2vw;
  margin: 0vw 0 0 2vw;
}

h12 {
  font-size: 1.5vw;
  line-height: 2vw;
}

h13 {
  font-size: 2vw;
  line-height: 2vw;
  margin: -3vw 0 0 22vw;
}

h14 {
  font-size: 1.5vw;
  line-height: 1.5vw;
  margin-top: 0vw;
}

h15 {
  font-size: 1.25vw;
  line-height: 1.5vw;
  margin-top: 0vw;
}

@media (max-width: 88vw) {
  .navbar {
    backdrop-filter: none;
  }

  .navbar-container .navbar-menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.7vw !important;
    position: absolute;
    height: 100vh;
    width: 25vw;
    top: 0;
    right: 0;
    padding: 0.5vw 1.5vw;
    box-shadow: 0 1vw 1vw rgba(0 0 0 o.5);
    backdrop-filter: blur(1vw);
  }

  .navbar-container .navbar-menu.active {
    display: flex;
  }

  .navbar-toggle {
    display: block;
    z-index: 999;
  }

  .navbar-toggle.active .bar:nth-child(2) {
    opacity: 0;
  }

  .navbar-toggle.active .bar:nth-child(1) {
    transform: translateY(0.8vw) rotate(45deg);
  }

  .navbar-toggle.active .bar:nth-child(3) {
    transform: translateY(-0.8vw) rotate(-45deg);
  }

  .fa fa-volume-up,
  .fa-volume-up {
    font-size: 1.5vw;
    color: red;
    opacity: 1;
    border: 0.1vw solid red;
    background: white;
    cursor: pointer;
  }

  .container {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background-color: #4caf50;
    padding: 1vw 0vw 1vw 0vw; /* top right bottom left */
  }

  .box {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

@media (max-width: 48vw) {
  .navbar-container {
    padding: 0 1vw;
  }

  /*  .navbar-logo {
    font-size: 1.7vw;
  }	*/

  .navbar-container .navbar-menu li a {
    font-size: 1.2vw;
    padding: 0.3vw 1.5vw;
  }
}