body{
    font-family: "Press Start 2P", system-ui;    
    display:flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: rgb(0,0,0);
    background-image: url('/images/main_pages/main_backs.gif');
    background-size: cover;
    background-attachment: fixed;
    color:rgba(255, 255, 255, 0.897);
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.4; 
    font-weight: 100;  
    background-position: center top;
}
h1{
    margin-bottom: 0;
}
iframe{
    min-width: 40vw;
    max-height: 5rem;
    border:solid;
}
header{
    text-shadow:  4px 4px 0 #2f51f7;     
    color:#00ffff;  
    font-size:2.5rem;    
}
.flash{
    max-width: 25vw;
    height: 10rem;
    margin:5px;
}
a{
    color:rgba(255, 255, 255, 0.74);
    text-decoration: none;
}
main{
    max-width: 90%;
    margin:0px auto 20px;
    flex:1;
}
a{
    background-color: #4444448f;
    color:bisque;
}
footer{
    font-size: 1rem;
    color:rgb(135, 222, 222);
    margin-top: auto;
    background: #000000be;
}

@media all{
    body{
        background-position: center top;
        padding: 1rem;
    }
    iframe{
        max-width: 70vw;
        min-height: 4rem;
    }
    main{
        max-width: 100%;
    }
    .flash{
        max-width: 20vw;
        height: auto;
    }
    p{
        padding:0 5px;
        line-height: 1.4;
    }
    main a{
        display:inline-block;
        margin:2rem;
    }
    footer{
        padding: 15px 10px;
    }
    footer p{
        text-align: center;
    }
}
@media (min-width:300px) and (max-width:600px){
    body{
        font-size: 1.3rem;
    }
    h1{
        font-size:3.5rem;
        padding:1rem;
    }
    iframe{
        min-height: 4rem;
    }
    .flash{
        display:grid;
        min-width:50vw;
        border:solid;
        margin:1rem auto;
    }
    main a{
        display:inline-block;
        line-height: 1.4;
    }
    footer{
        font-size:0.8rem;
    }
}