/* Resetting browser defaults + full height page */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Basic Style - Font and Size */
body {
    font-family: arial, sans-serif;
    font-size: 13px;
}

h1 {
    color: black;
    font-size: 40px;
}

span.keeptogether {
    white-space: nowrap ;
  }

.gameRules {
    color: black;
    font-size: 30px;
    font-weight: 700;
    margin: 0px 15px;
}

/* Ensure that flex containers don't go over 100% */
*, *:before, *:after {
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
  }

/* Flexbox wrapper for whole page */
.wrapper {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Create flexbox for button inputs */
.playButtons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    width: 100%;
}

/* Stick footer to bottom */
main {
    flex-grow: 1;
}

/* Style and margin for buttons */
.playButtons button {
    margin: .5em;
    color: rgba(0,142,213,254);
    font-weight: 800;
    opacity: .75;
    width: 16%;
    height: 16%;
}

.playButtons button:hover, .resetbutton:hover {
    color: rgba(246,125,0,255);
}

.playButtons button:disabled {
    color: rgba(0,142,213,254);
}

/* Set image size and margin within buttons */
.playButtons img {
    width: 150px;
    height: auto;
    max-width: 90%;
}

#resultMessages {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 70px;
    width: 100%;
    flex-grow: 1;
}

#mainPara {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    max-width: 90%;
}

header {
    text-align: center;
}

footer {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    color: black;
    font-size: 30px;
    font-weight: 700;
    margin: 0px 15px;
}

.resetbutton {
    color: rgba(0,142,213,254);
    font-weight: 800;
    opacity: .75;
    padding: 12px 40px;
}

@media (max-width : 600px) {
    h1 {
        font-size: 6.5vw;
    }

    .gameRules, .mainPara, footer {
        font-size: 5vw;
    }
}