.top-left    { top: 0; left: 0; }
.top-right   { top: 0; right: 0; transform: scaleX(-1); }
.bottom-left { bottom: 0; left: 0; transform: scaleY(-1); }
.bottom-right{ bottom: 0; right: 0; transform: scale(-1, -1); }



 :root {
--global-bg-color: #003322; 
--global-text-color: #FEFAE0;
--global-link-color: #DDA15E;
--global-header-color: #FEFAE0; 
 }

 body {
     color: var(--global-text-color);
     background-color: var(--global-bg-color);
     font-size: 16pt;
     line-height: 1.6;
     margin: 0;
     padding: 0;
  font-family: "EB Garamond", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

 }

 .container {
     width: 80%;
     margin: auto;
     padding: 20px;
 }

 .flex-container {
     display: flex;
     position: relative;
     flex: 1;
     box-sizing: border-box;
 }

 img {
     height: auto;
     display: block;
 }

 @media (max-width: 900px) {
     .flex-container {
         flex-direction: column;
     }
 }

 h2 {
     padding-top: 20px;
     color: var(--global-header-color);
 }


 a {
     color: var(--global-link-color);
     text-decoration: none;
     cursor: pointer
 }

 a:hover {
     text-decoration: underline;
 }


.corner-svg {
  position: fixed;
  width: 60px; /* Adjust size as needed */
  height: auto;
  opacity: 0.7; /* Optional for subtle effect */
  pointer-events: none; /* Makes sure it's not clickable */
  z-index: 10;
}