@font-face {
    font-family: 'MaturaMTScriptCapitals';
    src:    url('maturamtscriptcapitals.woff2') format('woff2'),
            url('maturamtscriptcapitals.woff') format('woff'),
            url('maturamtscriptcapitals.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;}

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

    #frontPage {
        height: 90vh;
    }

    #header {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 30vh;
        width: 80vw;
        margin-top: -15vh;
        margin-left: -40vw;
    }

    #logo {
        width: 100%;
    } 

    #slogan {    
        background-color:#540202 ;
        font-size: 4vw;
        width: 100%;
        text-align: center;
        color:white;
        font-family: 'MaturaMTScriptCapitals';
        position: absolute;
        margin-top: -1vh;
    }
}
@media screen and (max-width: 1024px)
{
    #frontPage {
        height: 90vh;
    }
    
    #header {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 30vh;
        width: 80vw;
        margin-top: -15vh;
        margin-left: -40vw;
    }

    #logo {
        width: 100%;
    } 

    #slogan {    
        background-color:#540202 ;
        font-size: 4vw;
        width: 100%;
        text-align: center;
        color:white;
        font-family: 'MaturaMTScriptCapitals';
        position: absolute;
        margin-top: -1vh;
    }
}

@media screen and (min-width: 1025px)
{

    #frontPage {
        height: 90vh;
    }

    #header {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 30vh;
        width: 80vw;
        margin-top: -30vh;
        margin-left: -40vw;
    }

    #logo {
        width: 100%;
    } 

    #slogan {    
        background-color:#540202 ;
        font-size: 4vw;
        width: 100%;
        text-align: center;
        color:white;
        font-family: 'MaturaMTScriptCapitals';
        position: absolute;
        margin-top: -1vh;
    }
}