*/ font-size: 14px; /* Slightly smaller font size */ color: inherit; /* Matches text color of

*/ font-weight: 400; text-align: left; /* Inherits alignment from

, change if

uses left */ margin: 20px auto; /* Centers the footer like

*/ padding: 10px 20px; /* Adds padding inside the footer */ max-width: 900px; /* Matches the max-width of

*/ box-sizing: border-box; /* Includes padding in width calculation */ /*background-color: #f9f9f9; /* Optional: Light background for contrast */ /*border-top: 1px solid #ccc; /* Optional: Subtle top border for separation */ } .site-title { font-family: 'Raleway', sans-serif; padding: 0px 9px; /* Adds padding for the hover effect */ text-align: center; font-weight: 100; font-size: 50px; color: #000; margin: 20px; } .mannauara { position: absolute; top: 20px; left: 100px; padding: 0px 0px; /* Adds some padding for the hover background */ font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 25px; color: #1C3CFF; } .menu { position: absolute; top: 90px; right: 30px; /* Aligns the menu to the right */ font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 18px; color: green; display: flex; gap: 20px; /* Adds spacing between menu items */ } .menu-item { text-decoration: none; color: #1C3CFF; /* Standard blue for links */ padding: 5px 5px; /* Adds some padding for the hover background */ transition: background-color 0.3s ease, color 0.3s ease; } .menu-item-active { text-decoration: none; /* Remove the default link styling */ position: relative; /* Necessary for the pseudo-element */ color: #000000; /* Match the color of other links or adjust */ font-weight: 300; /* Optional: Emphasize the current page */ color: #1C3CFF; } .menu-item-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; /* Adjust distance of the underline from the text */ height: 1px; /* Thickness of the underline */ background-color: orange; /* Orange underline */ } .menu-item:hover { text-decoration: none; /* Ensures no underline appears on hover */ } .text-underline-orange { position: relative; /* Required for the pseudo-element positioning */ font-weight: 500; } .text-underline-orange::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; /* Adjust distance of the underline from the text */ height: 1px; /* Thickness of the underline */ background-color: orange; /* Orange underline */ } a { text-decoration: none; color: #1C3CFF; /* Standard blue for links */ padding: 6px 9px; /* Adds padding for the hover effect */ border-radius: 3px; /* Rounds the corners of the background */ transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */ } a:hover { color: #1D3DF8; /* Darker blue for visited links hover effect */ background-color: #F7A585; /* Highlights the background with blue */ border: 1px solid #050505; /* Add a border on hover */ } a.alternate { text-decoration: none; color: #1C3CFF; /* Standard blue for links */ padding: 6px 9px; /* Adds padding for the hover effect */ font-size: 16px; border-radius: 3px; /* Rounds the corners of the background */ transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */ } a.alternate:hover { color: #000000; /* Darker blue for visited links hover effect */ background-color: #88C4F9; /* Highlights the background with blue */ border: 1px solid #ED6E00; /* Add a border on hover */ } main { padding: 20px; max-width: 900px; margin: 0 auto; text-align: left; font-size: 16px; background-color: #fff; } .glossary-container { max-width: 800px; margin: 35px auto; padding: 10px; font-family: 'Raleway', sans-serif; line-height: 1.8; } .glossary-term { font-style: italic; /* Italicized text */ font-weight: bold; font-size: 1.0em; color: black; margin: 20px 0; } .glossary-definition { margin-left: 20px; font-size: 1em; } .glossary-term::before { content: "▪ "; color: #1C3CFF; /* Highlighted bullet color */ } .indented { margin-left: 20px; /* Adjust this value to control indentation */ padding-left: 10px; /* Optional: Adds inner padding */ /*border-left: 2px solid #ccc; /*Optional: Adds a subtle left border */ } h1 { font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 30px; color: black; margin-bottom: 20px; text-decoration: none; /* Remove default underline */ display: inline-block; /* Ensures the pseudo-element is limited to text width */ position: relative; /* Needed for the pseudo-element */ } h1::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; /* Adjust distance of the underline from the text */ height: 1px; /* Thickness of the underline */ background-color: #1C3CFF; /* Underline color */ transform: scaleX(1); /* Ensures underline width matches the text */ transition: all 0.3s ease; /* Optional for hover or focus animations */ } h2 { font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 25px; color: black; margin-bottom: 20px; text-decoration: none; /* Remove default underline */ display: inline-block; /* Ensures the pseudo-element is limited to text width */ position: relative; /* Needed for the pseudo-element */ } h2::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; /* Adjust distance of the underline from the text */ height: 1px; /* Thickness of the underline */ background-color: #1C3CFF; /* Underline color */ transform: scaleX(1); /* Ensures underline width matches the text */ transition: all 0.3s ease; /* Optional for hover or focus animations */ } h3 { font-family: 'Raleway', sans-serif; font-weight: 300; font-size: 16px; color: black; margin-bottom: 20px; text-decoration: none; /* Remove default underline */ display: inline-block; /* Ensures the pseudo-element is limited to text width */ position: relative; /* Needed for the pseudo-element */ } .image-container { display: grid; grid-template-columns: repeat(2, 1fr); /* Two equal columns */ gap: 10px; /* Spacing between images */ max-width: 800px; /* Limit the container width */ margin: 20px auto; /* Center the container */ padding: 10px; /* Add some padding inside the container */ background-color: inherit; /* Match the

background */ } .image-container img { width: 100%; /* Ensure images fill their column */ height: 220px; Set a fixed height */ object-fit: cover; /* Crop images to fill the container while maintaining content */ display: block; /* Prevent inline gap issues */ border-radius: 4px; /* Optional: Slightly round corners for better aesthetics */ } @media (max-width: 600px) { .image-container { grid-template-columns: 1fr; /* Switch to a single column on small screens */ } }