stylesheet.css

body {
    margin: 2em auto;
    font-family: 'IBM Plex Sans', sans-serif;
    background-color: #efefef4d;
    color: #333;
	line-height: 1.5em;
}

@media screen and (min-width: 50em) {
    body {
        max-width: 40em;
    }
}

body.wide {
    max-width: 80%;
}

p.narrow {
    max-width: 5em;
}

p.right-width {
    max-width: 40em;
}

.twitter {
	width: 4em;
	fill: #1da1f2
}
.block {
	border: #ccc 1px solid;
	background-color: #fff;
	padding: 1em;
	margin-bottom: 1em;
}

.form-block {
	padding: 1em 0;
	margin-bottom: 1em;
}
h1 {
	color: #0600ed;
}

h1, h2, h3 {
    line-height: 1.1em;
}

h2, h3 {
    margin-top: 2em;
}

h3 {
    font-size: 1.2em;
}

img.right {
    width: 40%;
    float: right
}

img.left {
	width: 40%;
	display: block;
}
.no-focus * {
	outline: 0;
}
table {
	border-collapse: collapse;
	margin-bottom: 4em;
}
td, th {
	padding: 0.5rem;
	border: 1px solid #333;
}

th {
	background-color: #ddd;
}

table caption, th {
	text-align: left;
	font-weight: bold;
}

blockquote {
    font-size: 1.2em;
    font-style: italic;
    border-left: 0.2em solid #ccc;
    padding: 1em;
}

input {
	border-color: #949494;
}
::placeholder,
::-webkit-input-placeholder {
	color: #757575;
	opacity: 1;
}

footer nav {
    border-top: 2px solid black;
    margin-top: 4em;
}

button, .button {
    margin: 1em 0;
    padding: 1em;
    font-size: inherit;
	cursor: pointer;
	background-color: #eee;
	border: solid 1px #333;
	text-align: center;
	display: inline-block;
}

.alt-text-img {
    width: 50%;
    margin-bottom: 10em;
}

.large-text {
    font-size: 2.2em;
    font-weight: bold;
    line-height: 1.1em;
    font-family: 'Viga', sans-serif;
}

pre {
  font-size: 1.2em;
  color: #4C7413;
}

/*
	Multi tabs
*/
.images li {
	list-style: none;
	width: 30em;
	border: green 2px solid;
	padding: 1em;
	margin-bottom: 1em;
}
.multi-tabs li {
	list-style: none;
	width: 20em;
	border: green 2px solid;
	padding: 1em;
	margin-bottom: 1em;
}

.images a:hover,
.images a:focus,
.multi-tabs a:hover,
.multi-tabs a:focus {
	text-decoration: none;
	outline: green 1px solid;
}


.multi-tabs li.card a {
	text-decoration: none;
}

.multi-tabs li.card a:hover,
.multi-tabs li.card a:focus {
	text-decoration: underline;
}

.multi-tabs li.card p a {
	text-decoration: underline;
}

.multi-tabs li.card p a:hover,
.multi-tabs li.card p a:focus {
	text-decoration: none;
}

.multi-tabs img {
	width: 20em;
}


.multi-tabs .to-be-covered {
	position: relative;
}

.multi-tabs .to-be-covered:focus-within,
.multi-tabs .to-be-covered:hover,
.multi-tabs li.card:focus-within,
.multi-tabs li.card:hover {
	outline: thick double green;
}

.multi-tabs li.skip-tab a:hover img {
	outline: thick double green;
}

.multi-tabs .to-be-covered a span {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.multi-tabs .pseudo a::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

/* extra link */
.multi-tabs p a {
	text-decoration: underline;
	position: relative;
	z-index: 1;
}

.multi-tabs p a:hover,
.multi-tabs p a:focus {
	text-decoration: none;
}

/* Tooltips. */

/* Tooltip on aria-label. */
.has-tooltip {
	margin: 0;
	padding: 0;
	border: 1px solid transparent;
	background: transparent;
}

.has-tooltip:hover,
.has-tooltip:focus {
	border: 1px solid #333;
}
.heart {
	width: 2em;
	height: 2em;
	fill: #c00;
}

button[aria-label] {
	position:relative
}

button[aria-label]::after {
	content:attr(aria-label);
	display:none;
	position:absolute;
	top:70%;
	left:10px;
	padding:0.5em;
	white-space:nowrap;
	overflow:visible;
	color:#fff;
	background-color: #1e97bc;
}

button[aria-label]:hover::after,
button[aria-label]:focus::after {
	display:block
}

/* Tooltip on aria-describedby. */
.question-mark {
	width: 2em;
	height: 2em;
}
[role="tooltip"] {
	display: none;
}

button:hover + [role="tooltip"],
button:focus + [role="tooltip"] {
	display: block;
}

.long-tooltip-container {
	position:relative
}

[role="tooltip"] {
	position:absolute;
	top:0;
	left:2em;
	min-width: 20em;
	max-width: 30em;
	padding: 1em;
	overflow:visible;
	border: solid 1px #333;
	background-color: #fefefe;
}

[role="tooltip"] img {
	margin: 1em 0;
}

/* Tooltip on emoji. */

span.tooltip {
	position: relative;
}

span.tooltip:hover::after,
span.tooltip:focus::after{
	content:attr(aria-label);
	display:none;
	position:absolute;
	top:70%;
	left:10px;
	padding:0.5em;
	white-space:nowrap;
	overflow:visible;
	color:#fff;
	background-color: #1e97bc;
}

span.tooltip:hover::after,
span.tooltip:focus::after {
	display:block
}

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

/* Skip links (works together with .screen-reader-text). */
.skip-link {
	background-color: #eee;
	color: #333;
	display: block;
	padding: 1em;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	left: 1em;
	top: 1em;
	width: auto;
	z-index: 100000;
}
/* Do not show the outline on the skip link target. */
#main[tabindex="-1"]:focus {
	outline: 0;
}

.link-image {
	text-decoration: none;
}
.link-image:hover {
	text-decoration: underline;
}
.link-image svg,
.link-image img{
	vertical-align: middle;
	width: 4em;
	height: 4em;
	padding-right: 0.3em;
}

.header-with-logo header {
	text-align: center;
	line-height: 2;
}

.header-with-logo footer {
	line-height: normal;
}
.header-with-logo h1  {
	color: #0600ed;
	line-height: 2;
}

.header-with-logo h1 span {
	color: #333;
}

.header-logo {
	width: 150px;
	height: auto;
}

.header-with-logo ul {
	margin-left: 3em;
	line-height: 3;
	list-style: none;
}

.header-with-logo ul li {
	border-bottom: 1px solid #757575;
}


button.expandable + [aria-hidden] {
	display: none;
}

button.expandable + [aria-hidden="false"] {
	display: block;
}

.form-errors input {
	margin-top: 2em;
}

.description {
	margin: 0;
	font-size: 0.8em;
}

.errors li {
	margin: 0 2em;
}
.errors h3 {
	margin: 0;
}

.error-message,
.errors h3 {
	color: #b00;
	font-weight: bold;
}

.new-line {
	display: block;
}

footer {
	margin-top: 2em;
	border-top: solid 2px #ccc;
}