/*              
                                      ++                                 
                                    +++                                  
           ++       ++      ++++    +++                                  
           ++++     ++    ++++++  ++++++++                               
           +++++     +++  +++     +++    ++                              
           ++++++    +++  +++     +++   +++                              
 +++++++++++    +++    ++   ++++      ++    ++++++ ++                    
    +++         +++    ++                  ++     ++                     
      +++++++            +++++++++++++++   +++++++   +++++++      ++++   
          ++++          ++++++++    ++++    +++++    ++   ++      +++    
             ++++   +++++               ++    +++  ++ ++++++   ++++      
                  ++++                ++++         ++++ +++  ++++        
                  ++                ++++             ++    ++++          
                  ++              +++                ++   ++             
                  ++        ++   ++                  ++                  
                    ++        +++                    ++                  
                     ++++++++               +++      ++                  
                            +++++++         +++   +++++     ++           
                                 ++++       +++++++++++   ++++           
                                  ++++++++  ++++++ ++++ ++++             
                                  +++    ++ +++++  ++++++          +++   
                                 ++++     ++++++   +++++          ++++   
                               ++++        ++      ++ +++       ++++++   
                              +++        ++        ++ +++      ++  +++   
                    +++++++++++++++++++++++       +++ ++++   +++++ +++   
                    +++++     ++++++++++++        ++    +++  ++ ++++++   
          ++++++++++                  ++          ++    ++++ ++   ++++++ 
      +++++++++                     ++++          ++      ++        ++++ 
      ++++                        +++++                               ++ 
                                  +++                                    
                            
                        style.css © Micahel Soyka 2026
*/

p
{
    margin: 0px;
}
p, a
{
    font-family: Tahoma, Verdana, Arial, sans-serif;
}

.bg-icon 
{
    background-size: cover;
    aspect-ratio: 1;
}

:root
{
    --center-width: 800px;

    --body-bg-c: #0f0f0f;

    --header-bg-c: #0f0f0f;
    --footer-bg-c: #0f0f0f;
}

body
{
    margin: 0px;
    height: 100vh;
    width: 100vw;

    background: var( --body-bg-c );
}

.app
{
    display: flex;
    flex-direction: column;

    height: 100%;
    width: 100%;
}

.page-block
{
    width: 100%;

    display: flex;
    justify-content: center;

    padding: 8px 0px;
}

.center
{
    display: flex;
    flex-direction: column;
    
    height: 100%;
    width: 100%;
    max-width: var( --center-width );

    margin: 0px 8px;
}

.page-block#header
{
    height: 84px;
    
    background-color: var( --header-bg-c );
}
.page-block#header .center
{
    display: flex;

    justify-content: space-between;
    align-items: center;
    flex-direction: row;

    gap: 32px;
}
.page-block#header #logo
{
    image-rendering: pixelated;

    background-image: url( 'assets/logo-large.png' );

    aspect-ratio: 1 / 0.8;

    width: 100px;
}
.page-block#header #menu
{
    display: flex;

    gap: 24px;
}
.page-block#header #menu #menu-item
{
    color: #FFF;
    text-transform: uppercase;
    height: 100%;
    padding: 16px 24px;

    cursor: pointer;
}
.page-block#header #menu #menu-item:hover
{
    /* background: rgba(0, 0, 0, 0.5); */
    
    outline: dashed 2px white;
}

.page-block#footer
{
    height: 180px;

    background-color: var( --footer-bg-c );

    padding: 16px 0px;
}
.page-block#footer .center
{
    display: flex;
    justify-content: space-between;
}
.page-block#footer #copyright
{
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 200px;
    gap: 8px;

    height: 100%;
}
.page-block#footer #copyright #logo
{
    flex-grow: 1;
    min-height: 0;

    image-rendering: pixelated;

    background-image: url( 'assets/logo-large.png' );

    aspect-ratio: 1 / 0.8;
}
.page-block#footer #copyright p
{
    flex-shrink: 0;

    /* font-weight: bold; */
    font-size: 1em;
    text-align: center;

    color: #FFF;
}

.loader
{
    position: absolute;
    height: 100vh;
    width: 100vw;

    background-color: var( --body-bg-c );
    backdrop-filter: blur( 96px );

    animation: 
        fade-out-bg 1.0s ease forwards,
        fade-out-blur 0.4s ease forwards;

    pointer-events: none;
}

@keyframes fade-out-bg
{
    from
    {
        background-color: var(--body-bg-c);
    }
    to  
    {
        background-color: #00000000;
    }
}

@keyframes fade-out-blur
{
    from
    {
        backdrop-filter: blur(96px);
    }
    to  
    {
        backdrop-filter: blur(0px);
    }
}

.splash-zone
{
    display: flex;

    height: 100%;

    justify-content: center;
    align-items: center;

    font-weight: bold;
    font-size: 2em;  
    
    text-align: center;

    color: #a0a9b7;
}