:root {
         --primary-color: #3498db;
         --secondary-color: #2c3e50;
         --background-color: #ecf0f1;
         --text-color: #34495e;
         --light-gray: #bdc3c7;
     }

     body {
         font-family: 'Arial', sans-serif;
         margin: 0;
         padding: 0;
         background-color: var(--background-color);
         color: var(--text-color);
         display: flex;
         flex-direction: column;
         min-height: 100vh;
     }

     header {
         background-color: var(--primary-color);
         color: white;
         padding: 20px;
         text-align: center;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     }

     h1 {
         margin: 0;
         font-size: 2.5em;
     }

     main {
         display: flex;
         flex: 1;
     }

     .sidebar {
         width: 200px;
         background-color: var(--light-gray);
         padding: 20px;
     }

     .content {
         flex: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 20px;
     }

     iframe {
         border: none;
         width: 100%;
         max-width: 800px;
         height: 600px;
         /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
         margin-bottom: 20px;
     }

     p {
         max-width: 600px;
         line-height: 1.6;
         text-align: justify;
     }

     footer {
         background-color: var(--secondary-color);
         color: white;
         padding: 20px;
         text-align: center;
     }

     h2 {
         color: var(--secondary-color);
         margin-top: 0;
     }

     @media (max-width: 768px) {
         main {
             flex-direction: column;
         }

         .sidebar {
             width: 100%;
         }
     }