/* Fontit ja perusasetukset */
@font-face {
  font-family: 'Rubik';
  src: url('fontit/Rubik-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DryBrush';
  src: url('fontit/Drybrush-KV2wD.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@media (max-width: 768px) {
  .videorivi video {
    flex: 1 1 100%;
  }
}


body {
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  color: #525252;
  background-color: #a8dadc;
  overflow-x: hidden;
  
  display: block;
  justify-content: center;
}

/* Rakenne */
.sivu,
.main-container,
.osa,
.cv-osio {
  width: 100%;
  box-sizing: border-box;
  text-align-last: center;
  
}

.main-container {
  display: flex;
  flex-direction: column;
  background-color: #f1faee;
}

/* Ylapalkki */
.ylapalkki {
  background-color: #a8dadc;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

.omakuva {
  max-height: 80px;
  width: auto;
  margin-bottom: 10px;
}

.otsikkogrp {
  text-align: center;
  background-color: #a8dadc;
}

.otsikko {
  margin: 0;
  font-size: 4em;
  font-family: 'DryBrush', sans-serif;
  font-weight: 100;
  color: #e63946;
}

.alaotsikko {
  margin: 0;
  font-size: 2em;
  font-family: 'DryBrush', sans-serif;
  font-weight: 100;
}

/* Valikko */
.valikko {
  background-color: #335c67;
  padding: 0;
  margin: 0;
  
}

.hamburger {
  display: none;
}

.valikko-napit {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  background-color: #0f4c5c;
}

.valikko-napit img {
  width: clamp(91px, 10vw, 100px); 
  height: auto; 
  cursor: pointer; 
  transition: transform 0.3s ease; }

.valikko-napit img:hover {
  transform: scale(1.05);
  background-color: #e63946;
}

/* CV-osio */
.cv-osio {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #525252;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

.cv-otsikko {
  text-align: center;
  font-size: 3.5em;
  font-weight: 600;
  margin-bottom: 10px;
  margin-top: 10px;
  color: #525252;
}


.kuva-rivi,
.linkki-rivi {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.profiilikuva {
  max-width: 200px;
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  border-radius: 8px;
}

.lilith-kuva {
  width: 169px;
  height: auto;
  transition: transform 0.3s ease;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.linkkikuva {
  width: 100px;
  height: auto;
  transition: transform 0.3s ease;
}

.lilith-kuva:hover,
.linkkikuva:hover {
  transform: scale(1.10);
}

/* Canvas ja osat */
.canvas {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  background-color: #f1faee;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.teksti-osa,
.media-osa {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: justify;
  padding: 0 20px;
   }
  
  .lilith-kuva {
  width: 148px;
  height: auto;
  transition: transform 0.3s ease;
  }


.teksti-osa img.profiilikuva {
  width: 200px;
  height: auto;
  object-fit: contain;
}

.teksti-osa img.lilith-kuva {
  width: 150px;
  height: auto;
  object-fit: contain;
}

.teksti-osa img.linkkikuva {
  width: 100px;
  height: auto;
  object-fit: contain;
}
.teksti-osa p {
  text-align: justify;
  line-height: 1.6;
}

.teksti-osa img {
  max-width: 200px;
  height: auto;
  margin-bottom: 20px;
}

.cv-vasen,
.cv-oikea {
  flex: 1;
  min-width: 300px;
  max-width: 600px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.cv-vasen h3,
.cv-oikea h3,
.cv-oikea h4,
.cv-oikea h5 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 600;
  color: #1d3557;
}


.media-osa {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.media-osa a {
  display: inline-block;
  max-width: fit-content;
}

.media-osa img:not(.lilith-kuva):not(.linkkikuva),
.media-osa video {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/*ANIMAATIO-sivu */

.videorivi {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 0 20px;
}

.videorivi video {
  flex: 0 1 45%;
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* Mobiilissa pinotaan */
@media (max-width: 768px) {
  .canvas {
    flex-direction: column;
    align-items: center;
  }

  .teksti-osa,
  .media-osa {
    max-width: 100%;
    
  
  }
}

/* Yhteydenotto */
.yhteydenotto {
  font-family: 'Rubik', sans-serif;
  background-color: #f1faee;
  padding: 40px 20px;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.yhteydenotto h3 {
  text-align: center;
  font-size: 2em;
  color: #1d3557;
  margin-bottom: 20px;
}

.yhteydenotto label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
  color: #333;
}

.yhteydenotto input[type="text"],
.yhteydenotto input[type="email"],
.yhteydenotto textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}

.lomake-napit {
  display: flex;
  justify-content: space-between;
}

.lomake-napit input[type="submit"],
.lomake-napit input[type="reset"] {
  background-color: #335c67;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.lomake-napit input[type="submit"]:hover,
.lomake-napit input[type="reset"]:hover {
  background-color: #1d3557;
}


.email-nappi {
  display: inline-block;
  background-color: #335c67;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.email-nappi:hover {
  background-color: #1d3557;
}

.napin-wrapper {
  display: flex;
  justify-content: center;
}

/* GALLERIA */

.masonry-galleria {
display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
}

.masonry-galleria img {
  width: 200px;              /* kiinteä leveys */
  height: 150px;             /* kiinteä korkeus */
  object-fit: cover;         /* rajaa kuvaa keskeltä */
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.masonry-galleria img:hover {
  transform: scale(1.10);
}
.zoomattava {
  transition: transform 0.3s ease, z-index 0.3s;
  cursor: pointer;
  max-width: 100%;
  border-radius: 6px;
}

.zoomattava.zoomattu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  margin: 0;
  padding: 0;
}
/* Poista hover-efekti kun kuva on zoomattu */
.zoomattava.zoomattu:hover {
  transform: none;
  cursor: default;
}
.kuva-caption {
  text-align: center;
  font-size: 0.9em;
  color: #555;
  margin-bottom: 12px;
}
.footer {
  text-align: center;
 
}

/* Mobiilissa napit pysyvät vierekkäin */
@media (max-width: 600px) {
  .valikko-napit {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding: 10px;
  }

  .valikko-napit img {
    width: clamp(60px, 20vw, 80px);
    height: auto;
    flex: 1 1 auto;
    max-width: 80px;
  }
}