@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

html{
	scroll-behavior: smooth; /* Lisää sujuva vieritys */
}

html, body {
    width:  100%;
    height: 100%;
    margin: auto;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.headerDiv{
	text-align:center;
	padding:10px;
	margin-bottom: -32px;
	padding-top: 22px;
}

.center-div {
  display: flex;
  justify-content: center; /* Keskittää lapsielementin vaaka-suunnassa */
  align-items: center; /* Keskittää lapsielementin pystysuunnassa */
  padding: 20px;
}

.centerBox {
  position:relative;
  max-width: 700px; /* Maksimileveys 700px */
  width: 100%; /* Lapsielementin leveys voi skaalautua, mutta ei ylitä 700px */
  text-align: center;
  justify-content: center;
}

#top_logo{
	max-width: 100%; 
	height: auto;
	padding-bottom:42px;
}

.scroll-image-full {
    width: 100%;
    max-width: 800px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	height: auto;
	transform-origin: bottom; /* Skaalaa alareunasta */
}

/* Efekti, kun kuva on näkyvissä */
.scroll-image-full.visible {
    opacity: 1;
    transform: scale(1);
}

/* Efekti, kun kuva poistuu näkyvistä */
.scroll-image-full.hidden {
    opacity: 0;
    transform: scale(0.8);
}

.scroll-image {
    width: 97%;
    max-width: 700px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	height: auto;
	transform-origin: bottom; /* Skaalaa alareunasta */
}

/* Efekti, kun kuva on näkyvissä */
.scroll-image.visible {
    opacity: 1;
    transform: scale(1);
}

/* Efekti, kun kuva poistuu näkyvistä */
.scroll-image.hidden {
    opacity: 0;
    transform: scale(0.8);
}

.scroll-image-noFade {
    width: 100%;
    max-width: 710px;
    transform: scale(0.8);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	height: auto;
	transform-origin: bottom; /* Skaalaa alareunasta */
}

/* Efekti, kun kuva on näkyvissä */
.scroll-image-noFade.visible {
    transform: scale(1);
}

/* Efekti, kun kuva poistuu näkyvistä */
.scroll-image-noFade.hidden {
    transform: scale(0.8);
}

.scroll-image-lineTop {
    max-width: 193px;
    transform: scale(0.8);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	height: auto;
	transform-origin: bottom; /* Skaalaa alareunasta */
}

/* Efekti, kun kuva on näkyvissä */
.scroll-image-lineTop.visible {
    transform: scale(1);
}

/* Efekti, kun kuva poistuu näkyvistä */
.scroll-image-lineTop.hidden {
    transform: scale(0.8);
}

.scroll-image-lineBottom {
    max-width: 193px;
    transform: scale(0.8);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	height: auto;
	transform-origin: top; /* Skaalaa alareunasta */
}

/* Efekti, kun kuva on näkyvissä */
.scroll-image-lineBottom.visible {
    transform: scale(1);
}

/* Efekti, kun kuva poistuu näkyvistä */
.scroll-image-lineBottom.hidden {
    transform: scale(0.8);
}

.leipaTeksti{
	font-size:18px;
	color: #313131;
	font-family: Arial;
}

.tekstiKorostus{
	font-size:18px;
	color: #1ea395;
	font-family: Arial;
}
.tekstiKorostusBold{
	font-size:18px;
	color: #1ea395;
	font-family: Arial;
	font-weight: bold;
}

ul {
    list-style-position: inside; /* Asettaa listan merkit (pallot) tekstin sisälle */
    padding-left: 0; /* Poistaa vasemman sisennyksen */
}

li {
    margin-left: 0; /* Poistaa vasemman marginaalin */
}

a:link{
	color: #1ea395;
	text-decoration: none;
}
a:hover{
	color: #1ea395;
	text-decoration: underline;
}
a:active{
	color: #1ea395;
	text-decoration: none;
}
a:visited{
	color: #1ea395;
	text-decoration: none;
}

.numeroPallo{
	font-size:32px;
	color: #fff;
	background-color: #1ea395;
	width: 55px;
	border-radius: 50%;
	font-family: 'Oswald', Arial;
	text-transform: uppercase;
	font-weight: bold;
	line-height:1.2;
	text-align: center;
	vertical-align: middle;
	margin-top:15px;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	
	height:55px;
	transform-origin: center; /* Skaalaa alareunasta */	
}

/* Efekti, kun kuva on näkyvissä */
.numeroPallo.visible {
    opacity: 1;
    transform: scale(1);
}

/* Efekti, kun kuva poistuu näkyvistä */
.numeroPallo.hidden {
    opacity: 0;
    transform: scale(0.8);
}

.break-word {
  display: inline-block;
}

.lineTop{
	width:100%;
	margin-top:62px;
	margin-bottom:0px;
}
.lineBottom{
	width:100%;
	margin-top:0px;
	margin-bottom:62px;
}
.lineHor{
	width:100%;
	height:4px;
	background: #1ea395;
}

.boxColor{
	background: #e5f1f0;
	padding-top:32px;
	padding-bottom:62px;
	padding-left:15px;
	padding-right:15px;
}

h1{
	font-size: 55px; 
	overflow-wrap: break-word;
	color: #1ea395;
	font-family: 'Oswald', Arial;
	text-transform: uppercase;
	font-weight: normal;
	line-height:1.0;
}

h2{
	font-size:42px;
	color: #1ea395;
	font-family: 'Oswald', Arial;
	text-transform: uppercase;
	font-weight: normal;
	line-height:1.2;
}

h3{
	font-size:32px;
	color: #000;
	font-family: 'Oswald', Arial;
	text-transform: uppercase;
	font-weight: normal;
	line-height:1.2;
}

.valiViiva{
	border-style: dotted;
	border-width: 0 0 1px 0;
	border-color: #1ea395;
	padding-top: 32px;
	padding-bottom: 32px;
}

/* puhekupla */

.speech-bubble {
  position: relative; /* Varmistaa, että sakara voidaan sijoittaa oikein */
  background-color: #1ea395; /* Vihreä väri */
  color: white; /* Tekstin väri */
  padding: 5px; /* Sisäistä täyttöä */
  border-radius: 15px; /* Pyöristetyt kulmat */
  max-width: 500px; /* Maksimileveys */
  text-align: center; /* Keskittää tekstin */
  font-size: 16px; /* Fontin koko */
  margin-bottom: 42px;
  opacity: 1;
  transform: scale(0.8);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  transform-origin: center; /* Skaalaa alareunasta */	  
}

.speech-bubble::after {
  content: ''; /* Tyhjä sisältö */
  position: absolute; /* Asetetaan absoluuttisesti suhteessa vanhempaan */
  bottom: -19px; /* Sakara tulee puhekuplan alapuolelle */
  left: 50%; /* Asetetaan keskelle */
  transform: translateX(-50%); /* Keskittää sakaran tarkasti */
  width: 0;
  height: 0;
  border-left: 10px solid transparent; /* Vasemman puolen sakara */
  border-right: 10px solid transparent; /* Oikean puolen sakara */
  border-top: 20px solid #1ea395; /* Alaspäin suuntautuva sakara */
}

/* Efekti, kun kuva on näkyvissä */
.speech-bubble.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Efekti, kun kuva poistuu näkyvistä */
.speech-bubble.hidden {
    opacity: 1;
    transform: translateY(260px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

@media screen and (max-width: 600px) {

	.headerDiv{
		margin-bottom: -52px;
	}

	#top_logo{
		padding-bottom:10px;
	}	
	
	h1{
		font-size: 8.5vh;
		overflow-wrap: break-word;
	}	
	h2{
		font-size:36px;
	}
	.break-word::after {
		content: "\A"; /* Rivinvaihto */
		white-space: pre; /* Varmistaa, että rivinvaihto toimii */
		content: " ♥"; /* Lisää sydämen symboli */
	}
}