/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {                  
font-family: "Liberation Serif";
  src: url(https://rna.neocities.org/Fonts/LiberationSerif-Regular.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Liberation Sans";
  src: url(https://rna.neocities.org/Fonts/LiberationSans-Regular.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Vector Sigma";
  src: url(https://rna.neocities.org/Fonts/Vector%20Sigma.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}




h1 {
  color: red;  
  font-size: 2.5em;
  font-family: "Vector Sigma";
  
}

h2 {
  color: black;
  font-size: 1.5em;
  font-family: "Liberation Sans";

}

        p {
          padding-bottom: 5px;
        }  
        
        ul, ol {
            padding-left: 40px; 
            margin: 10px 0;
        }
        
        li {
            margin-bottom: 3px;
        }
        
        .p-indent {
            padding-left: 20px;
            min-width: 0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            line-height: 1.6;
            color: black;
            background-color: white;
            background:0 0;
            font-family: "Liberation Sans";
        }            
        .container {
            max-width: 800px;
            width: 90%;
            margin: 0 auto;
            padding: 20px 0;
        }

        .grid-section {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 20px;
            margin-bottom: 20px;
            align-items: start;
                    
        }    

        .grid-item {
            padding: 20px;
            background-color: #ffffff;
            border-radius: 2px;
            border: 2px solid grey;
            min-width: 0; 
        }        

        .col-1 { grid-column: span 1; }   /* 1/12 of container width */
        .col-2 { grid-column: span 2; }   /* 2/12 = 1/6 of container width */
        .col-3 { grid-column: span 3; }   /* 3/12 = 1/4 (perfect for sidebar) */
        .col-4 { grid-column: span 4; }   /* 4/12 = 1/3 (good for 3-column layouts) */
        .col-5 { grid-column: span 5; }   /* 5/12 (uncommon but available) */
        .col-6 { grid-column: span 6; }   /* 6/12 = 1/2 (half-width, very common) */
        .col-7 { grid-column: span 7; }   /* 7/12 (for asymmetrical layouts) */
        .col-8 { grid-column: span 8; }   /* 8/12 = 2/3 (main content area) */
        .col-9 { grid-column: span 9; }   /* 9/12 = 3/4 */
        .col-10 { grid-column: span 10; } /* 10/12 = 5/6 */
        .col-11 { grid-column: span 11; } /* 11/12 */
        .col-12 { grid-column: span 12; } /* Full width */
        
        .hero {
            color: black;
            text-align: left;
            padding: 10px 20px 15px 20px;
            border: 2px solid grey;
            border-radius: 2px;
            background-color: white;
        }      

        .card {
            text-align: center;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .sidebar {

            background-color: #f8f9fa;
            border-left: 4px solid #667eea;
        }

        .main-content {
            border: 2px solid grey;
            min-width: 0;
            padding: 20px;
            border-radius: 2px;
            margin-bottom: 20px;
        }

        .footer {
            text-align: center;
            background-color: white;
            color: black;            
            font-size: 14px;            
        }

        .grid-item {
            position: relative;

        }

        @media (max-width: 768px) {
            .container {
                width: 95%;
                padding: 20px 20px;
            }

            .grid-section {
                grid-template-columns: 1fr;
            }

            [class*="col-"] {
                grid-column: span 1 !important;
            }

            .hero {
                padding: 20px 15px;
                margin-top: 10px;
            }
        }

        @media (max-width: 480px) {
            .container {
                width: 100%;
                padding: 10px 15px 15px 15px;
            }
        }


/* unvisited link */
a:link {
  color: darkgreen;
  text-decoration: underline
}

/* visited link */
a:visited {
  color: gold;
  text-decoration: underline
}

/* mouse over link */
a:hover {
  color: gold;
  text-decoration: underline
}

/* selected link */
a:active {
  color: darkgreen;
  text-decoration: underline
}