/*DESKTOP PADDING SIVUT 200px
  MOBIILI PADDING SIVUT 20px*/

* {
  box-sizing: border-box;
}


html, body {
  font-size: 16px;
  font-family: 'Roboto Condensed', sans-serif;
  color: #2E4148;
  margin: 0;
  padding: 0;
  /*Margin ja padding pois, säädellään containereiden asetuksilla*/
  overflow-x: hidden;
  /*Estää vaakasuuntaisen scrollauksen*/
  background-color: #f2f8fa;
}

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

header {
  width: 100%;
  background-color: #81B7CA;
  padding-top: 47px;
  padding-bottom: 10px;
}

header h1 {
  font-size: 2.2rem;
  color: #192428;
  text-shadow: 3px 4px 5px #a4ddf0;
  padding: 0;
}

main {
  margin-bottom: 20px; /*Väli footeriin sivun lopussa*/
}

h1, h2, h3 {
  font-size: 1.7rem;
  font-family: 'Bitcount Single', serif;
  color: #305A6A;
  text-shadow: 3px 2px 5px #aabdc5;
  text-align: center;
  padding: 20px 0px 0px 0px; /* TOP RIGHT BOTTOM LEFT*/
}

#mobile-container {
  margin: 0 auto;
  height: 500px;
  padding: 0;
  max-width: 900px;
}

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #81B7CA;
  z-index: 1;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topnav #myLinks { /*Valikko avattuna*/
  display: none; /*oletuksena piilossa*/
  background-color: #81B7CA;
}

#myLinks {
  position: absolute;
  top: 60px; /* navbarin korkeus */
  left: 0;
  width: 100%;
  display: none;
  background-color: #81B7CA;
}

.topnav a {
  color: white;
  padding: 5px;
  padding-left: 14px;
  text-decoration: none;
  font-size: 17px;
  display: block; /*Linkit rivin kokoisia*/
}

/*Määritetään sijaintia ja taustaväriä*/
.topnav a.menu-icon {
  background: #81B7CA;
  display: block;
  right: 15px;
  top: 15px;
}

.menu-icon {
  margin-right: 15px;
}

 /* KUN NAVBARIN KAUTTA SIIRTYY, OSIO EI JÄÄ NAVBARIN ALLE */
section {
  scroll-margin-top: 80px;
}

.videoContainer {
  position: relative;
  width: 100%;
  max-width: 700px;
  margin: 20px auto;
  padding-top: 56.25%; /* 16:9 kuvasuhde */
}

.videoContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*Määrittää asettelua, käytetty tiedoston standarina*/
.container {
  max-width: 1000px;
  display: grid;
  margin: 0 auto;
  padding: 0 10px;
}

.link {
  color: #31758b;
  text-decoration-style: dotted;
  font-weight: bold;
  text-align: center;
}

/*GALLERIA*/
.galleryContainer {
  border: 2px solid #567986;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 10px;
  margin: 0 10px;
  border-radius: 8px;
}

.galleryContainer img {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: 0.3s;
}

.full-img {
  width: 100%;
  height: 100vh;
  background-color: #b4bec4bd;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.full-img img {
  width: 100%;
  max-width: 300px;
}

.full-img span {
  font-weight: bold;
  position: absolute;
  top: 5%;
  right: 5%;
  cursor: pointer;
  font-size: 60px;
  color: #305A6A;
}

/*Kaksi osaa, tekti ja kuva -responsiivisuus*/
.muusaContainer {
  display: grid;
  grid-template-columns: 1fr; /*allekkain tekti ja logo*/
  justify-items: center;
  text-align: center;
  row-gap: 20px;
}

.logo {
  position: relative;
  display: inline-block;
}

.logo img {
  display: block;
  max-width: 120px;
  height: auto;
}

/*Kuvan päälle tuleva hover efekti*/
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  opacity: 0; /*Oletuksena piilossa*/
  transition: ease;
  background-color: #3b92af;
}

/*TIIMI*/
/*Container, jonka sisässsä tiimi*/
.teamContainer {
  display: grid;
  gap: 20px; /*Korttien väli*/
  padding: 0 5px;/*TOP & BOTTOM, RIGHT & LEFT*/
  margin: auto;
}

/*joka toinen oikealla ja jokatoinen vasemmalla,
  nämä asetukset oikealla oleville "korteille"*/

.memberRight, .memberLeft {
  display: grid; /*RESPONSIIVISUUS <3 GRID*/
  align-items: center;
  padding: 10px; /*Kortin sisässä oleva padding*/
  gap: 20px;
}

.memberRight {
  grid-template-columns: 2fr auto; /*Asettuu kivasti näillä en tiiä sen suuremmin mitä tein :D*/
  grid-template-areas: "content selfie"; /*vasemmalle esittely ja oikealle kuva*/
  background-color: #e1e9ed;
  text-align: right;
  border-radius: 8px;
}

/*Ja personoidusti vasemmalle korteille*/
.memberLeft {
  grid-template-columns: auto 2fr;
  grid-template-areas: "selfie content";
  background-color: #daedf2;
  text-align: left;
  border-radius: 8px;
}

/*Saadaan nimettyä grid areat*/
.selfie {
  grid-area: selfie;
}

.selfie img {
  display: block;
  max-width: 120px;
  height: auto;
  border-radius: 8px;
}

.content {
  grid-area: content;
}

/*ns tiimiläisen esittelyn asettelua*/
.content p {
  margin: 5px 0; /*Tekstin ympärillä kulkeva tyhjä tila*/
}
.memberRight .content h2 {
  margin: 0;
  font-size: 1.2rem;
  text-align: right;
}
.memberLeft .content h2 {
  margin: 0;
  font-size: 1.2rem;
  text-align: left;
}

footer {
  text-align: center;
  background-color: #95c6d8;
}

/*alussa h -elementtien fontiksi laitettu bitcount, tänne halutaan roboto*/
footer h2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  text-shadow: none;
  color: black;
}

/*KARUSELLITOIMINNOT*/
/*Kaikki yhteistyö -kohdan asiat sisältävä container*/
.yhteisContainer {
  padding: 2rem; /*SUhteessa vanhempi -elementtiin*/
  width: 300px;/*300 mobiili*/
  margin: 0 auto;
}

/*Kuvat sisältävä laatikko, jossa slider*/
.slider {
  position: relative;
  max-width: 300px;
  margin: 0 auto;
  display: flex; /*Kuvat sijoittuu vierekkäin*/
  aspect-ratio: 16/9; /*Korkeus määräytyy leveydestä, sama kun iframella*/
  overflow-x: auto; /*Sallii sivuttain scrollauksen*/
  scroll-snap-type: x mandatory; /*Kuvat ei jää puolinäkyviin vaan vaihtuu kokonaan logosta toiseen*/
  scroll-behavior: smooth; /*Ei kuitenkaan hyppää ^*/
  box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25); /*Varjo laatikolle*/
  border-radius: 0.5rem; /*Pyöristetyt kulmat (suhteessa vanhempi -elementtiin)*/
  border: 1px solid lightslategray;
}

/*Kuvien asettelu*/
.slider img {
  flex: 1 0 100%; /*Jokainen kuva on 1 ruudun kokoinen eikä kutistu, mutta saa kasvaa*/
  scroll-snap-align: start; /*Scrollatessa kuva lukittuu vasempaan reunaan*/
  object-fit: contain; /*Kuva ei leikkaanu, eli sopii kokonaan sisään slideriin*/
  width: 100%;
  height: 100%;
  background: transparent;
}