/* colors */
:root {
	--clouds: #ffffff;
	--morning-light: #fffae6;
	--striking-sky-blue: #3399ff;
	--sky-blue: #0099e6;
	--shadow-blue: #004080;
	--peeking-sun-orange: #ffcc66;
	--morning-dew: #aaff80;
	--black: #333333;
}

/* fonts */
@font-face {
	font-family: 'SF-Pro';
	src: url("fonts/SF-Pro.woff");
	font-weight: normal;
}
@font-face {
	font-family: 'SF-Medium';
	src: url("fonts/SF-Medium.woff") format("woff");
	font-weight: medium;
}
@font-face {
	font-family: 'SF-Bold';
	src: url("fonts/SF-Bold.woff");
	font-weight: bold;
}
@font-face {
	font-family: 'SF-Light-Italic';
	src: url("fonts/SF-Light-Italic.woff");
	font-weight: light;
	font-style: italic;
}
@font-face {
	font-family: 'SF-Heavy-Italic';
	src: url("fonts/SF-Heavy-Italic.woff");
	font-weight: extra bold;
	font-style: italic;
}


/* page layout */

	/* grids */
	.grid {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
	}

	.flex {
		display: flex;
		flex-direction: column;
	}
	.title { grid-column: 3 / 11; }
	.full { grid-column: 2 / 12; }

	.head-foot {
		grid-column: 1 / 13;
		display: grid;
		grid-template-columns: repeat(10, 1fr);
	}
	.brand { grid-column: 2 / 6; }
	.nav { grid-column: 6 / 10; }
	.icons {
		grid-column: 2 / 10;
		justify-content: center;
		position: fixed;
		bottom: 5%;
		width: 100%;
	}
	.right {
		grid-column: 10;
		position: fixed;
		bottom: 5%;
		right: 5%;
	}


	.body {
		grid-column: 2 / 12;
		display: grid;
		grid-template-columns: repeat(10, 1fr);
	}
	.main {
		grid-column: 2 / 10;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

nav {
	text-align: right;
}
ul {
	padding: 0;
}
.icons ul {
	display: table;
	position: relative;
	margins: auto;
}
.nav li {
	display: inline;
	margin-left: 10%;
}
.icons li {
	display: inline-flex;
	margin-left: 50px;
	margin-right: 50px;
}
div {
	display: flex;
	align-items: center;
}
div.h-scroll {
	background-color: var(--clouds);
	overflow: auto;
	white-space: nowrap;
	border-radius: 2%;
}
a {
	display: inline-flex;
	align-items: center;
}

/* color */
body {
	background-color: var(--morning-light);
}
.head {
	background-color: var(--clouds);;
}
h1 {
	color: var(--shadow-blue);
}
h2 {
	color: var(--shadow-blue);
}
h3 {
	color: var(--shadow-blue);
}
h4 {
	color: var(--shadow-blue);
}
p {
	color: var(--shadow-blue);
}
a {
	color: var(--shadow-blue);
}
a:hover {
	color: var(--peeking-sun-orange);
}
mark {
	background-color: var(--morning-dew);
}

/* text decoration */
nav {
	font-size: 1.2em;
}
h1 {
	font-family: 'SF-Bold', sans-serif;
}
h2 {
	font-family: 'SF-Medium', sans-serif;
}
h3 {
	font-family: 'SF-Medium', sans-serif;
	line-height: 2em;
	font-size: 1.3em;
}
h4 {
	font-family: 'SF-Medium', sans-serif;
	line-height: 1.5em;
}
p {
	font-family: 'SF-Pro', sans-serif;
	line-height: 1.5em;
	font-size: 1.2em;
}
a {
	font-family: 'SF-Bold', sans-serif;
	line-height: 1em;
	font-size: 1.4em;
	text-decoration-line: none;
}
aside {
	font-family: 'SF-Pro', sans-serif;
	line-height: 1em;
	margin-bottom: 1em;
}


/* media */
img {
	border-radius: 20%;
	border: 1px solid var(--black);
}
.h-scroll img {
	border-radius: 0%;
	margin: 0;
	padding: 0;
	border-left: 5px solid var(--black);
	border-right: 5px solid var(--black);
}
figure {
	padding: 0;
	margin: 0;
}
video {
	border-radius: 0%;
	padding: 0;
	margin: 0;
	border-left: 5px solid var(--black);
	border-right: 5px solid var(--black);
	filter: brightness(0.7);
}
canvas {
	display: inline-flex;
	border-radius: 20%;
	border: 1px solid var(--black);
	margin-right: 20px;
}