body {
   font-family: Arial, sans-serif;
}

#header {
   background-color: #FFFAF0; /* very light orange */
   color: white;
   padding: 10px;
}

#logo, #title, #netopia {
   display: inline-block;
   padding: 10px;
   border-radius: 10px;
   margin: 10px;
}

#logo {
   background-color: navy;
   color: white;
}

#netopia {
   background-color: #FFFAF0;
   color: white;
}

#title {
   background-color: white;
}

#main-menu, #footer {
   background-color: orange;
   padding: 5px;
   width: 1024px;
}

#main-menu a, #footer a {
   color: white;
   text-decoration: none;
   margin: 10px;
}

#main-menu a:hover, #footer a:hover {
   color: navy;
   font-weight: bold;
}

#content {
   display: flex;
}

#info {
   background-color: white; 
   color: navy;
   flex-basis:20%;
   border-radius: 10px;
   margin: 10px;
   padding: 20px;
}

#services {
   flex-basis: 80%;
   display: flex;
   flex-direction: column;
}

#service1 {
   width: 500px;
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
   display: flex;
   justify-content: space-between;
   background-color: #f0f0f0; /* swapped with .right */
   margin: 10px;
}

#service2 {
   width: 500px;
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
   display: flex;
   justify-content: space-between;
   background-color: #FFFFE0; /* light yellow */
   margin: 10px;
}

#service3 {
   width: 500px;
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
   display: flex;
   justify-content: space-between;
   background-color: #E0FFFF; /* light blue */
   margin: 10px;
}

#service4 {
   width: 500px;
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
   display: flex;
   justify-content: space-between;
   background-color: white;;
   margin: 10px;
}

#service0 {
   width: 500px;
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
   background-color: #FFFFE0; /* light yellow */
   margin: 10px;
}

.left, 
{
   width: 40%;
}

.right {
   width: 60%;
}

ul {
   list-style-type: disc;
}