@import url("https://use.typekit.net/wbs8sie.css");

/*******************************************************************************/

:root {
	--method-000: #FFFFFF;
	--method-050: #FFF6E3;
	--method-100: #FEE7B8;
	--method-500: #F1B437;
	--method-600: #C0902C;
	--method-800: #6B4A12;

	--method-padding: .3em .6em;
	--method-border-radius: .3em;
}

/*******************************************************************************/
svg tspan[font-family="Edu_SA_Hand_Regular"] {
	font-family: "edu-sa-hand", sans-serif;
	font-weight: 400;
	font-style: normal;
}
svg tspan[font-family="Edu_SA_Hand_Medium_Regular"] {
	font-family: "edu-sa-hand", sans-serif;
	font-weight: 500;
	font-style: normal;
}
svg tspan[font-family^="Tiller_Demi_Regular"] {
	font-family: tiller, sans-serif;
	font-weight: 600;
	font-style: normal;
}
svg tspan[font-family^="Tiller_Bold"] {
	font-family: tiller, sans-serif;
	font-weight: 700;
	font-style: normal;
}
svg tspan[font-family^="Tiller_Heavy"] {
	font-family: "tiller", sans-serif;
	font-weight: 900;
	font-style: normal;
}
svg text[font-family^="Typeka-Bold"],
svg tspan[font-family^="Typeka_Bold"] {
	font-family: "typeka", sans-serif;
	font-weight: 700;
	font-style: normal;
}
svg tspan[font-family^="Nitti_Typewriter_Regular"] {
	font-family: "nitti-typewriter-normal", sans-serif;
	font-weight: 400;
	font-style: normal;
}
svg tspan[font-family^="Uberhand_Pro_Book_Regular"] {
	font-family: "ff-uberhand-pro", sans-serif;
	font-weight: 300;
	font-style: normal;
}

svg tspan[font-family^="Gotham_Book_Regular"] {
	font-family: "gotham", sans-serif;
	font-weight: 400;
	font-style: normal;
}
svg tspan[font-family^="Gotham_Book_Italic"] {
	font-family: "gotham", sans-serif;
	font-weight: 400;
	font-style: italic;
}
svg tspan[font-family^="Gotham_Medium_Regular"] {
	font-family: "gotham", sans-serif;
	font-weight: 500;
	font-style: normal;
}
svg tspan[font-family^="Gotham_Bold_Bold"] {
	font-family: "gotham", sans-serif;
	font-weight: 700;
	font-style: normal;
}

svg tspan[font-family^="Gotham_Narrow_Book_Regular"] {
	font-family: "gotham-narrow", sans-serif;
	font-weight: 400;
	font-style: normal;
}
svg tspan[font-family^="Gotham_Narrow_Medium_Regular"] {
	font-family: "gotham-narrow", sans-serif;
	font-weight: 500;
	font-style: normal;
}

svg tspan[font-family^="TisaPro_Regular"] {
	font-family: "ff-tisa-web-pro", serif;
	font-weight: 400;
	font-style: normal;
}
svg tspan[font-family^="TisaPro_Ita"] {
	font-family: "ff-tisa-web-pro", serif;
	font-weight: 400;
	font-style: italic;
}
svg tspan[font-family^="TisaPro_Medi_Regular"] {
	font-family: "ff-tisa-web-pro", serif;
	font-weight: 600;
	font-style: normal;
}
svg tspan[font-family^="TisaPro_MediIta_Italic"] {
	font-family: "ff-tisa-web-pro", serif;
	font-weight: 600;
	font-style: italic;
}
svg tspan[font-family^="TisaPro_Bold_Bold"] {
	font-family: "ff-tisa-web-pro", serif;
	font-weight: 700;
	font-style: normal;
}
svg tspan[font-family="Veneer_Regular_Regular"] {
	font-family: "veneer", sans-serif;
	font-weight: 400;
	font-style: normal;
}


/*******************************************************************************/


/*** TAUSTAKUVA ***/
/* html[data-teema="vaalea"].modaali-parent body {
	background-color: #FFF !important;
}
html[data-teema="vaalea"].kuvat-html:not(.modaali-parent) body,
html.taustakuva:not(.valilehdet-html):not(.modaali-parent) body {
	background-color: #e5f2ff !important;
}
@media print {
	html.taustakuva:not(.valilehdet-html) body {
		background: none;
	}
} */


/*** PAINIKKEET ***/
/* .nappi.korostettu {
	pointer-events: none !important;
	outline: 2px solid var(--primary-bg-dark);
	background-color: var(--primary-bg-darker);
}
#lisapainikkeet > .soitin {
	order: -10;
} */


/**** PUHEKUPLA ***/
/* .puhekupla:not(.valkoinen) {
	background-color: #96CBEF;
}
.puhekupla:not(.valkoinen)::after {
	border-color: #96CBEF transparent transparent;
}
.puhekupla.sininen {
	background-color: #96CBEF;
}
.puhekupla.sininen::after {
	border-color: #96CBEF transparent transparent;
}
.puhekupla.keltainen {
	background-color: #FFF69B;
}
.puhekupla.keltainen::after {
	border-color: #FFF69B transparent transparent;
}
.puhekupla.vaaleanpunainen {
	background-color: #F1ABC6;
}
.puhekupla.vaaleanpunainen::after {
	border-color: #F1ABC6 transparent transparent;
}
.puhekupla.vihrea {
	background-color: #ACD7C0;
}
.puhekupla.vihrea::after {
	border-color: #ACD7C0 transparent transparent;
}
.puhekupla .lucide {
	width: 1em;
	height: 1em;
} */


/*** PALAUTEANIMAATIO ***/
/*#palauteanimaatio {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 10000;
	background-color: #FFF;
	transition: opacity .5s linear;
}
html:not(.palauteanimaatio) #palauteanimaatio {
	opacity: 0;
}
#palauteanimaatio-wrapper {
	align-items: flex-start;
}
html.palauteanimaatio #palaute-teksti {
	display: none !important;
}
#palauteanimaatio-kuva {
	width: auto;
	height: 15em;
	aspect-ratio: 400 / 323;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

html[data-loppupalaute="LORU_nyokkays"] #palauteanimaatio-kuva {
	background-image: url(../src/kuvat/palaute/LORU_nyokkays.gif);	
}
html[data-loppupalaute="LORU_pohtii"] #palauteanimaatio-kuva {
	background-image: url(../src/kuvat/palaute/LORU_pohtii.gif);	
}
html[data-loppupalaute="MYYTTI_haistelu"] #palauteanimaatio-kuva {
	background-image: url(../src/kuvat/palaute/MYYTTI_haistelu.gif);	
}
html[data-loppupalaute="MYYTTI_nyokkays"] #palauteanimaatio-kuva {
	background-image: url(../src/kuvat/palaute/MYYTTI_nyokkays.gif);	
}
html[data-loppupalaute="PILKKU_heilutus"] #palauteanimaatio-kuva {
	background-image: url(../src/kuvat/palaute/PILKKU_heilutus.gif);	
}
html[data-loppupalaute="PILKKU_nyokkays"] #palauteanimaatio-kuva {
	background-image: url(../src/kuvat/palaute/PILKKU_nyokkays.gif);	
}

html[data-loppupalaute^="LORU"] #palauteanimaatio-puhekupla {
	transform: translate(-4em, 4em);
}
html[data-loppupalaute^="MYYTTI"] #palauteanimaatio-puhekupla {
	transform: translate(-4em, 1em);
}
html[data-loppupalaute^="PILKKU"] #palauteanimaatio-puhekupla {
	transform: translate(-4em, 1em);
}
#palauteanimaatio-puhekupla::after {
	bottom: unset;
	top: 1.5em;
}

html.mobile.portrait #palauteanimaatio-wrapper {
	gap: 1em;
	flex-direction: column-reverse;
	align-items: center;
}
html.mobile.portrait #palauteanimaatio-puhekupla {
	transform: unset !important;
}
html.mobile #palauteanimaatio-puhekupla > div {
	font-size: .75em;
}*/