:root {
	--accent: #b6607c;
	--accent2: #6c437a;
	--important: #a83f48;
	--back: #d9d3d9;
	--bgc: #b8b0b9;
	--fore: #2a202a;
	--bg: url("images/tausta.jpg");
	--pic1: url("images/kuva1.jpg");
	--headerh: 7vmax;
	--normal: 'Figtree', 'Helvetica', 'Arial', 'Free Sans', sans-serif;
	--display: 'Baskervville', 'Times', 'Times New Roman', 'Free Serif', serif;
	--tight: -0.07vmax;
	--kinda-tight: -0.05vmax;
	--loose: 0.1vmax;
	--ssstier: linear-gradient(to right, #b6607c, var(--fore), var(--fore));
	--sstier: linear-gradient(to right, #823e69, var(--fore), var(--fore));
	--stier: linear-gradient(to right, #a83f48, var(--fore), var(--fore));
	--atier: linear-gradient(to right, #d37755, var(--fore), var(--fore));
	--btier: linear-gradient(to right, #566794, var(--fore), var(--fore));
}

::selection {
	color: var(--back);
	background-color: var(--accent);
}

* {
	font-family: var(--normal);
	font-optical-sizing: auto;
	font-style: normal;
	font-variation-settings: 'wdth' 100;
}

h1, nav {
	text-transform: uppercase;
}

h2, h3 {
	font-style: normal;
	font-weight: 700;
}

body {
	background-color: var(--back);
	color: var(--fore);
	font-weight: 500;
}

h1 {
	letter-spacing: var(--tight);
}

#shit {
	background-color: var(--back);
	width: 60vmax;
	margin: auto;
	margin-top: 8vmin;
}

header {
	width: 100%;
	height: var(--headerh);
}

header div {
	display: inline-block;
	padding: 1vmax;
	padding-left: 3vmax;
}

header p {
	font-size: 1vmax;
	font-weight: 700;
	font-style: italic;
	margin-top: -0.5vmax;
	color: var(--accent);
}

h1 {
	font-family: var(--display);
	font-size: 2.5vmax;
	margin: 0;
}

main {
	font-size: 0.75vmax;
}

main h2 {
	font-family: var(--display);
	font-size: 2vmax;
	margin-top: 0;
	margin-bottom: 1.5vmax;
}

main p {
	letter-spacing: normal;
}

iframe {
	height: 8vmax;
	width: 100%;
	border: none;
}

nav {
	letter-spacing: var(--loose);
	width: 100%;
	height: 3vmax;
	text-align: center;
	display: table;
	white-space: nowrap;
	table-layout: fixed;
	border-top: 0.25vmax solid var(--fore);
	border-bottom: 0.25vmax solid var(--fore);
}

nav a {
	text-decoration: none;
	font-weight: 700;
	display: table-cell;
	height: 100%;
	transition-duration: 0.1s;
	color: var(--fore);
	font-size: 1vmax;
}

nav a:hover {
	background-color: var(--fore);
	color: var(--back);
	transition-duration: 0.2s;
}

strong {
	font-weight: 700;
}

section {
	padding: 3vmax;
	padding-bottom: 0;
	width: 75%;
}

.bar {
	padding: 3vmax;
	padding-bottom: 0;
	width: 75%;
	display: table-row;
	width: 100%;
}

section a {
	color: var(--accent);
	font-weight: 700;
}

section p {
	padding-left: 1vmax;
}

section a:visited {
	color: var(--accent2);
}

section a:hover {
	color: var(--back);
	background-color: var(--important);
	text-decoration: none;
}

article {
	padding: 3vmax;
	padding-bottom: 0;
	color: var(--back);
}

article .content {
	background-color: var(--fore);
	padding: 0.75vmax;
	display: flex;
}

article .block {
	padding: 0.375vmax;
	max-width: 80%;
}

article img {
	height: 5vmax;
}

footer {
	min-height: 6vmax;
	color: var(--fore);
	font-size: 0.5vmax;
	text-align: center;
}

footer div {
	padding: 3vmax;
}

.feature {
	display: flex;
}

.feature h2 {
	border-top: 0.15vmax solid var(--fore);
	border-bottom: 0.15vmax solid var(--fore);
	font-style: italic;
}

.feature p {
	padding-right: 1vmax;
}

.feature img {
	width: 10vmax;
	padding-right: 1vmax;
}

@media only screen and (orientation: portrait) {
  #shit {
    width: 100%;
  }
}