html, body{
    margin: 0;
    height: 100%;
    font-family: Bangers;
}

#c{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
}


.row{
    margin: 0;
}

.home-screen{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    text-align: center;
    z-index: 100;
    color: white;
}

.home-screen h1{
    font-size: 7em;
    text-shadow: 5px 5px #000000;
}

.home-screen .title{
    padding: 10%;
}


.top-bar{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    color: white;
    font-size: 2em;
    text-shadow: 2px 2px #000000;
    padding: 2%;
    text-align: end;
}

.popup{
    background:rgba(0, 0, 0, 0.925);
    color: white;
    cursor:pointer;
    display:none;
    height:100%;
    position:fixed;
    text-align:center;
    top:0;
    width:100%;
    z-index:10000;
}

.popup p{
    font-size: 2em;
}
.popup i{
    font-size: .75em;
}

.popup .attr{
    font-size: 1.5em;
}
.popup .attr{
    font-size: 1.8em;
}

.popup .helper{
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

.popup > div {
    display: inline-block;
    height: auto;
    max-width: 100%;
    min-height: 100px;
    vertical-align: middle;
    width: 60%;
    position: relative;
    border-radius: 8px;
    padding: 15px 5%;
} 



.close-button:hover{
    text-decoration: underline;
}

.restart{
    text-align: left;
    display: none;
}


.level-complete{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    text-align: center;
    z-index: 102;
    color: white;
    display: none;
}


.level-complete h1{
    padding: 10%;
    font-size: 7em;
    text-shadow: 5px 5px #000000;
}

.level-complete #restart{
    font-size: 7em;
    text-shadow: 5px 5px #000000;
}