@import url("/data/includes/css/common.css");

html, body { font-family: "Nunito", sans-serif; font-size: 100%; vertical-align: baseline; }

body {
    background-image: url('/data/media/layout/tilingbg.png');
    background-repeat: repeat;
    background-position: center;
    background-color: #eeeeee;
    background-size: 75%;
    }
            
#container {
    width: 100%; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    }
        
    #content {
        color: var(--darkestgrey);
        background-color: rgb(255,255,255, 0.8);
        width: calc(90% - 40px);
        max-width: 800px;
        margin: auto;
        padding: 20px;
        text-align: justify;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }
            
        #content img { 
            display: block;
            margin: auto;
            position: relative;
            top: -75px;
            width: 50%;
            max-width: 400px;
            margin-bottom: -75px;
        }
            
        #content h1 { font-family: 'Love Ya Like A Sister', cursive; color: var(--darkestgrey); font-size: 2.5em; text-align: center; letter-spacing: 2px; margin: 0px; margin-bottom: -10px; }
        #content h2 { font-family: 'Caveat', cursive; color: var(--accentred); font-size: 1.8em; text-align: center; letter-spacing: 1px; margin: 0px; margin-bottom: 10px; }
        #content p { margin: 0; padding: 0; font-size: 1em; }
        #content ul { margin: 0 0 20px 20px; list-style-image: url("/data/media/layout/bullet.png"); }
        #content a:link, #content a:visited, #content a:active { color: var(--accentred); text-decoration: none; }
        #content a:hover { color: var(--darkestgrey); border-bottom: 2px solid var(--accentred); }
                
            #terms { width: fit-content; margin: 0 auto; }
                
            #enterlink { width: 100%; text-align: center; }
                
                #enterlink a:link, #enterlink a:visited {
                    font-size: 1.5em;
                    background-color: var(--accentred);
                    color: var(--lightestgrey);
                    text-decoration: none;
                    padding: 10px;
                    border-right: 2px solid #8c434d;
                    border-bottom: 2px solid #8c434d;
                    -webkit-border-radius: 10px;                        
                    -moz-border-radius: 10px;
                    border-radius: 10px;
                    display: inline-block;
                    margin: auto;
                    width: 150px;
                }
                
                #enterlink a:hover { background-color: #8c434d; border-color: var(--accentred); }
                #enterlink a:active { background-color: var(--darkestgrey); color: var(--accentred); }
                    
            #disclaimer {
                width: 100%;
                margin-top: 20px;
                font-size: 0.8em;
                text-align: center;
            }