/* Luokat
Weight: 100 - 900

*/

.montserrat-h1 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 2em;  
  margin: 0 0 .2em 0;
}


.montserrat-h2 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1.6em;  
  margin: 0 0 .6em 0;
  color: #33acde;
}

.montserrat-p {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 1em;  
  margin: 0 0 1.6em 0;
}
.montserrat-p-footer {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: .8em;  
  margin: 0;
}
.small {
  font-size: .6em;
}

.center {
  display: block;
  max-width: 800px;
  margin: 0 auto;
}

/* minimal reset */
html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

body {
  background: url("../img/taustakuva.png");
  /* Scale image to cover entire area */
  background-size: cover; 
  /* Center the image */
  background-position: center; 
  /* Prevent image tiling */
  background-repeat: no-repeat;
  /* Fix position so it doesn't scroll */
  background-attachment: fixed; 
  /* Ensure it fills the viewport */
  height: 100vh;
  width: 100%; 

  color: #fff;
}

/*  NAVIGOINTI  */
nav {
  position: fixed;
  top: 20px;
  right: 20px;
}
nav a {
  color: #fff;
  text-decoration: none;
  padding: 0 0 0 6px;
}

nav a.active_link {
  font-weight: bold;
  /* Voit lisätä tähän myös muita korostuksia, esim. eri värin tai alleviivauksen */
}

/* FOOTER */
#footer {
  background: rgba(0,0,0,0.5);
  width: 100%;
  padding: 5px;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
}
#footer.video-footer {
  position:static;
}


/*  VIDEOSIVU */
.soitin-alue { margin: 20px auto; max-width: 800px; background: none; padding: 10px; border-radius: 8px; }
video { width: 100%; display: block; }

/* Galleria ja kuvakkeet */
.galleria { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 30px; padding: 20px; }
.video-kortti { background-color: rgba(0, 0, 0, 0.3); border-radius: 6px; padding: 10px; width: 200px; cursor: pointer; transition: 0.2s; }
.video-kortti:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.1); }

/* HTML5 video-esikatselu kuvakkeen korvikkeena */
.esikatselu-video { width: 100%; pointer-events: none; border-radius: 4px; background: #000; }
.video-nimi { font-family: "Montserrat", sans-serif; margin-top: 8px; font-size: 14px; word-wrap: break-word; }


/* Yleiset tyylit */
#kehys {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 60px;  
  background: rgba(0, 0, 0, 0.5);
  border-radius: 15px;
}

#logo {
  margin: 30px;
}


@media only screen and (max-width: 509px) {
   #kehys {    
    padding: 15px;    
  }
}