body,html{
    height: 100%;
    margin: 0px;
}


.image-section{
    min-height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /*this will make the paralax effect by keeping image in place */

}

h1{
    font-size: 100px;
    color: white;
    text-shadow: 5px 5px black;
    background-color: rgba(0,0,0,.2);
    padding: 10px;
}


.procedure{
    background-color: firebrick;
    color: White;
    padding: 10px 50px;
    height: 50vh;
    font-size: 49px;
}

.mario{
    background-image: url("../images/howToPlayMario.png");
    display:flex;
    justify-content: center;
    align-items: center;
}

.getMario{
    background-image: url("../images/Get\ Mario.png");
}

.getController{
    background-image: url("../images/NES\ Console.png");
}

.holdController{
    background-image: url("../images/Hold\ NES.png");
}

.putGameIn{
    background-image: url("../images/Put\ Game\ in.png");
}

.play{
    background-image: url("../images/Play\ Mario.png");
}