body
{
    font-family: Trebuchet MS;
    line-height: 1.2em;
    position: fixed;
}

h1
{
    font-size: 3em;
    margin-bottom: .5em;
    line-height: 1.1em;
}

iframe, body
{
    width: 100%;
    height: 100%;
}

h2
{
    font-size: 1.5em;
}

.intro
{
    width: 30em;
    position: absolute;
    left: 50%;
    top: 5em;
    padding: 3em 4em;
    margin-left: -18em;
    background: rgba(255,255,255,.9);
    transition: .3s;
    z-index: 9999;
    box-shadow: 0 0 5em #666;
    box-sizing: border-box;
}

.intro:hover
{
    box-shadow: 0 0 10em #333;   
}

a[href="#close"]
{
    position: absolute;
    right: .5em;
    top: .5em;
    text-decoration: none;
    padding: .4em .7em;
    background: #666;
    transition: .2s;
    color: #ccc;
}

a[href="#close"]:focus, a[href="#close"]:hover
{
    background: #000;
    color: #fff;
}

@media only screen and (max-width: 600px)
{
    .intro
    {
        width: 90%;
        top: 0;
        left: 0;
        margin: 5%;
        padding: 2em;
    }
    
    h1
    {
       font-size: 2em;
    }
}