/*
----------------------------------------
	Utilities
----------------------------------------
*/

* {
	box-sizing: border-box;
	}
	
.clearfix:after {
    content: "";
    display: block;
    clear: both;
	}
	
/*
----------------------------------------
	Typography
----------------------------------------
*/

html {
	font-size: 62.5%;
	}
	
body {
	font: 1.125em/1.5
    'IBM Plex Sans',
	-apple-system,
	BlinkMacSystemFont,
	"Segoe UI",
	Roboto,
	"Helvetica Neue",
	Arial,
	sans-serif,
	"Apple Color Emoji",
	"Segoe UI Emoji",
	"Segoe UI Symbol";
	font-weight: 400;
    }
    
a {
	}
	
a:hover {
	}
	
em {
	font-style: italic;
	}
	
h1 {
	font-size: 1.75em;
	line-height: 1.125;
	margin-bottom: 1.5em;
	}
	
h2 {
	font-size: 1em;
	line-height: 1.5;
	margin-bottom: 1.5em;
	}
	
p {
	margin-bottom: 1.5em;
	}
	
ul {
	font-size: 0.875em;
	line-height: calc((1/0.875)*1.5);
	margin-bottom: 3em;
	}
		
li {
	padding-left: 1em;
	position: relative;
	}
	
li:before {
	content: "—";
	position: absolute;
	left: 0;
	}
	
p#greeting {
	font: 0.875em/calc((1/0.875)*1.5) 'IBM Plex Mono', monospace;
	font-style: italic;
    margin-bottom: 1.5em;
    }
	
figure #photo p {
  	transform: translateX(-75%) translateY(-25%) skewX(-11.34deg);
  	font-size: 2.5em;
	font-style: italic;
	text-align: center;
	}
	
figure #photo p span {
	transform: translateX(-50%) translateY(-50%) skewX(11.34deg);
	}
	
figure figcaption {
	font: 0.75em/1.5 'IBM Plex Mono', monospace;
	font-style: italic;
	text-align: center;
	}
	
.button {
	font-size: 1em;
	text-align: center;
	text-decoration: none;
	margin-top: 0.375em;
	margin-bottom: 2em;
	}
	
.button span:after {
	content: " →";
	}
	
footer {
	font: 0.75em/1.5 'IBM Plex Mono', monospace;
	font-style: italic;
	}
	
/*
----------------------------------------
	Layout
----------------------------------------
*/
	
#container {
	width: 90%;
	margin: 0 auto;
	padding: 1.5em 0 3em 0;
	/*border-top: 0.625em solid;*/
	}
	
header, #page {
	max-width: 30em;
	}
	
figure {
	width: 75%;
	margin: 0 auto 1.5em;
	}
	
figure #photo {
	position: relative;
	}
	
figure #photo a {
	display: inline;
	}
	
figure #photo img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	margin-bottom: 1.5em;
	}
	
figure #photo p {
	position: absolute;
	left: 100%;
	top: 0%;
	display: inline-block;
	width: 30%;
	height: 30%;
	}
	
figure #photo p span {
	position: absolute;
	left: 50%;
	top: 50%;
	}
	
figure figcaption #instagram {
	display: inline;
	width: 2.5em;
	height: 2.5em;
	opacity: 0.125;
	margin: 1em auto 0;
	}
	
.button {
	display: block;
	padding: 0.625em 1.25em;
	border: none;
	border-radius: 2em;
	}
	
.button:active {
	}
	
footer #signature {
	width: 200px;
	margin-bottom: 3em;
	}
	
/*
----------------------------------------
	Appearance Modes
----------------------------------------

# Theme colors

 Tint 10: #ffffff
 Tint 09: #edf5f7
 Tint 08: #dbebf0
 Tint 07: #cae0e8
 Tint 06: #b8d6e0
 Tint 05: #a6ccd9
 Tint 04: #94c2d1
 Tint 03: #82b8c9
 Tint 02: #71adc1
 Tint 01: #5fa3ba
    Blue: #4d99b2
Shade 01: #458aa0
Shade 02: #3e7a8e
Shade 03: #366b7d
Shade 04: #2e5c6b
Shade 05: #274d59
Shade 06: #1f3d47
Shade 07: #172e35
Shade 08: #0f1f24
Shade 09: #080f12
Shade 10: #000000

*/
		
@media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {

	body {
		color: #61696b;
		background-color: #f2f3f3;
		}
	
	a {
		color: #366b7d;
		}
	
	a:hover {
		color: #2e5c6b;
		}
	
	::selection {
		background: rgba(255, 215, 100, 0.5);
		}
	
	h1 {
		font-weight: 600;
		color: #191B1B;
		}
	
	h2 {
		font-weight: 600;
		color: #3e7a8e;
		}
	
	li:before {
		color: #3e7a8e;
		}
	
	#container {
		border-color: #c5d5db;
		}
		
	figure #photo img {
		background: #d7dadb;
		}
	
	figure #photo p {
		color: #366b7d;
		background-color: hsla(0, 0%, 100%, 0.95);
		}
		
	.button {
		color: #f2f3f3;
		background-color: #366b7d;
		}
	
	.button:hover {
		color: #fff;
		background-color: #2e5c6b;
		}
	
	.button:active {
		background-color: #274d59;
		}
	
	footer {
		color: #666;
		}
	
	footer a {
		color: #666;
		}

}

@media (prefers-color-scheme: dark) {
	
	img {
    	opacity: 0.85;
  		}
  
	body {
		color: #a1a8aa;
		background-color: #15191b;
		}
	
	a {
		color: #71adc1;
		}
	
	a:hover {
		color: #82b8c9;
		}
	
	::selection {
		background: rgba(255, 215, 100, 0.15);
		}
	
	h1 {
		font-weight: 500;
		letter-spacing: 0.35px;
		color: #d7dadb;
		}
	
	h2 {
		font-weight: 500;
		letter-spacing: 0.35px;
		color: #71adc1;
		}
		
	ul {
		font-weight: 300;
		letter-spacing: 0.35px;
		}
	
	li:before {
		color: #71adc1;
		}
	
	#container {
		border-color: #2b3336;
		}
		
	p.introduction {
		font-weight: 300;
		}
		
	figure #photo img {
		background: #303436;
		}
	
	figure #photo p {
		color: #366b7d;
		background-color: hsla(0, 100%, 100%, 0.75);
		}
	
	.button {
		font-weight: 400;
		color: #181a1b;
		background-color: #71adc1;
		}
	
	.button:hover {
		color: #000;
		background-color: #82b8c9;
		}
	
	.button:active {
		background-color: #94c2d1;
		}
	
	footer {
		font-weight: 300;
		color: #878787;
		}
	
	footer a {
		color: #878787;
		}
		
}

/*
----------------------------------------
	Responsive
----------------------------------------
*/

@media (min-width: 15em) {
	
	body {
		font-size: 1.125em;
		}
		
	figure {
		margin: 4em auto 2em;
		}

	}
	
@media (min-width: 20em) {
	
	body {
		font-size: 1.625em;
		}
		
	#container {
		width: 85%;
		padding: 2em 0 4em 0;
		}

	}
	
@media (min-width: 375px) {
	
	body {
		font-size: 1.75em;
		}

	}

@media (min-width: 30em) {
		
	figure {
		max-width: 20em;
		}
		
	figure #photo p {
		font-size: 3.0em;
		}
		
	.button {
		display: inline-block;
		padding: 0.5em 1em;
		}
		
	}
	
@media (min-width: 40em) {

	body {
		font-size: 2em;
		}
		
	h1 {
		font-size: 2em;
		}
		
	ul {
		margin-left: -1em;
		}
		
	#container {
		width: 80%;
		}
		
	figure #photo p {
		font-size: 3.5em;
		}
		
	footer {
		font-size: 0.625em;
		}
		
	}
	
@media (min-width: 50em) and (orientation: landscape) {

	body {
		font-size: 1.75em;
		}
		
	h1 {
		font-size: 2em;
		margin-bottom: 0.75em;
		}
		
	ul {
		columns: 15em auto;
		}
		
	ul li {
		display: inline-block;
		width: 100%;
		}
	
	#container {
		width: 85%;
		padding: 4em 0 8em 0;
		}
		
	header, #page {
		float: left;
		width: 65%;
		}
		
	figure {
		float: right;
		width: 30%;
		margin: 0;
		}
		
	figure #photo p {
		font-size: 2.25em;
		}
		
	footer {
		font-size: 0.75em;
		}
		
	}
	
@media (min-width: 65em) and (orientation: landscape) {

	body {
		font-size: 2.1em;
		}
		
	figure #photo p {
		font-size: 2.5em;
		}
		
	figure figcaption {
		font-size: 0.625em;
		}
		
	footer {
		font-size: 0.625em;
		}
		
	}
	
@media (min-width: 80em) and (orientation: landscape) {

	#container {
		width: 75%;
		}
		
	}
		
@media (min-width: 95em) and (orientation: landscape) {
		
	body {
		font-size: 2.8em;
		}
		
	h2 {
		font-size: 0.875em;
		line-height: calc((1/0.875)*1.5);
		margin-bottom: calc((1/0.875)*1.5em);
		}
		
	ul {
		font-size: 0.75em;
		line-height: calc((1/0.75)*1.5);
		}
		
	figure #photo p {
		font-size: 2.375em;
		}
		
	figure figcaption {
		font-size: 0.5em;
		}
		
	.button {
		font-size: 0.875em;
		}
		
	footer {
		font-size: 0.5em;
		}
		
	}
	
/*
----------------------------------------
	Print
----------------------------------------
*/

@media print {

	body {
		background: none;
		font-size: 1em;
		}
		
	#container {
		border: none;
		}
		
	}