<link rel="stylesheet" href="styles.css">

@font-face {
  font-family: 'MyCustomFont';
  src: url('coder\Bodoni_Moda\BodoniModa-Italic-VariableFont_opsz,wght.ttf') format('ttf'),
       url('fonts/my-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.container {
  position: relative; /* Acts as the anchor point for the image */
  width: 100%;
  min-height: 300px; 
  border: 1px solid #ccc; /* Optional: to visualize the container boundaries */
}

.top-right-image {
  position: absolute; /* Pulls the image out of the normal layout flow */
  top: 0;             /* Flushes the image to the top edge */
  right: 0;           /* Flushes the image to the right edge */
  width: 150px;       /* Optional: adjusts the width of your image */
  height: auto;       /* Maintains aspect ratio */
}
header, .header-section {
    background-color: #00000;
    color: #ffffff;
    padding: 40px 20px;
    text-align: center;
}body {
  background-color: #FFFFFF;   /* Light grey-green background */
  color: #000000;              /* Dark grey body text for high readability */
  font-family: Jost; 
  font-size: 12px;             /* Standard body text size */
  line-height: 1;            /* Accessible vertical spacing between lines */
  margin: 0;                   /* Removes default browser spacing around edge */
  padding: 20px;               /* Adds a comfortable inner margin for content */
}
<nav class="navbar">
        <div class="nav-logo">MyWebsite</div>
        <ul class="nav-links">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

/* Heading 1 styles for the main page title */
h1 {
 text-align: center;
  background-color:transparent;   /* Deep slate blue block background */
  color: #000000;              /* Crisp white text for contrast */
  font-family: Georgia, serif; /* Thick, impactful heading font */
  font-size: 2.5rem;           /* Distinctively large title size */
  font-weight: 900;            /* Heavy weight styling */
  padding: 15px 20px;          /* Inner padding around the title text */
  border-radius: 6px;          /* Softly rounded corners for the background block */
  margin-top: 0;               /* Prevents top spacing issues */
}

/* Heading 2 styles for sub-sections */
h2 {
  background-color: transparent; /* No background fill, lets body color show through */
  color: #000000;              /* Vibrant teal accent color for headers */
  font-family: Jost; /* Elegant serif font to contrast the body text */
  font-size: 24px;           /* Medium header size */
  font-weight: 600;            /* Semi-bold appearance */
  padding-bottom: 8px;         /* Creates breathing room above the line */
  margin-top: px;            /* Adds clear space above a new section */
}


h3 {
  background-color: transparent; /* No background fill, lets body color show through */
  color: #000000;              /* Vibrant teal accent color for headers */
  font-family: Jost; 
  font-size: 18px;           /* Medium header size */
  font-weight: 600;            /* Semi-bold appearance */
  padding-bottom: 8px;         /* Creates breathing room above the line */
  margin-top: 0px;            /* Adds clear space above a new section */
}