/* BODY */
body {
  background-image: url('bacckground.gif');
  background-color: #4d1f25;
  font-family:Helvetica;
  font-size: 100%;
    display: flex;
    flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
}
div {
  display: block;
}

article {
display: block; 
margin: 5px 1%;
text-align: center;
flex: 0 0 calc(100% - 20px); /* 20% width with 20px gap */
max-width: calc(70% - 20px); /* 20% width with 20px gap */
max-height: 100%;
padding: 10px;
      
color: #69c3e0;
text-shadow: -1px 1px #2d839f, 0 1px #2d839f, -1px 0 #2d839f;
border-style: solid;
border-width: 10px;
border-color: black;
border-radius: 10px;
background-color: black;

}

img {
  width: 70%; /* Default width for images */
  max-height: calc(20% - 20px);
  object-fit: contain; /* Scale image to fit within the dimensions of the container */
  display: block; /* Remove default bottom margin on images */
  margin: 0 auto; /* Center the image within the article */
  }

     
/* HEADINGS 1, 2, & 3 */
h1 {
  font-size: 2.5em;
  color: #e0ce67;
  text-shadow: -1px 1px #e0ce67, 0 1px #e0ce67, -1px 0 #e0ce67, -2px 2px #2d839f, -3px 2px #2d839f, -2px 3px #2d839f, -3px 3px #2d839f, -4px 4px #1f5a6d, -4px 5px #1f5a6d, -5px 4px #1f5a6d, -5px 5px #1f5a6d;
  letter-spacing: 7px;
  margin: 6% 4% 2% 4%;
  text-align: center;
  display:block;
       opacity: 1;
      transition: opacity 0.5s ease-in-out;
  }

h2 {
  color: #e0ce67;
  text-shadow: -1px 1px #e0ce67, 0 1px #e0ce67, -1px 0 #e0ce67, -2px 2px #2d839f, -3px 2px #2d839f, -2px 3px #2d839f, -3px 3px #2d839f, -4px 4px #1f5a6d, -4px 5px #1f5a6d, -5px 4px #1f5a6d, -5px 5px #1f5a6d;
  letter-spacing: 5px;
  text-align: center;
}
h3 {
  letter-spacing: 4px;
  text-align: center;
}


p {
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100%;
  display:block;
}

#link {
  background-color: black;
  padding: 16px;
   color: #e0ce67;
  text-shadow: -1px 1px #e0ce67, 0 1px #e0ce67, -1px 0 #e0ce67, -2px 2px #2d839f, -3px 2px #2d839f, -2px 3px #2d839f, -3px 3px #2d839f, -4px 4px #1f5a6d, -4px 5px #1f5a6d, -5px 4px #1f5a6d, -5px 5px #1f5a6d;
  letter-spacing: 5px;
  display: block;
  float: left;
  font-size: 120%;
}

li {
  float: left}

li a {
  display: block;
  color: #f2aeb7;
  padding: 17px;
  text-decoration: none;
  float: left;
}

/* Change the link color on hover */
li a:hover {
  background-color: #1f5a6d;
  color: #ead24b;
  text-shadow: -1px 1px #e0ce67, 0 1px #e0ce67, -1px 0 #e0ce67, -2px 2px #2d839f, -3px 2px #2d839f, -2px 3px #2d839f, -3px 3px #2d839f;
}

/*links*/
a {
  color: #f2aeb7;
}
a:link {
  color: #da7b87;
  text-decoration: none;   
}
a:visted {
  color:#ead24b;
}
a:hover { 
  color: #ead24b;
  text-decoration: none;
}
a:active {
  color: #ead24b;
  font-style: italic;
}


footer {
padding: 5px;
text-align: center; 
}

/*styles*/

#navigation {
  display: block;
  list-style-type: none;
  padding: 0; 
  background-color: #4d1f25;
  font-size: 100%; 
  
  position: fixed; /* Fixed positioning to keep it always visible */
  top: 0;
  width: 100%;
  z-index: 2; /* Higher z-index to be above the header */
}

#header-container {
  position: relative;
  z-index: 1; /* Ensure the header is above other content */
}

#head2 {
  border-style: dotted;
  border-width: 5px;
  border-color: #da7b87;
  border-radius: 10px;
  background-color: black;
  padding: 15px;
  display: block;
}


#head1 {
  border-style: dotted;
  border-width: 10px;
  border-color: #da7b87;
  border-radius: 10px;
  background-color: black;
  padding: 25px;
  display: block;
}

/* Color IDs */
#pink {
  color: #da7b87;
}
#yellow {
  color: #ead24b;
}
#dteal {
  color: #1f5a6d;
}
#lteal {
  color: #2d839f;
}

/* COLOR SHADOW IDS */
#paratshad {
  color: #69c3e0;
  text-shadow: -1px 1px #2d839f, 0 1px #2d839f, -1px 0 #2d839f;
}
#parapshad {
  color: #f2aeb7;
  text-shadow: -1px 1px #da7b87, 0px 1px #da7b87, -1px 0px #da7b87;
}
#yellow-shadow {
  color: #ead24b;
  text-shadow: -1px 1px #e0ce67, 0 1px #e0ce67, -1px 0 #e0ce67, -2px 2px #2d839f, -3px 2px #2d839f, -2px 3px #2d839f, -3px 3px #2d839f, -4px 4px #1f5a6d, -4px 5px #1f5a6d, -5px 4px #1f5a6d, -5px 5px #1f5a6d;
}
#pink-shadow {
  color: #f2aeb7;
  text-shadow: -1px 1px #f2aeb7, 0 1px #f2aeb7, -1px 0 #f2aeb7, -2px 2px #2d839f, -3px 2px #2d839f, -2px 3px #2d839f, -3px 3px #2d839f, -4px 4px #1f5a6d, -4px 5px #1f5a6d, -5px 4px #1f5a6d, -5px 5px #1f5a6d;
}
#teal-shadow {
  color: #69c3e0;
  text-shadow: -1px 1px #69c3e0, 0 1px #69c3e0, -1px 0 #69c3e0, -2px 2px #2d839f, -3px 2px #2d839f, -2px 3px #2d839f, -3px 3px #2d839f, -4px 4px #1f5a6d, -4px 5px #1f5a6d, -5px 4px #1f5a6d, -5px 5px #1f5a6d;
}

/* image boarder */
#imgbdr {
  border-style: solid;
  border-width: 10px;
  border-color: black;
  border-radius: 10px;
  background-color: black;
}

/*Image Article format */
#imgart{
  display: inline-block; 
margin: 5px 1%;
text-align: center;
flex: 0 0 calc(20% - 20px); /* 20% width with 20px gap */
max-width: calc(20% - 20px); /* 20% width with 20px gap */
max-height: 25%;
padding: 10px;
overflow: hidden; /* Hide overflow to prevent content from extending beyond the article */
      
color: #69c3e0;
text-shadow: -1px 1px #2d839f, 0 1px #2d839f, -1px 0 #2d839f;
border-style: solid;
border-width: 10px;
border-color: black;
border-radius: 10px;
background-color: black;
  }