h1 {
    font-size: 3.2em;
}
h2 {
    font-size: 1.6em;
}
body, input, select, textarea {
    color: #333333;
}
div.content {
    flex-direction: column;
    margin-bottom: 2em;
}
div.pads {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
div.kpd {
    display: inline-flex;
    flex-direction: row;
}
#touchpad {
    margin-top: 1em;
    max-width: 70%;
}
button#clearboard {
    max-width: 95%;
    white-space: normal;
    line-height: 1em;
    align-items: center;
}

button.kpd {
    font-size: 2.75em;
}

.posts {
    margin: 0 0 2em -4em;
    width: calc(100% + 4em);
}

.posts article {
    margin: 0 0 3em 4em;
    width: calc(33.33333% - 4em);
}

canvas {
    display: block;
    width: 100%;
}

@media screen and (max-width: 1680px) {
    .posts article {
	width: calc(50% - 4em); }
    .posts article:nth-last-child(3) {
	margin-bottom: 3em;
    }
    body, input, select, textarea {
	font-size: 11pt;
    }
}

@media screen and (max-width: 1280px) {
    body, input, select, textarea {
	font-size: 11pt;
    }
}

@media screen and (max-width: 980px) {
    body, input, select, textarea {
	font-size: 11pt;
    }
    h1 {
	font-size: 3em;
    }
    h2 {
	font-size: 1.5em;
    }
}

@media screen and (max-width: 736px){
    .posts {
	margin: 0 0 2em -2em;
	width: calc(100% + 2em);
    }
    .posts article {
	margin: 0 0 2em 2em;
	width: calc(50% - 2em);
    }
    .posts article:nth-last-child(3) {
	margin-bottom: 2em;
    }
    body, input, select, textarea {
	font-size: 11pt;
    }
    button.kpd {
	font-size: 2.5em;
    }
}

@media screen and (max-width: 480px){
    .posts article {
	margin: 0 0 2em 2em;
	width: calc(100% - 2em);
    }
    .posts article:nth-last-child(3) {
	margin-bottom: 2em;
    }
    body, input, select, textarea {
	font-size: 11pt;
    }
    h1 {
	font-size: 2.5em;
    }
    h2 {
	font-size: 1.25em;
    }
    h3 {
	font-size: 1.125em;
    }
    #header .logo {
	font-size: 1.125em;
    }
    #touchpad {
	max-width: 80%;
    }
    button.kpd {
	font-size: 2.5em;
    }
    button.large {
	font-size: .9em;
	height: 3.33em;
	line-height: 3.33em;
    }
}

@media screen and (orientation: landscape) {
    div.content {
	flex-direction: row;
	margin-bottom: 1em;
    }
    div.pads {
	max-width: 40%;
	margin-left: 2em;
    }
    canvas {
	max-width: 90vh;
	max-height: 90vh;
    }
    #touchpad {
	margin-top: 0;
	max-width: 90%;
    }
}

@media screen and (orientation: landscape) and (max-height: 480px){
    button.kpd {
	font-size: 2.5em;
    }
    button.large {
	font-size: .9em;
	height: 3.33em;
	line-height: 3.33em;
    }
    div.pads {
	max-width: 50%;
	margin-left: 0;
    }
}

header.major > :last-child {
    margin: 0 0 1.5em 0;
    padding-right: 0;
}