main 
    {
        grid-area: main;
        font-family: var(--bodyFont), serif;
        color: var(--fontColor);
        line-height: 1.3;
        font-size: clamp( 0.875rem, 1.5vw, 1.125rem);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

        h1 
        {
            font-size: clamp( 1.5rem, 3vw, 2.5rem);
            text-shadow: 5px 5px 2px #000;
            margin-bottom: 1rem;
            text-align: center;
            font-weight: 500;
            letter-spacing: 1px;
        }

        h2
        {
            font-size: clamp( 1.25rem, 2.5vw, 2rem);
            text-shadow: 5px 5px 2px #000;
            margin-bottom: 0.75rem;
            margin-top: 0.75rem;
            font-weight: 400;
            text-align: center;
            letter-spacing: 1px;
        }

        p
        {
            margin: 1rem 5vw;
            font-weight: 300;
            font-size: clamp( 0.875rem, 1.5vw, 1.125rem);
            letter-spacing: 1px;
        }
    }

    .map-box
    {
        height: 90%;
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 2px solid lightgrey;
        background-color: rgba(250, 244, 244, 0.1);
        box-shadow: 10px 10px 15px 3px rgba(78, 78, 78, 0.6); 


        .location-text
        {
            margin: 0 2rem;
            font-size: clamp( 1rem, 2vw, 1.25rem);
            width: 80%;
        }

        .location-image
        {
            width: 50%;
            img
            {
                width: 100%;
                height: auto;
            }
        }
    }

    .small-box
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 2rem auto;
        padding: 1rem;
        width: clamp(300px, 50%, 800px);
        height: fit-content;
        border: 2px solid lightgrey;
        background-color: rgba(250, 244, 244, 0.1);
        box-shadow: 10px 10px 15px 3px rgba(78, 78, 78, 0.6); 
        
        ul
        {
            margin: 0 2rem;
        }
        li
        {
            margin: 0.5rem 0;
        }

        a
        {
            text-decoration: none;
            color: var(--fontColor);
            font-weight: bold;
            transition: color 0.3s ease;
        }
    }   

.medium-box
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 2rem auto;
        padding: 1rem;
        width: clamp(300px, 65%, 1000px);
        height: fit-content;
        border: 2px solid lightgrey;
        background-color: rgba(250, 244, 244, 0.1);
        box-shadow: 10px 10px 15px 3px rgba(78, 78, 78, 0.6); 
        
        ul
        {
            margin: 0 2rem;
        }
        li
        {
            margin: 0.5rem 0;
        }
        a
        {
            text-decoration: none;
            color: var(--fontColor);
            font-weight: bold;
            transition: color 0.3s ease;
        }
    }   

 
    .rotation-box
        {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 2rem auto;
            padding: 1rem;
            width: clamp(300px, 80%, 1500px);
            height: fit-content;
            border: 2px solid lightgrey;
            background-color: rgba(250, 244, 244, 0.1);
            box-shadow: 10px 10px 15px 3px rgba(78, 78, 78, 0.6); 
            
            ul
            {
                margin: 0 2rem;
            }
            li
            {
                margin: 0.5rem 0;
            }
        }   

    .scroll-box
        {
            height: 90%;
            width: 90%;
            overflow-y: scroll;
            border: 2px solid lightgrey;
            background-color: rgba(250, 244, 244, 0.1);
            box-shadow: 10px 10px 15px 3px rgba(78, 78, 78, 0.6);

            #rings
            {
                max-width: 30vw;
                height: auto;
                display: block;
                margin: 1rem auto;
            }

            figcaption
            {
                font-size: clamp( 0.75rem, 1.2vw, 1rem);
                text-align: center;
                font-style: italic;
            }

            table 
            {
                background-color: black;
                border: 1px solid black;
                border-spacing: 3px;
                margin: 1rem auto;
            }
              
              th, td 
              {
                background-color: white;
                color: black;
                padding: 5px;
                text-align: center;
              }

            ul
              {
                  margin: 0 2rem;
              }
            li
              {
                  margin: 1rem 4rem;
              }

            figure
            {
                margin: 1rem auto;

                img
                {
                    max-width: 40vw;
                    height: auto;
                    display: block;
                    margin: 0 auto;
                }
            }
        }