/* Basic Reset */

 * {

     margin: 0;

     padding: 0;

     box-sizing: border-box;

 }



 /* Base Styles */

 body {

     font-family: "Cinzel Decorative", serif;

     background: #e0f0ff;
     /* Light blue background */

     color: #333;

     line-height: 1.6;

 }



 header,
 footer {

     background-color: #1e3a5f;
     /* Deep blue */

     color: #fff;

     text-align: center;

     padding: 1rem;

 }



 header h1 {

     font-size: 1.8rem;

 }



 nav {

     background-color: #2c5d8a;

     padding: 0.5rem;

 }



 nav ul {

     display: flex;

     justify-content: center;

     list-style: none;

 }



 nav li {

     margin: 0 1rem;

 }



 nav a {

     color: #fff;

     text-decoration: none;

     font-weight: bold;

 }



 main {

     padding: 1rem;

 }



 /* Article container with a classical art style */

 article {

     max-width: 800px;

     margin: 2rem auto;

     background: #fff;

     border: 3px solid #1e3a5f;

     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

     padding: 1rem;

 }



 article h2 {

     margin-bottom: 1rem;

     font-size: 1.6rem;

     color: #1e3a5f;

 }



 figure {

     margin: 1rem auto;

     max-width: 100%;

     border: 2px solid #2c5d8a;

     padding: 0.5rem;

     background-color: #f8f9fd;

     text-align: center;

 }



 figcaption {

     margin-top: 0.5rem;

     font-style: italic;

     color: #555;

 }



 /* Keyframe Animation for the image */

 #car {

     display: block;

     margin: 0 auto;

     max-width: 100%;

     animation-name: walkingAround;

     animation-duration: 9s;

     animation-fill-mode: forwards;

     animation-iteration-count: infinite;

 }



 @keyframes walkingAround {

     0% {

         transform: translateX(0px);

     }

     48% {

         transform: translateX(600px);

     }

     50% {

         transform: rotateY(180deg) translateX(-600px);

     }

     98% {

         transform: translateX(0px) rotateY(180deg);

     }

     100% {

         transform: translateX(0px);

     }

 }



 /* Responsive Design: For screens wider than 768px */

 @media (min-width: 768px) {

     header h1 {

         font-size: 2.2rem;

     }

     main {

         padding: 2rem;

     }

     article {

         margin: 3rem auto;

     }

 }