h1 {
color: #000000;
font-family: arial, sans-serif;
font-size: 40px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 1px;
}


h2 {
	  display: block;
  font-family: arial, sans-serif;
font-size: 35px;
  margin-before: 0.83em;
  margin-after: 0.83em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}


h3 {
  color: #000000;
  display: block;
 font-family: arial, sans-serif;
 font-size: 30px;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}


h4 {
  display: block;
font-family: arial, sans-serif;
font-size: 25px;
  margin-before: 1.33em;
  margin-after: 1.33em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}


h5 {
  display: block;
 font-family: arial, sans-serif;
 font-size: 20px;
  margin-before: 1.67em;
  margin-after: 1.67em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}


h6 {
  display: block;
 font-family: arial, sans-serif;
 font-size: 15px;
  margin-before: 2.33em;
  margin-after: 2.33em;
  margin-start: 0;
  margin-end: 0;
  font-weight: bold;
}
/*general styles*/
{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
min-height: 100vh;
}

header {
background-color: #007BFF;
color: white;
padding: 1rem;
}

nav {
margin-top: 1rem;
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}

nav a {
color: white;
text-decoration: underline;
font-weight: bold;
}

nav a:hover {
text-decoration: underline;
}

.main {
flex: 1;
display: flex;
flex-wrap: wrap;
padding: 0.5rem;
gap: 1rem;
}

.column {
flex: 1;
min-width: 300px;
background-color: #f2f2f2;
padding: 0.5rem;
border-radius: 8px;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}

body::after {
content: "";
display: block;
height: 60px; /* equal to the footer height */
}