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

body {
    margin: 0;
}

h1, h2 , p {
    text-shadow: 3px 3px 10px #ffcc00; /* Pehmeämpi keltainen hehku varjoina */
    color: white; /* Tummanpunainen väri tuo joulutunnelmaa */
}

#example1 {
	background-image: url("kuvat/joulupuu.gif"), url("kuvat/tausta_2.png");
	background-repeat: no-repeat, no-repeat;
	background-size: 600px, cover;
	background-position: right -3% bottom 9%, left top;
}

#keskita {
	text-align: center;
}

p {
	font-family: 'Georgia', cursive;
	font-size: 30px;

}

h1 {
	font-family: 'Georgia', cursive;
	text-align: center;
	font-size: 70px;
}

h2 {
	font-family: 'Georgia', cursive;
	font-size: 40px;
}

li {
	font-family: 'Georgia', cursive;
	font-size: 23px;
	color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
	text-align: justify;
}

ol {
    float: right;
    width: 50%;
    margin-top: 0;
    text-align: left;
}

.container {
  position: relative;
  text-align: center;
  color: white;
}

#pohjakartta {
	margin-top: 70px;
    float: left;
    margin-left: 10vh;
}

#tekija {
    background-color: lavender;
    display: flow;
    margin: 0;
    text-shadow: 1px 1px 2px indigo, 0 0 25px blue, 0 0 5px lavenderblush;
}

#varitys {
    color: deepskyblue;
}



/* Mobiililaitteille, joilla leveys alle 1300px */
@media only screen and (max-width: 1650px) {
    h1 {
        font-size: 35px;
        text-align: center;
    }

    h2 {
        font-size: 30px;
    }

    p {
        font-size: 20px;
    }

    li {
        font-size: 18px;
    }

    /* Keskittää ja pienentää olio-listan leveyttä mobiilissa */
    ol {
        float: none;
        width: 82%;
        margin: auto;
        padding: 0;
    }

    /* Säätää taustakuvan kokoasettelua mobiilissa */
    #example1 {
        background-image: url("kuvat/joulupuu.gif"), url("kuvat/tausta_2.png");
        background-position: right 3% bottom 7%, center;
        background-size: 31vh, cover;
    }
    
    /* Keskittää elementit mobiilissa */
    #keskita {
        padding: center;
    }

    #pohjakartta {
	    margin-top: 70px;
        float: none;
        margin-left: 0vh;
    }
}

@media only screen and (max-width: 1030px) {
    /* Pohjakartta-kuvan koon säätö */
    #pohjakartta {
        width: 90%;
        margin-top: -25px;
    }

    #ylaosa {
        width: 90%;   
    }

    #ylaosa {
        width: 100%;   
    }

    #ohjelma {
        width: 90%;
    }

}

@media only screen and (max-width: 1939px) {
    /* Pohjakartta-kuvan koon säätö */
    #pohjakartta {
        margin-left: 0vh;
    }
}

.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 17px; /* Välit logoille */
    background-color: lavender;
    clear: both; /* Estää floatin vaikutuksen */
    width: 100%;
    margin-top: 2vh;
    flex-wrap: wrap;
}

.logo-container img {
    max-width: 170px;
    height: auto;
    transition: transform 0.2s; /* Hover-efektiä varten */
}

.logo-container img:hover {
    transform: scale(1.2); /* Logojen suurennus hover-tilassa */
}

@media only screen and (max-width: 768px) {
    .logo-container {
        gap: 5px; /* Pienemmät välit mobiilissa */
    }

    .logo-container img {
        max-width: 115px; /* Pienempi logo mobiilissa */
    }

    #tekija {
        font-size: 15px;
    }
}

/* Keskikokoisille näytöille (näytön leveys alle 1300px) */
@media only screen and (min-width: 1300px) {
    .logo-container img {
        max-width: 200px;
    }
}

.responsive {
    height: auto;
}