/*body*/

        body {

            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

            background-color: azure;

            color: cadetblue;

            text-align: center;

            margin: 0;

            padding: 15px;
        }

        /*container*/

        .container {

            max-width: 550px;

            margin: 0 auto;

            background-color: bisque;

            padding: 15px;
        }

        /*input box*/

        input[type="text"],
        input[type="number"] {

            padding: 3px;

            margin: 1px;

            font-size: 18px;
        }

        /*button*/

        button {

            padding: 5px 15px;

            margin: 5px;

            background-color: darkcyan;

            color: burlywood;

            font-size: 18px;
        }

        /*error*/

        #badmessages,
        #Error {

            color: lightcoral;

            font-weight: bolder;

            margin: 5px 0;
        }

        /*spacing and layout*/

        h1 {

            margin-bottom: 15px;
        }

        label {

            display: inline-block;

            margin-right: 5px;
        }

        #startsection,
        #quizsection,
        #resultssection {

            margin-bottom: 15px;
        }

        #quizsection,
        #resultssection {

            display: none;
        }