/*

Mobile friendly - from Goggle gemini

Fri Oct  3 02:12:41 AM UTC 2025



==================================================
1. Base Styles (Mobile-First Defaults)
   - These styles apply to ALL devices (the "mobile" view)
==================================================
*/

/* Box-sizing for easier layout calculations */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Base font size and line height for good readability on mobile */
body {
    font-family: Arial, sans-serif;
    color: black;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* Responsive Images: Prevents images from overflowing their containers */
img {
    max-width: 100%;
    height: auto; /* Important to maintain the image's aspect ratio */
    display: block;
}

/* Utility Class: Fluid Container (takes up most of the screen width) */
.container {
    width: 90%; /* Start with 90% width on mobile */
    margin: 0 auto; /* Center the container */
    padding: 10px 0;
}

/* Flexible Layout (Example: a simple 1-column layout on mobile) */
.grid-layout {
    display: flex;
    flex-direction: column; /* Stack items vertically on mobile */
    gap: 20px;
}

.card {
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    /* On mobile, cards take up 100% of the container width (the default) */
}

/*
==================================================
2. Media Query (Desktop Breakpoint)
   - Styles inside this block OVERWRITE the base styles for WIDER screens
   - We use 'min-width' for the Mobile-First approach
==================================================
*/
@media (min-width: 1368px) {
    
    /* Container Adjustments 
    - At desktop, constrain the container's maximum size for better line length 
    */
    .container {
    justify-content: center; /* Centers content horizontally */
        width: 900px; /* Stop the container from getting too wide on huge screens */
        max-width: 900px; /* Stop the container from getting too wide on huge screens */
        padding: 20px 0;
    }

body {
        width: 900px; /* Stop the container from getting too wide on huge screens */
    font-family: Arial, sans-serif;
    text-align: justify;
    justify-content: center; /* Centers content horizontally */
    margin: auto; /* TVM enable center justified*/
    }
    /* Layout Adjustments 
    - Change from a vertical stack (column) to a horizontal layout (row) 
    - Use Flexbox/Grid to distribute items in multiple columns
    */
    .grid-layout {
        flex-direction: row; /* Lay items out horizontally on desktop */
        flex-wrap: wrap; /* Allow items to wrap onto the next line */
    }

    /* Card Adjustments 
    - Use 'flex' to make cards share space, effectively creating columns 
    */
    .card {
        /*
        The flex shorthand: flex-grow | flex-shrink | flex-basis
        - flex-basis: calc(33.33% - 20px) attempts to make three equal columns 
          (100% / 3 = 33.33%) minus the gap space.
        */
        flex: 1 1 calc(33.33% - 20px);
    }
}

a:link, a:visited{
	color: #005FA9;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}



h1
{
	font-weight:bold;
	font-size:24pt;
	font-family:Arial, Helvetica, sans-serif;
	color:green;
}

h2
{
	font-weight:bold;
	font-size:20pt;
	font-family:Arial, Helvetica, sans-serif;
	color:fuchsia;
}

h3
{
	font-weight:bold;
	font-size:18pt;
	font-family:Arial, Helvetica, sans-serif;
	color:purple;
}