/* A margin and padding are provided 0 
    box-sizing border box is used to include 
    padding and border in the total width 
    and height of the element, and font-family 
    can be specified by the user */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Courier New', Courier, monospace;
    }

p { font-size: 1em; }

/*Navigation bar*/
.topnav {
  overflow: hidden;
  background-color: #000000;
  padding: 0px;
  /*width: 100%;*/
}

.topnav a {
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  font-family: Verdana, sans-serif;
  text-decoration: none;
  font-size: 20px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #D2000A;
  color: white;
}




    /* The user display allows you to specify the
    background colour and height. The 
    display:flex property, which is aligned at the
    centre, is used to fill available free space 
    or to shrink them to prevent overflow. */
    body {
        background-color: #f7f7f7;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    /* font-weight Specifies weight of glyphs 
    in the font, their degree of blackness or 
    stroke */
    h1 {
        font-weight: 900;
        margin-bottom: 12px;
    }

    div {
        width: 480px;
        background-color: #fff;
        margin: 12px 0;
        padding: 14px 14px;/*2nd value moves content horizontally*/
        text-align: center;
        /*box-shadow: 2px 2px 8px 2px #aaa;*/
    }


.div_right {
	float: right;
        width: 220px;
        background-color: #fff;
        margin: 12px 0;
        padding: 4px;
        text-align: center;
	justify-content: right;
    }

    input[type=number] {
        width: 84px;
        font-size: 18px;
        padding: 8px;
        margin: 0px 8px 8px 8px;
    }

    /* The text-transform:uppercase property 
    causes characters to be raised to uppercase. 
    The button's font-weight, font-size, and 
    cursor type can be customised by the user. */
    button {
        text-transform: uppercase;
        font-weight: 900;
        font-size: 20px;
        margin: 12px 0;
        padding: 8px;
        cursor: pointer;
        letter-spacing: 1px;
    }

    /* The font-weight, font-size, background-color, 
    and border can all be customized by the user. 
    The border-radius property allows you to give 
    an element rounded corners.*/
    input[type=text] {
        font-size: 22px;
        padding: 8px 0;
        font-weight: 900;
        text-align: center;
        background-color: #f7f7f7;
        border: 2px solid #ccc;
        border-radius: 6px;
    }