#winLoseScreen, #startScreen
{
    position: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
    display: none;
    z-index: 150;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: white;
}

#menuBackground
{
    position: fixed;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

#startScreenFront
{
    width: 100%;
    height: 100%;
    display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    z-index: 160;
    padding-top: 10dvi;
}

#tutorialFront
{
    width: 60%;
    height: 40%;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    display: block;
    justify-content: left;
    text-align: left;
    font-size: 1.25dvi;
    margin-top: 5dvi;
    margin-bottom: 5dvi;
}

#winLoseScreen h1
{
    margin-bottom: 8dvi;
}

#winLoseScreen button, #startScreen button
{
    font-size: 2dvi;
    width: 28vi;
    height: 5vi;
    color: white;
    background-image: url("../sprites/Button.png");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
}

.purple {
    color: purple;
    text-shadow: 1px 1px 1px white;
}

.red {
    color: red;
    text-shadow: 1px 1px 1px white;
}

.orange {
    color: orange;
    text-shadow: 1px 1px 1px white;
}

.redbrown {
    color: #A52A2A;
    text-shadow: 1px 1px 1px white;
}

.blue
{
    color: blue;
    text-shadow: 1px 1px 1px white;
}

.brown
{
    color: brown;
    text-shadow: 1px 1px 1px white;
}

#loadingScreen
{
    position: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
    display: block;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: white;
    background-color: black;
}