/* ---------------------------------------------------------------------------------- *
 * Define colors
 * ---------------------------------------------------------------------------------- */

 :root {

    --ultra-light-color-fakulta: #fbedef;

    --ultra-light-color-bilogie: #FFE9E5;
    --ultra-light-color-chemie: #FDF5DE;
    --ultra-light-color-geografie: #E5F6FC;
    --ultra-light-color-geologie: #F1EDE8;
    --ultra-light-color-zp: #E5F5E8;
    
    
    
    --light-color-fakulta: #ff4b5f;
    --light-color-biologie: #FF7459;
    --light-color-chemie: #ffc654;
    --light-color-geografie: #3dc9ff;
    --light-color-geologie: #e0b979;
    --light-color-zp: #b1f07f;    
    
    --main-color-fakulta: #d32e3f;
    --main-color-biologie: #ff5533;
    --main-color-chemie: #f48b00; /* #ffaa00;*/
    --main-color-geografie: #00aeef;
    --main-color-geologie: #91754a;
    --main-color-zp: #36b34a;

    --text-color: #003450;
    --text-light-color: #335d73;
}

/* ---------------------------------------------------------------------------------- *
 * BODY, main layout
 * ---------------------------------------------------------------------------------- */

    html, body {
        font-family: 'silka';
        font-size: 17px;
        min-width: 375px;
        color: var(--text-color);
        padding: 0;
        margin: 0;
    }


    #main {

        margin: 5rem auto;
        text-align: center;

        max-width: 700px;
        padding: 0 1rem;
    }   

    h1 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    #logo img {
        
        max-width: 550px;
        margin: 0 auto 4rem auto;
        width: 100%;
        height: auto;
    }

    #contact {
        margin-top: 3rem;
        color: var(--text-light-color);
        font-size: 85%;
        line-height: 1.35rem;
    }

    .d-desktop {
        display: block;
    }
    .d-mobile {
        display: none;
    }   

    a {
        color: var(--main-color-fakulta);
        text-decoration: none
    }
    
    a:hover {
        color: var(--light-color-fakulta);
        text-decoration: none
    }
    

    @media screen and (max-width: 700px) {

        
        #logo {
            margin: 1rem 1rem;
        }

        h1 {
            font-size: 1.5rem;
        }

        #main {
            margin: 0;
            padding: 0;
        }

        #content {
            padding: 0 1rem 1rem 1rem;
        }   

        .d-desktop {
            display: none;
        }
        
        .d-mobile {
            display: block;
        }
    }