body {
    font-family: 'Comic Sans', cursive;
    font-size:1.25em;
}

main, section {
    width:90%;
    margin-left:auto;
    margin-right:auto;
}

header {
    text-align: center;
}

h1, h2, h3, h4, h5, h6 {color:brown;}

div {
    margin: 2em auto;
    width:90%;
}

label {
    cursor: pointer;
}

label span {
    display:inline-block;
    transition: all linear .2s;
}

input[type='text'], select {
    padding:.25em;
    font-family: sans-serif;
    font-size:inherit;
    color:black;
}

input[type='text'] {
    border:none;
    text-align: right;
}

input[type='checkbox']~section {
    display:none;
}

input[type='checkbox']:checked~section {
    display:block;
}

input[type='checkbox']:checked~label span {
    transform:rotate(90deg);
}

input[type='number']~div {
    width:100%;height:100%;
}

section~p {
    text-align: center;
    margin-top:2em;
}

button {
    padding:1em;
    background-color: brown;
    color:white;
    font-family: inherit;
    font-size:inherit;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, .3);
    cursor:pointer;
}

tr {
    cursor: pointer;
}

th,td {
    border: 3px solid chocolate;
    width:50%;
    padding:.25em;
    transition: all linear .2s;
}