style.css

body {
    background-color: #F1F6F9;
    font-family: "Poppins", sans-serif;
    margin: 50px 50px 0 50px;
    display: flex;
    flex-direction: column;
    min-height: 95vh;
  }

  /* Select the <h1> tag that contains the website title */
h1 {
  /* Set the font family to Fira Sans */
  font-family: 'Anton', sans-serif;
  font-family: 'Fira Sans', sans-serif;
  color: #F1F6F9;
  background-color: #212A3E; /* Set the background color for the title */
  text-align: center; /* Center the text within the title */
  position: fixed;
  width: 205px;
  height: 60px;
  top: 50px;
  left: 17px;
  position: fixed;
  z-index: 1;
}

h1 a{
  color: #F1F6F9;
  text-decoration: none;
}

h1:visited {
  color: #F1F6F9; /* Color after the link has been visited */
}

h1:hover {
  color: #F1F6F9; /* Color on hover */
}

h1:active {
  color: #F1F6F9;/* Color when the link is clicked/activated */
}

h3 a{
  color: black;
  text-decoration: none;
}

h3:hover {
  color: black;/* Color when the link is clicked/activated */
}

h3:active {
  color: black;/* Color when the link is clicked/activated */
  text-decoration: none;
}

h3:visited {
  color: black; /* Color after the link has been visited */
  text-decoration: none;
}

h4 {
  font-family: 'Anton', sans-serif;
  font-family: 'Fira Sans', sans-serif;
  color: #F1F6F9;
  text-align: center; /* Center the text within the title */
  position: fixed;
  top: 87px;
  left: 39px;
  z-index: 1;
}

.menu a:link {
  color: #F1F6F9;
  text-decoration: none; /* Remove underline for unvisited links */
}

.menu a:visited {
  color:#F1F6F9; /* Color for visited links */
  text-decoration: none;
}

h3 a{
  color:black;
}

.container{
  display: flex;
  align-items: left;
  flex-direction:column;
  left:0px;
  position: relative;
}

.menu li a {
  text-decoration: none; /* Remove default underline */
}

.menu li a:hover {
  text-decoration: underline; /* Add underline on hover */
}

.menu li:not(:last-child) {
  margin-right: 10px;
}

/* Set styles for the menu */
.menu {
  left: 0;
  background-color: #394867;
  padding: 20px;
  display: flex;
  width: 150px;
  position: fixed;
  top:100px;
  list-style-type: none;
  display: flex;
  flex-direction:column;
}

/* Set styles for the menu items */
.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 20;
  display: inline-flex;
  gap: 10px;
  flex-direction: row;
}

.menu a {
  text-decoration: none;
  color:#F1F6F9;
}

/* Set styles for the content */
@media (min-width: 600px) {
  .content {
    margin-left: 200px; /* Adjust the value to match the menu width */
    padding: 20px;
  }


  .content-wrapper {
    margin-left: 200px;
    padding: 20px;
  }
}

@media (max-width: 600px) {
  .menu {
   position: fixed;
   /* Adjust menu styles for mobile devices, e.g., position: fixed; */
 }

  .menu:hover{
    z-index: 2;
  }

 .content-wrapper {
   position: relative;
   margin-top: 250px;
   width: 100%;
   z-index: 1;
   /* Adjust content wrapper styles for mobile devices, e.g., position: relative; */
 }
}

  .content-wrapper img {
    max-width: 100%;
    height: auto;
  }

  .content-wrapper code {
    max-width: 100%;
    display: inline-block;
    overflow-x: auto;
    white-space: nowrap;
  }


/* Set styles for the content blocks */
.content-block {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 0px;
}

#contact-form input,
#contact-form textarea,
#contact-form button {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  font-family: "Poppins", sans-serif;
}

#contact-form button {
  background-color: #394867;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
}