body {
    font-family: sans-serif;
    margin:0;
    padding:0;
}

h1 {
    color: blueviolet;
}

#GameContainer {
    width: 50%;
    min-width: 560px;
    animation: gCFade 1s;
    position: relative;
    top: 20px;
}

#gotoGithub {
    position: absolute;
    top: 10px;
    right:50px;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    background: black;
    color: white;
    font-size:0.8em;
    margin:0;
    padding:0;
    z-index: 6;
    height: 30px;
}

a {
    font-weight: bold;
    color: cadetblue;

}
a:visited {
    color: cadetblue;
}

#overlay {
    position: absolute;
    z-index: 1;
    min-height: 504px;
    top: -20px;
    left: 90px;

}

#pauseLabel {
    position: relative;
    bottom: 500px;
    background: white;
    width: 150px;
    z-index: 1;
    left: 220px;
    height: 30px;

    text-align: center;


}

.menuItem:hover {
    border: solid;
    border-color: black;
    border-width: 2px;

}

#pauseLabel > span{
    position: relative;
    top: 7px;
    font-weight: bold;

}

@keyframes gCFade {
    from { opacity: 0; width:33% }
    to {opacity: 1; width:50%}
}

.MiddleElement {
    position: relative;
    margin: auto;
}

#theCanvas {
    position:relative;
    width: 360px;
    margin: auto;
    background-color: Black;
    top: -60px;
}


#ControlElments {
    display: inline-block;
    position: relative;
    width: 100px;
    margin: auto;
    left: 500px;
    top: -200px;
}

#IndicatorElements {
    display: inline-block;
    position: relative;
    background: black;
    color: white;
    width: 360px;
    left: 104px;
    z-index: 1;

}

#IndicatorHeader {
    position: relative;
    left: 38px;
    top: 5px;
}

.textIndicator {
    display: inline-block;
    width: 50px;

}

#PreviewContainer {
    position: relative;
    left: 140px;
    top: 20px;


}

.preview {
    width: 50px;
    height: 50px;
    position: relative;
    top: -25px;
    /*
    border-style: solid;
    border-width: 2px;
    border-color: white;
    */

}

#firstPreview {
    width: 80px;
    height: 80px;
    /*
    border-style: solid;
    border-width: 2px;
    border-color: white;
    */
}



.ReStartStyle {
    background-image: url(assets/restartButton.svg);
    height: 64px;
    background-repeat: no-repeat;
    background-size: contain;

}

.ReStartStyle:hover {
    background-image: url(assets/playButton.svg);

}

#PauseButton {
    background-image: url(assets/pauseButton.svg);
    height: 64px;
    background-repeat: no-repeat;
    background-size: contain;

}
#PauseButton:hover {
    background-image: url(assets/playButton.svg);
}



#GameOverScreen {
    min-width: 400px;
    color: crimson;
    animation: goFadeIn 3s;
    width: 35%;
}

@keyframes goFadeIn {
    from { opacity: 0; width:30%}
    to {opacity: 1; width: 35%}
}