@import url('https://fonts.googleapis.com/css2?family=Ballet:opsz@16..72&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


html {
	background:
		linear-gradient(
			rgb(43 41 41 / 90%),
			rgb(43 41 41 / 90%)
		),
		url(tausta.png) 0 0 / cover fixed no-repeat;

	text-align: justify; 
	font-family: "Open Sans", verdana;
	min-height: 100%;
}

body {
	margin: 0;
	min-width: 1000px;
	min-height: 100vh;
	background: transparent;
}

.sisalto {
	width: 900px; 
	margin: auto; 
	background-color: #383a39; 
	padding: 20px 0px;
}

header {
	width: 900px;
	margin: auto;
	text-align: center;
}

h1 {
	margin: 30px 100px; 
	font-family: "Ballet";
	font-size: 70px;
	font-weight: normal; 
	font-style: ; 
	text-shadow: 1px 1px 5px #070a09; 
}

h2 {
	margin: 30px 80px;
	font-weight: normal; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
	font-size: 18px; 
}

p {
	margin: 20px 80px; 
	font-size: 13px; 
	letter-spacing: 1px; 
	line-height: 22px; 
}

a {
	text-decoration: none; 
}

.navi a {
	font-family: serif;
	text-transform: uppercase; 
	color: #545618; 
}

.navi a:hover {
	letter-spacing: 3px; 
	transition: 1s;
}

.otsikko {
	height: 200px;
	width: 200px; 
	object-fit: cover; 
	border-radius: 50%; 
	filter: grayscale(100%);
	border: 10px solid #cacaca; 
	box-shadow: 0 0 10px #000000; 
	z-index: 1;
}

.navi {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

ul {
	padding: 0px; 
}

li {
	list-style-type: none; 
	padding: 10px 20px; 
	background-color: #13201c; 
}

.vasen {
display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.vasen li {
	clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 25% 100%);
	margin-right: -10px;
	border-top: 5px solid #4f4e1d; 
}

.oikea li {
	clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);
	margin-left: -10px; 
	border-top: 5px solid #4f4e1d; 
}

.linkki1, .linkki3 {
	width: 200px;
}

.linkki2, .linkki4 {
	width: 140px; 
}