@font-face {
	font-family: 'Red Hat Display';
	src: url('./fonts/RedHatDisplay/static/RedHatDisplay-Regular.ttf');
}
@font-face {
	font-family: 'Questrial';
	src: url('./fonts/Questrial/Questrial-Regular.ttf');
}


*, *::before, *::after
{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	font-size: 18px;
}

html, body {
	padding: 0;
	margin: 0;
	width: 100%;
	min-height: 100%;
}

body {
	font-family: 'Red Hat Display', 'Questrial', Tahoma, Geneva, sans-serif;

	background-color: #fff;
	color: #606060;

	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

#defs {
	display: none;
}

header, section, footer {
	margin-left: 5%;
	margin-right: 5%;

	-webkit-transition: margin-left .5s ease .1s, margin-right .5s ease .1s;
	-moz-transition: margin-left .5s ease .1s, margin-right .5s ease .1s;
	-ms-transition: margin-left .5s ease .1s, margin-right .5s ease .1s;
	-o-transition: margin-left .5s ease .1s, margin-right .5s ease .1s;
	transition: margin-left .5s ease .1s, margin-right .5s ease .1s;
}

section p {
	line-height: 1.5em;
}

/* Handle different screen sizes (above everything is based on small 320px screen) */
@media only screen and (min-width: 300px) {
	body {
		font-size: 1.1em;
	}
}

@media only screen and (min-width: 480px) {
	header, section, footer {
		margin-left: 8%;
		margin-right: 8%;
	}
}

@media only screen and (min-width: 600px) {
	header, section, footer {
		margin-left: 10%;
		margin-right: 10%;
	}
}

@media only screen and (min-width: 768px) {
	body {
		font-size: 1.1em;
	}
	header, section, footer {
		margin-left: 12%;
		margin-right: 12%;
	}
}

@media only screen and (min-width: 940px) {
	body {
		font-size: 1.3em;
	}
	header, section, footer {
		margin-left: 15%;
		margin-right: 15%;
	}
}

@media only screen and (min-width: 1280px) {
	body {
		font-size: 1.4em;
	}
}

/*
header span.with-logo::before {
	position: absolute;
	content: " ";
	width: 6em;
	height: 2em;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20style%3D%22fill%3A%20rgb(96%2C%2096%2C%20255)%3B%22%20d%3D%22M%20232.591%20256.964%20C%20262.958%20221.475%20332.501%20215.399%20331.056%20259.057%20C%20325.459%20286.903%20276.009%20306.738%20216.574%20262.535%20C%20181.515%20231.938%2098.127%20229.471%2091.225%20256.964%20C%2086.372%20295.819%20176.11%20288.122%20211.699%20270.195%20C%20188.566%20295.86%2076.954%20303.374%2081.476%20258.357%20C%2085.422%20219.071%20181.466%20222.309%20217.967%20254.875%20C%20273.533%20294.516%20317.15%20280.513%20321.317%20257.426%20C%20321.934%20217.556%20264.006%20240.786%20232.591%20256.964%20Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 6em 2em;
}
*/

#greeting {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
/* Handle different screen sizes (above everything is based on small 320px screen) */
@media only screen and (min-width: 600px) {
	#greeting {
		flex-direction: row;
		justify-content: space-between;
	}
}

#goodbye {
	height: 5em;
	white-space: pre;
}

#goodbye .message {
	line-height: 1.4em;
}

#goodbye .cursor {
	display: inline-block;
	background-color: #606060;
	width: 0.7em;
	height: 1.2em;
	line-height: 1.4em;
	vertical-align: text-bottom;

	-webkit-transition: background-color .5s ease 1s;
	-moz-transition: background-color .5s ease 1s;
	-ms-transition: background-color .5s ease 1s;
	-o-transition: background-color .5s ease 1s;
	transition: background-color .5s ease 1s;
}

#goodbye .cursor.hidden {
	background-color: #ffffff;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

/* Handle different screen sizes (above everything is based on small 320px screen) */
@media only screen and (min-width: 600px) {
	img {
		width: 50%;
		max-width: 20em;
	}
}

a {
	text-decoration: none;
	color: #6060ff;
}

a:hover {
	text-decoration: underline;
}

.icon {
	display: inline-block;
	margin: 0 2px 0 2px;
	vertical-align: middle;
}

.icon svg {
	width: 1em;
	height: 1em;
}

svg path {
	fill: #606060;
}

.no-break {
	white-space: pre;
}