* {
   margin: 0;
   padding: 0;
   border: none;
   scroll-behavior: smooth;
   font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
}

header {
   width: 100%;
   padding: 30px 20px; /* Adjusted padding for better responsiveness */
   background-color: crimson;
   text-align: center;
   position: sticky;
}

header > a {
   font-size: 20px; /* Adjusted font size */
   font-weight: 300;
   color: white;
   text-decoration: none;
   margin: 0px 15px;
}

header > a:hover {
   color: black;
}

section {
   background-color: rgb(165, 163, 163);
   max-width: 1000px;
   width: 90%; /* Adjusted width to be more flexible */
   height: auto; /* Adjusted height to auto for content expansion */
   margin: auto;
   text-align: center; 
   padding: 20px; /* Added padding for better spacing on smaller screens */
}

section > h1 {
   font-size: 32px; /* Adjusted font size */
}

section > img {
   padding-top: 20px; /* Adjusted padding */
   width: 80%; /* Adjusted width to be more flexible */
   max-width: 350px; /* Maintained a max width */
}

section > h2 {
   font-size: 28px; /* Adjusted font size */
} 

section > p {
   border-top: 2px dotted black;
   padding: 20px;
   font-size: 18px; /* Adjusted font size */
   justify-content: center;
}

.ex1 {
   border-top: 2px dotted black;
   display: grid;
   font-size: 18px; /* Adjusted font size */
   padding: 10px;
   padding-bottom: 5px;
}

.ex1 > h3 {
   flex-direction: row;
}

.ex1 > p {
   align-content: center;
}

footer {
   padding: 30px 20px; /* Adjusted padding */
   max-width: 1000px;
   width: 90%; /* Adjusted width to be more flexible */
   margin: auto;
   background-color: black;
   text-align: center;
}

footer > a {
   color: white;
   text-decoration: none;
   font-size: 24px; /* Adjusted font size */
   margin: 15px;
}

footer > a:hover {
   transform: scale(1.2);
}

footer > p {
   color: slategrey;
   font-size: 18px; /* Adjusted font size */
   margin: 10px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
   header {
       padding: 20px 10px;
   }

   header > a {
       font-size: 18px;
       margin: 0px 10px;
   }

   section > h1 {
       font-size: 28px;
   }

   section > img {
       width: 100%;
       max-width: 300px;
   }

   section > h2 {
       font-size: 24px;
   }

   section > p, .ex1, .ex1 > p, footer > a, footer > p {
       font-size: 16px;
   }

   footer {
       padding: 20px 10px;
   }
}

@media (max-width: 480px) {
   header {
       padding: 15px 5px;
   }

   header > a {
       font-size: 16px;
       margin: 0px 5px;
   }

   section > h1 {
       font-size: 24px;
   }

   section > img {
       width: 100%;
       max-width: 250px;
   }

   section > h2 {
       font-size: 20px;
   }

   section > p, .ex1, .ex1 > p, footer > a, footer > p {
       font-size: 14px;
   }

   footer {
       padding: 15px 5px;
   }
}