/* 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." */
body {
        text-align: left;
        font-family: "fonts/Cthulhumbus.otf", monospace;
        /* background-color: */
        background-image: url("https://greenfogg.neocities.org/images/MediaLog/UniversalAssets/BackdropGemsTile.png");
        background-size: 150px;
        /* replace this line of code with a link to your background image. */
        /* or remove it entierly if you want to use a color or something. */
        font-size: 16px;
        color: #efefef;
}

    span {
        font-family:"fonts/Cthulhumbus.otf"; 
        font-size: 6vh;
        color: #efefef;
        margin: 2.5%;
    }
    /* delete this code if you don't want to use a custom font. */

    p{
        margin:0.5%;
    }

    hr {
        border: 0;
        height: 1px;
        background-image: linear-gradient(to right, purple, blue, purple);
        margin-right: 5px;
        margin-left: 5px;
    }
    
   a{
        color: #00FF99;
        text-decoration: none;
    }
        /* this is the link color. */

    a:hover{
        color: #FF9999;
        text-decoration: none;
    }
        /* this is the link color when the cursor hovers it */

    .container {  
        height: auto;
      display: grid;
       gap: 10px;
       padding: 10px;
        margin: 0 auto;
        margin-top: 5%;
        margin-left: 15%;
        margin-right: 15%;
       grid-template-areas:
       "header header header"      /* a 3x3 grid. write out the name of each box you want with a max of three boxes in each row*/
       "box2026 box2026 box2026"
       "box7 box8 box9"
       "box2025 box2025 box2025"
       "box4 box5 box6"
       "box2024 box2024 box2024"
       "box1 box2 box3"      /* boxes of the same name will join and merge*/
                              /* eg writing "box1 box1 box1" will give you one wide box going across all three columns */
       "box10 box11 box13"       /* writing "box1 box1 box" will give you 2/3 across of box 1 and 1/3 across of box 2 */
       "footer footer footer"; /* you can keep adding as many rows as you want by just adding more lines, make sure each box you want different content in has a different name*/
    }

    .header { 
        grid-area: header; 
        background-color: #000000;
        height:100%;
        width:100%;
        border: #8B0000 1px solid;
    }
        .year2026{
        grid-area: box2026;
        background-color: #000000;
        height: 100%;
        width: 100%;
        border:#8B0000 1px solid;
        }
        .year2025 { 
        grid-area: box2025; 
        background-color: #000000;
        height:100%;
        width:100%;
        border: #8B0000 1px solid;
    }
        .year2024 { 
        grid-area: box2024; 
        background-color: #000000;
        height:100%;
        width:100%;
        border: #8B0000 1px solid;
    }
    
        .left2026 { 
        grid-area: box7; 
        background-color: #000000;
        height: 500px;
        width: 100%;
        border: #8B0000 1px solid;
        overflow:auto;
    }
        .mid2026{ 
        grid-area: box8; 
        background-color: #000000;
        height: 500px;
        width: 100%;
        border: #8B0000 1px solid; 
        overflow:auto;
    }   
        .right2026 { 
        grid-area: box9; 
        background-color: #000000;
        height:100%;
        width:100%;
        border: #8B0000 1px solid;
        overflow:auto;
    }

        .left2025 {           /*you must have one of these paragraphs for each box. the name here much match it's name on the grid above*/
        grid-area: box4;  /*make sure to also write the correct box name here too*/
        background-color: #000000;
        height: 500px;
        width: 100%;
        border: #8B0000 1px solid;
        overflow:auto; /*this makes the box have a scroll bar if it gets too full*/
    }
         .mid2025 {           /*you must have one of these paragraphs for each box. the name here much match it's name on the grid above*/
        grid-area: box5;  /*make sure to also write the correct box name here too*/
        background-color: #000000;
        height: 500px;
        width: 100%;
        border: #8B0000 1px solid;
        overflow:auto; /*this makes the box have a scroll bar if it gets too full*/
    }
        .right2025 {           /*you must have one of these paragraphs for each box. the name here much match it's name on the grid above*/
        grid-area: box6;  /*make sure to also write the correct box name here too*/
        background-color: #000000;
        height: 500px;
        width: 100%;
        border: #8B0000 1px solid;
        overflow:auto; /*this makes the box have a scroll bar if it gets too full*/
    }
    
        .left2024 {           /*you must have one of these paragraphs for each box. the name here much match it's name on the grid above*/
        grid-area: box1;  /*make sure to also write the correct box name here too*/
        background-color: #000000;
        height: 500px;
        width: 100%;
        border: #8B0000 1px solid;
        overflow:auto; /*this makes the box have a scroll bar if it gets too full*/
    }
         .mid2024 {           /*you must have one of these paragraphs for each box. the name here much match it's name on the grid above*/
        grid-area: box2;  /*make sure to also write the correct box name here too*/
        background-color: #000000;
        height: 500px;
        width: 100%;
        border: #8B0000 1px solid;
        overflow:auto; /*this makes the box have a scroll bar if it gets too full*/
    }
        .right2024 {           /*you must have one of these paragraphs for each box. the name here much match it's name on the grid above*/
        grid-area: box3;  /*make sure to also write the correct box name here too*/
        background-color: #000000;
        height: 500px;
        width: 100%;
        border: #8B0000 1px solid;
        overflow:auto; /*this makes the box have a scroll bar if it gets too full*/
    }        

        .box10 { 
        grid-area: box10; 
        background-color: #000000;
        height:100%;
        width:100%;
        border: #8B0000 1px solid;
        overflow:auto;
    }
    
        .box11 { 
        grid-area: box11; 
        background-color: #000000;
        height:100%;
        width:100%;
        border: #8B0000 1px solid; 
        overflow:auto;
    }
        .box12 { 
        grid-area: box11; 
        background-color: #000000;
        height:100%;
        width:100%;
        border: #8B0000 1px solid; 
        overflow:auto;
    }
    
        .footer { 
        grid-area: footer; 
        background-color: #000000;
        height:100%;
        width:100%;
        border: #8B0000 1px solid; 
    }
    

</style>