/* Normaali fonttikoko isommille näytöille */
.w3-display-middle span {
  font-size: 80px; 
}

/* Pienennetään fonttia alle 768px leveillä näytöillä */
@media screen and (max-width: 768px) {
  .w3-display-middle span {
    font-size: 50px; 
  }
}

/* Pienennetään fonttia alle 480px leveillä näytöillä */
@media screen and (max-width: 480px) {
  .w3-display-middle span {
    font-size: 30px;
  }
}

*{
margin: 0;
padding: 0;
}


html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
    width: 100%; 
}

header, footer, main {
    width: 100%; 
    box-sizing: border-box; 
}

.header {
width: 100%;
height: 250px;
background: url("./etusivu.bmp") no-repeat;
position: relative;
background-position-x: 60px;
}

header {
    background-image: url("./etusivu.bmp"); 
    background-size: cover;
    height: 300px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 20px; 
    }


h1 {
    color: black; 
    font-size: 24px; 
    margin: 0; 
}
.navbar {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.navbar a {
    padding: 10px;
    text-decoration: none;
}


/* Mobiilinäkymässä valikko jakautuu 3 sarakkeeseen */
@media (max-width: 600px) {
    .navbar {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 10px; 
    }

    .navbar a {
        text-align: center; 
    }
}

.footer {
  width: 100%;           
  background-color: #f1f1f1; 
  color: black;          
  text-align: center;    
  padding: 20px 0;      
  position: relative;    
  bottom: 0;             
}

footer i {
    display: inline-block; /* Jos display on esimerkiksi none, ikoneita ei näy */
    visibility: visible;
    opacity: 1;
	font-size: 24px; /* Muuta kokoa haluamaksesi */
    margin: 10px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}