@font-face {
    font-family: 'futurahandmedium';
    src: url('futurahand-webfont.woff2') format('woff2'),
         url('futurahand-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body {
	background-color: #EAF4FD;
	
	color: #f173349;
	font-family: sans-serif;
}
.topback {
	background-color: #000000;
}
.menuback {
	background-color: #eeeeee;
}
.contentback {
	background-color: #333333;	
}

.width33 {
	width: 33%;
}
.width66 {
	width: 66%;
}
.width100 {
	width: 100%;
}

.rivi {
	display: flex;
	gap: 1rem;
}
.sarake1 {
	flex: 1;
}

.sarake2 {
	flex: 2;
}


.sarake3 {
	flex: 3;
}

.otsikkokuvake {
	width: 2rem;
}
.screenlogo {
	padding: 0.5rem;
	width: 10rem;
}

.kuvake {
	width: 2rem;
}
.textsizesmall {
	font-size: 1rem;
}
.textsizenormal {
	font-size: 1.5rem;
}
.textsizebig {
	font-size: 2rem;
}

.green {
	color: green;
}
.white {
	color: white;
}

.yellow {
	color: yellow;
}

.red {
	color: red;
}

.backblue {
	background-color: #065EC0;
}

.titleline {
	padding: 3px;
	margin: 0px;

	vertical-align: center;
}

.spacebetween {
	padding: 0px 20px 20px 0px;
}
.height300 {
	height: 200px;
}
.centeritems {
	display: flex;
	justify-content: center; /* Keskittää vaakasuunnassa */
  	align-items: center;     /* Keskittää pystysuunnassa */
  	height: 150px;
}

.verticalcenter {
	align-items: center;
} 

.margin20 {
	margin: 20px;
}
.bottomline {
	border-width:0px 0px 1px 0px;
	border-style: solid;
}

h1 {
	font-family: sans-serif;
	font-size: 3rem;
	background-color: black;
	
	margin: 0px;
	margin-top: 20px;
	text-align: center;

	padding: 0px;
}
h2 {
	font-family: sans-serif;
	font-size: 1.5rem;
	text-align: center;
	background-color: black;
	
	padding: 3px;

}
h3 {
	font-family: sans-serif;
	font-size: 1.5rem;
	text-align: left;
	background-color: transparent;
	
	padding: 3px;

}


}

div.menu {
	font-family: futurahandmedium;
	
	
}
a.menu {
	margin-left: 1rem;
	margin-right: 1rem;
	width: 100%;
	font-size: 1.5rem;
	color: #cccccc;
	background-color: transparent;
	text-decoration: none;
}
a:visited.menu {
	color: #cccccc;
	background-color: transparent;
	text-decoration: none;
}
a:hover.menu {
	color: black;
	background-color: #aaffaa;
	text-decoration: none;
}

a.menubar {
	margin: 1rem;
	width: 100%;
	font-size: 1.5rem;
	color: #eeeeee;
	background-color: transparent;
	text-decoration: none;
}
a:visited.menubar {
	color: #eeeeee;
	background-color: transparent;
	text-decoration: none;
}
a:hover.menubar {
	color: black;
	background-color: #aaffaa;
	text-decoration: none;
}

a.a-list {
	margin: 1rem;
	width: 100%;
	font-size: 1.5rem;
	color: #eeeeee;
	background-color: transparent;
	text-decoration: none;
}
a:visited.a-list {
	color: #eeeeee;
	background-color: transparent;
	text-decoration: none;
}
a:hover.a-list {
	color: black;
	background-color: #aaffaa;
	text-decoration: none;
}




img.content {
	width: 900px;
	height: 700px;


}

img.logo {
	width: 5rem;
}

img.appimg {
	width: 13rem;
}
img.instrimg {
	width: 20rem;
}
img.instrimg2 {
	width: 30rem;
}

img.atkkuva {
	width: 50%;
}

.flex-container {
	display: flex;
}
.flex-container > div {
	margin: 1px;
	padding: 1px;
}
.center {
	align-items: center;
	justify-content: center;
}
.widthcontent {
	width: 75%;
}

.textcenter {
	text-align: center;
}
.textleft {
	text-align: left;
}
div.title {
	align-self: center;
}
.flex-header {
	display: flex;
}

.flex-container > header {
	margin: 1px;
	padding: 1px;
}
.flex-container-main {
	margin-left: auto;
	margin-right: auto;
	padding: 0px 5px 0px 5px;
	overflow: hidden;
}
.fixedpage {
	width: 1000px;
}
img.release {
	width: 15rem;
}
img.softlist {
	width: 10rem;	
}

img.instrimg {
	width: 10rem;	
}

img.appimg {
	width: 10rem;	
}