body {
     font-family: Arial, Helvetica, sans-serif;
     margin: 0;
 }
 
 .navbar {
     overflow: hidden;
     background-color: #333;
 }
 
 .navbar a {
     float: left;
     font-size: 16px;
     color: white;
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
 }
 
 .dropdown {
     float: left;
     overflow: hidden;
 }
 
 .dropdown .dropbtn {
     font-size: 16px;
     border: none;
     outline: none;
     color: white;
     padding: 14px 16px;
     background-color: inherit;
     font-family: inherit;
     margin: 0;
 }
 
 .navbar a:hover,
 .dropdown:hover .dropbtn {
     background-color: red;
 }
 
 .subnav {
     float: left;
     overflow: hidden;
 }
 
 .subnav .subnavbtn {
     font-size: 16px;
     border: none;
     outline: none;
     color: white;
     padding: 14px 16px;
     background-color: inherit;
     font-family: inherit;
     margin: 0;
 }
 
 .subnav-content {
     display: none;
     position: absolute;
     left: 0;
     background-color: hwb(32 0% 0%);
     ;
     width: 100%;
     z-index: 1;
 }
 
 .subnav-content a {
     float: left;
     color: white;
     text-decoration: none;
 }
 
 .subnav-content a:hover {
     background-color: #eee;
     color: black;
 }
 
 .subnav:hover .subnav-content {
     display: block;
 }
 
 .dropdown-content {
     display: none;
     position: absolute;
     background-color: #f9f9f9;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     z-index: 1;
 }
 
 .dropdown-content a {
     float: none;
     color: black;
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     text-align: left;
 }
 
 .dropdown-content a:hover {
     background-color: #f90808;
 }
 
 .dropdown:hover .dropdown-content {
     display: block;
 }
 /* Example CSS */
 
 .container {
     width: 100%;
     padding: 20px;
 }
 /* Desktop styles */
 
 @media (min-width: 768px) {
     .container {
         width: 80%;
         margin: auto;
     }
 }
 /* Mobile styles */
 
 @media (max-width: 767px) {
     .container {
         width: 100%;
         padding: 10px;
     }
 }
 
 img {
     max-width: 100%;
     height: auto;
 }
 
 ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
 
 li {
     position: relative;
 }
 
 li a {
     display: block;
     padding: 8px 16px;
     text-decoration: none;
     background-color: #f0f0f0;
     color: #333;
 }
 
 li a:hover {
     background-color: #ddd;
 }
 /* Hide the nested lists by default */
 
 ul ul {
     display: none;
     position: absolute;
     left: 100%;
     top: 0;
 }
 
 ul ul ul {
     left: 100%;
     top: 0;
 }
 /* Show the nested list when the parent list item is hovered */
 
 li:hover>ul {
     display: block;
 }