@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Cormorant+Garamond:wght@300&display=swap');


/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

body {

	position:relative;
  overflow: scroll;
}


:root {
	--perus-font: 'Cormorant Garamond', serif;
	--otsikko-font: 'Cinzel Decorative', cursive;




}

.yhteys {
	width: 80%:
	height: 30%:
	border: 1px solid red;	
}



#kieli {
font-family: 'Cormorant Garamond', serif;

	position:fixed;
	top:10px;
	left:10px;
	z-index:5;
	color:#271718;

}

#kielivalk {
	position:absolute;
	top:10px;
	left:10px;
	z-index:5;
	color:#fff;
font-family: var(--perus-font);

}


.tiedosto {
	border: 0px;
	background: transparent;
	color: #fff;
  vertical-align: middle;	
font-family: var(--perus-font);
	font-size: 10pt;
	padding: 10px;

}
.tiedosto:hover {
	background: #dabfb4;
	color: #2f2c3a;
	padding: 10px;
}

.some {
	display:block;
margin-top:1%;
  width: 100%;


}

.overlay {
font-family: var(--otsikko-font);

  height: 100%;
  width: 0%;
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  background-color: rgba(141, 87, 68, 0.9);
  overflow-x: hidden;
  transition: 0.7s;
  backdrop-filter: blur(4px);
}

.overlay-content {
font-family: var(--otsikko-font);
  font-weight: 100;
  position: relative;
  top: 25%;
  right: calc(10% - 56px);
  width: 100%;
  text-align: right;
  margin-top: 30px;

}

.overlay a {
font-family: var(--otsikko-font);

  padding: 8px;
  text-decoration: none;
  font-size: 36px;
	color:#271718;
  display: block;
  transition: 0.5s;
}

.overlay a:hover, .overlay a:focus {
  color: #7e5341;
font-family: var(--otsikko-font);
}



@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}


button.accordion {
    background-color: #eee; 
    color: #444;
	font-weight: 800;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 18pt;
    transition: 0.4s;
font-family: var(--perus-font);

}

.cal-wrapper {
	width: 80%;
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;

}

button.accordion.active, button.accordion:hover {
    background-color: #aaa; 
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;	

}

.container {
position:relative;
z-index:10;
  display: inline-block;
  cursor: pointer;
	border: 1px solid #271718;
	width: 46px;
	height: 46px;
  position: fixed;
	left: 90%;
	top: 5%;
}

.container__home {

	border:1px solid white;
}



.bar1 {
  width: 24px;
  height: 2px;
	background-color:#271718;
  margin: 14px 0px 0px 11px;
  transition: 0.4s;
}

.bar2 {
  width: 24px;
  height: 2px;
	background-color:#271718;
  margin: 6px 0px 0px 11px;
  transition: 0.4s;
}

.bar3 {
  width: 15px;
  height: 2px;
	background-color:#271718;
  margin: 6px 0px 0px 11px;
  transition: 0.4s;
}

.container__home > * {
	background-color:white;

}

.change .bar1 {
  -webkit-transform: rotate(45deg) translate(-9px, 6px);
  transform: rotate(225deg) translate(-5px, -6px);
  width: 25px;

}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(-225deg) translate(-5px, 6px);
  width: 25px;

}


.galleria {
	width: 150px;
	height: 150px;
#padding-bottom: 20%;	
	#margin: -2px -2px -2px -2px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	display: inline-block;

	box-shadow: inset 0px 0px 0px 10px rgba(236,237,239,0.5);
	box-sizing: border-box;
	#border: 5px solid rgba(236,237,239,0.5);

	-webkit-filter:grayscale(0%);
	-moz-filter:grayscale(0%);
	-o-filter:grayscale(0%);
	filter:grayscale(0%);
	-webkit-transition:filter .1s ease-in,filter .2s ease-in;  
    -moz-transition:filter .1s ease-in,filter .2s ease-in;  
    -o-transition:filter .1s ease-in,filter .2s ease-in;  
    transition:filter .1s ease-in,filter .2s ease-in; 
}
 
.galleria:hover {
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:grayscale(100%);

}

.galleriavideo {
	width: 250px;
	height: 175px;
	margin: -2px -2px -20px -2px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top;
	display: inline-block;

	box-shadow: inset 0px 0px 0px 10px rgba(236,237,239,0.5);
	box-sizing: border-box;
	#border: 5px solid rgba(236,237,239,0.5);

	-webkit-filter:grayscale(0%);
	-moz-filter:grayscale(0%);
	-o-filter:grayscale(0%);
	filter:grayscale(0%);
	-webkit-transition:filter .1s ease-in,filter .2s ease-in;  
    -moz-transition:filter .1s ease-in,filter .2s ease-in;  
    -o-transition:filter .1s ease-in,filter .2s ease-in;  
    transition:filter .1s ease-in,filter .2s ease-in; 
}
 
.galleriavideo:hover {
	-webkit-filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-o-filter:grayscale(100%);
	filter:grayscale(100%);

}


blockquote {
  margin: 0 auto;
  padding: 1em;
  border-left: 5px solid #999;
font-family: var(--perus-font);

}
blockquote:before {
  display: none;
}
blockquote:not(:first-of-type) {
  margin-top: .5em;
}
blockquote p {
	color:#0b0b13;

	font-size: 1.25rem;
  line-height: 1.4;
font-family: var(--perus-font);
}
blockquote footer {
  margin-top: .5em;
  color: #777;

  padding: 0;
  font-size: 12pt;
  text-align: left;
font-family: var(--perus-font);
	font-weight: 100;

}


blockquote:nth-of-type(even) {
  text-align: right;
  border-left: none;
  border-right: 5px solid #999;
}
blockquote:nth-of-type(even) footer {
  text-align: right;
}
blockquote:nth-of-type(even) footer:before {
  content: '';
}

@element 'blockquote' and (min-width: 300px) {
  blockquote {
    padding: 1em 20% 1em 1em;
  }
  blockquote p {
    font-size: 14pt;
  }
  blockquote:nth-of-type(even) {
    padding: 1em 1em 1em 20%;
  }
}


hr {
  border: 0;
  margin: 1.35em auto;
  max-width: 100%;
  background-position: 50%;
  box-sizing: border-box;
}

hr {
  border-width: 0 0 1px;
  border-image: linear-gradient(
    90deg,
    rgba(11, 11, 19, 0),
    rgba(11, 11, 19, 1) 50%,
    rgba(11, 11, 19, 0) 100%) 0 0 100%;
  border-style: solid;
}

/*PERUSSETIT*/



a:link.linkki {
	#padding: 15px;
} 
a:link {

	color:#271718;
	text-decoration: none;

}

a:visited {
	color:#271718;
}

a:hover {
	color: #dabfb4;
}

a:link#valkolinkki {
	color: #fff;
	text-decoration:none;

}

a:hover#valkolinkki {
	color: #271718;
	text-decoration:underline;

}
	
a:visited#valkolinkki {
	color: #fff;
	text-decoration:none;

}

p {
font-family: var(--perus-font);
	font-weight: 100;
	font-size: 1.25rem;
	line-height: 1.2;
	margin-top: 10px;
	color:#0b0b13;
	max-width: 70ch;
}

.piece {
font-family: var(--perus-font);
	font-weight: 100;
	font-size: 1.5rem;
	margin-top: 10px;
	color:#0b0b13;
	font-style:italic;
	margin-bottom:-5px;
}



.otsikko {

font-family: var(--otsikko-font);
	font-size: 3rem;
margin-bottom: 25px;
	color:#271718;
	line-height:1.3;
}

.miniotsikko {

font-family: var(--perus-font);
font-weight: 1000;
	font-size: 20pt;
	text-transform: uppercase;
letter-spacing:3px; 
  color: #777;
  line-height:1.3;


}
	

.ct-btn-scroll {
    width: 100%;
    position: relative;
	top: 2rem;
    margin: 4.5rem;
    padding-top: 50px;
    z-index: 9;
    -webkit-transition: background-color 0.25s ease-in-out;
    transition: background-color 0.25s ease-in-out;
}


.nimi {
	position:relative;
	left: 50%;
	margin-top: 10%;
	min-height: 70vh;
	#border: 1px solid #fff;
	width: 300px;
}
 
.ainokoskela {

font-family: var(--otsikko-font);
line-height:1;
color: #fff;  
	font-size: 60pt;
	
} 

.kapellimestari {
font-family: var(--perus-font);
 	font-weight: 100;
	text-transform: uppercase;
	color: #fff;
	font-size: 18pt;
	margin-left:5px; 
	#margin-top:-2px;
}

.contact-img {
width: 40%;
}


/*RAKENNE*/

#sisalto {
	#border: 1px solid #fff;
	color: #fff;
	max-width: 60%;
	position: relative;
	left: 20%;	 
	margin-top: 50px;
	min-height: 80%;
	#overflow-y: scroll;
	padding: 20px; 
 
}
#mediasisalto {
	#border: 1px solid #fff;
	color: #fff;
	width: 80%;
	position: relative;
	left: 10%;	 
	top: 12%;
	height: 80%;
	overflow-y: scroll;
	padding: 20px; 
	text-align: center;
 
}

#scroll {
	margin-top: 10px;
	height: 80%;
	overflow-y: scroll;
}



#home {
	width: 100%;
	min-height: 100vh;
	background-image: url(img/home.jpg);
	background-color:#1b1112;
	background-repeat: no-repeat, repeat;
	overflow: hidden;
	position:relative;
	background-position: left 0 top 15%;
  	background-size: auto 120%;
	overflow: hidden;
	z-index:2;
}

#bio {
	width: 100%;
	min-height: 100vh;
	/* background-image: url(img/bg2.jpg); */
	background-color:#fff;
	background-repeat: no-repeat, repeat; 

	background-position: left 0 bottom 0;
  	background-size: auto 100%;
	overflow: hidden;
}

#calendar {
	width: 100%;
	min-height: 100vh;
	background-color:#fff;
	background-position: left 0 bottom 0;
	background-repeat: no-repeat, repeat; 

  	background-size: auto 110%;
	overflow: hidden;
}


#works {
	width: 100%;
	min-height: 100vh;
	background-color:#fff;
	background-position: left 0 bottom 0;
	background-repeat: no-repeat, repeat; 

  	background-size: auto 110%;
	overflow: hidden;
}

#media {
	width: 100%; 
	min-height: 100vh;

	background-color:#fff;
	#background-position: 0% 0%;
  	#background-size: 48% auto;
	overflow: hidden;
}

#arviot {
	width: 100%;
	min-height: 100vh;
	background-color:#fff;
	background-repeat: no-repeat, repeat; 

	background-position: left 0 bottom 0;
  	background-size: auto 100%;
	overflow: hidden;
}


#contact {
	width: 100%; 
	min-height: 100vh;

	background-color:#fff;
	#background-position: 0% 0%;
  	#background-size: 48% auto;
	overflow: hidden;
}



/*KALENTERI*/



#cal {
	#border: 1px solid red;
	padding: 10px;
	width: 90%;
	text-align: left;
}

#date {
	border-radius: 8%;
	width: 60px;
	height: 60px;
	display: inline-block;
	background: white;
	-webkit-box-shadow: inset -1px 1px 16px -1px rgba(0,0,0,0.3);
	-moz-box-shadow: inset -1px 1px 16px -1px rgba(0,0,0,0.3);
	box-shadow: inset -1px 1px 16px -1px rgba(0,0,0,0.3);
	text-align: center;
	text-align: center;
	vertical-align: top;
	z-index: 2;

}

.kk {
font-family: var(--perus-font);
	font-weight: 400;
	color: white;
	font-size: 10pt;
	line-height: 15px;
	PADDING: 3px;
	background:#f4425f;
	z-index: 1;
	
}

.pp {
font-family: var(--otsikko-font);
	font-size: 30pt;
	margin-top: -17px;
	color: #000;
	
}

.aihe {
	display: inline-block;
	background: rgba(255,255,255,0.6);
	padding: 14px;
	margin-left: 20px;
	height: 60px;
	border-radius: 3px;
	width: 80%
	
}

.otskalenteri {
font-family: var(--perus-font);
	font-weight: 100;
	font-size: 20pt;
}


.peruskalenteri {
font-family: var(--perus-font);
	font-weight: 100;
	font-size: 12pt;
	color: #0e0a0b;
	margin:10px;
}
	

.vuosi { 
font-family: var(--otsikko-font);
	font-size: 30pt;
	width: 100%;
	text-align: left;
	color: #0e0a0b;
	position:relative;
	margin: 1rem;
	line-height: 1.2;

}

.vuosi::after { 
content:'';
position:absolute;
width: 40%;
border: 1px solid black;
top: 18px;
left: 4ch;
}


.kk1 {
font-family: var(--perus-font);
	font-weight: 400;
	font-size: 10pt;
	line-height: 15px;
	background:#aaa ;

	PADDING: 3px;
	z-index: 1;
	
}

.pp1 {


	font-family: var(--otsikko-font);
	font-size: 30pt;
	margin-top: -17px;
	color: #333;
}

.aihe1 {
	display: inline-block;
	background: rgba(255,255,255,0.6);
	padding: 14px;
	margin-left: 20px;
	height: 60px;
	border-radius: 3px;
	width: 80%
	
}

.otskalenteri1 {
font-family: var(--otsikko-font);
	font-size: 20pt;
	font-weight: 100;
	color: #333;
}


.peruskalenteri {
font-family: var(--perus-font);
	font-weight: 100;
	font-size: 12pt;
	color: #0e0a0b;
	margin:10px;
}



a:link#kalenterilinkki {
font-family: var(--perus-font);
	color: #0e0a0b;

}
	
a:visited#kalenterilinkki {
	color: #0e0a0b;


}

	
a:hover#kalenterilinkki {
font-family: var(--perus-font);
	color: #dabfb4;


}






@media only screen { /* Define mobile styles - Mobile First */ 

.overlay-content {

  top: 15%;


}


 .ainokoskela { 
	font-size: 40pt;
	
} 

#sisalto {
left:12%;
margin-top:30px;
}




.container {
left: 88%;
}

.galleria {

width: 23%;
height: 0;
padding-bottom: 23%;
}


.vuosi {
font-size: 1.65rem;
}

.vuosi::after {

top:12px;
border-bottom-width:0px;
border-left-width:0px;
border-right-width:0px;

}

#date {
width: 50px;
height: 50px;
margin-top: -15px;
}

.pp, .pp1 {

font-size: 22pt;
}



button.accordion {

margin-top: -1rem;
padding: 15px;
}



}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation:portrait) {

#home {

background-position: left 30% top -110%;

}

.contact-img {
	width: 80%;
}


#kielivalk {
top:1.7rem;
}

.navigointi {

position:fixed;
height: 70px;
width: 100%;
background-color: #271718;
z-index:2;


}

.container {

left: auto;
right: 0.8rem;
top:0.8rem;
border: 1px solid #fff;
}

.bar1 {
	background-color:#fff;

}

.bar2 {
	background-color:#fff;

}


.bar3 {
	background-color:#fff;

}

.nimi {

margin-top: 10%;
left: 10%;
}

.ct-btn-scroll {

display:none;

}

.otsikko {
#margin-top: 20%;
}



#sisalto {
padding-top:60px;
left:0; 
#border: 1px solid red;
max-width: 90%;
}

.overlay a {
color: #fff;
font-size: 18pt;
}

.overlay-content {

top: 10%;
  right: 0.6rem;
}

.overlay {
background-color: #271718;

}
.galleria {

width: 31%;
height: 0;
padding-bottom: 31%;
}

button.accordion {

font-size: 1rem;

}

.cal-wrapper {

width: 70%;
}

.peruskalenteri {
line-height: 14pt;
}
}

 
/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation:portrait) {

#home {

background-position: left 130% top -10%;

}

 .ainokoskela { 
	font-size: 60pt;
}
.kapellimestari {

font-size: 25pt;
margin-top:2px;
}
.nimi {

margin-top: 30%;
left: 55%;
}

.ct-btn-scroll {




}
.perus {
font-size: 1.1rem;
line-height:22px;
}

.otsikko {
margin-top:2rem;
}

#sisalto {
max-width: 60%;
left:20%;

}

}

@media only screen and (min-width: 40.063em) and (orientation:landscape) { /* min-width 641px, medium screens */


 .ainokoskela { 
	font-size: 40pt;
}
.ct-btn-scroll {

}
	

}
@media only screen and (min-width: 51.5625em) and (orientation:landscape) { /* min-width 825px, medium screens */

.pp,
.pp1 {

font-size: 20pt;
margin-top: -15px;

}



} 

@media only screen and (min-width: 64.063em) { /* min-width 1025px, large screens */

 .ainokoskela { 
	font-size: 50pt;
}
.otsikko {

	font-size: 3.2rem;
}
.perus {
font-size: 1.1rem;
line-height:20px;
}

.galleria {

width: 19%;
height: 0;
padding-bottom: 19%;
}

#sisalto {
max-width: 60%;
left:16%;
}

.nimi {
left: 57%;

}
.ct-btn-scroll {

 
}
 .ainokoskela { 
	font-size: 60pt;
}
}

@media only screen and (min-width: 90.063em) { /* min-width 1441px, xlarge screens */

 .ainokoskela { 
	font-size: 60pt;
}

.perus {
font-size: 1.1rem;
line-height:20px;
}

#sisalto {
left:20%;
}



}
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />