body {
background-color:WhiteSmoke;
font-family: "Times New Roman", Times, serif;
font-size: 20px;

}


.header {
  background-color: OrangeRed;
  text-align: left;
  padding: 10px;
opacity: 1.0;
}

/* make some different types of columns */
.columnbig {
  float: left;
  width: 50%;
}

.columnsmall {
  float: left;
  width: 50%;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .columna {
    width: 100%;
  }
}

@media screen and (max-width:600px) {
  .columnb {
    width: 100%;
  }
}

.footer {
  background-color: OrangeRed;
  text-align: left;
  padding: 10px;
opacity: 0.6;
}

pwithitems {
text-align:left;
 margin: 20px;
}

p, dl {
text-align:left;
 margin: 20px;
}



dt {
margin: 20px;
    padding: 0 0 0.5em 0;
display: list-item;
  list-style-type: square;
list-style-position: inside;
    }

  dd {
margin:0;
 margin-left:20px;
    font-style: italic;
display: list-item;
    list-style-type: none;
  }

h1 {
color:DimGrey;
font-size: 40px;
}

h2 {
color:DimGrey;
background-color:WhiteSmoke;
opacity: 1.0;
font-size: 30px
}

img {
  float: left;
display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

a {
  color: OrangeRed;
}

a.itemtext {
text-decoration: none; 
}

/* Navigation Menu */  
nav ul {  
    list-style: none; /* Remove bullet points */  
    display: flex; /* Arrange links horizontally (flexbox) */  
    gap: 2rem; /* Space between links */  
}  

nav a {  
    color: white;  
    font-weight: bold;  
    padding: 0.5rem 0; /* Vertical padding for hover effect */  
}  

/* Highlight active page */  

/*
nav a.active {  
    border-bottom: 3px solid OrangeRed;  Orange underline 
}  
*/

nav a:hover {  
    color: OrangeRed; /* Orange color on hover */  
}  

/* Responsive Navigation (Mobile) */  
@media (max-width: 768px) {  
    nav ul {  
        flex-direction: column; /* Stack links vertically on mobile */  
        gap: 1rem;  
        text-align: center;  
    }  
}  
ul {
  list-style-type: none;
  padding: 10px;
  overflow: hidden;
  background-color: WhiteSmoke;
  top: 0;
  width: 100%;
}

ul li {
  float: left;
}

ul li a {
  display: block;
  color: OrangeRed;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover:not(.active) {
  background-color: DimGrey;
}

/*
ul li a.active {
  background-color: DimGrey;
}
*/