:root {
  --paavari: #d21;
  --lisavari1: black;
  --lisavari2: #111;
  --lisavari3: #2a9;
  --lisavari4: #eee;
  --taustavari: transparent;

  --ff-otsikko: 'Josefin Sans', 'Helvetica', 'Arial', sans-serif;
  --ff-leipateksti: 'Josefin Sans', 'Helvetica', 'Arial', sans-serif;

  font-size: 24px;
}

body {
 background: var(--paavari);
 padding: 0;
 margin: 0;
}

h1, h2, h3 {
  font-family: var(--ff-otsikko);
  max-width: 37rem;
}

h1 {
    border: 0px;
    color:#000000;
    font-size: 3rem;
    font-style: normal;
    /* padding-top: 20px; */
    letter-spacing: 1;
    text-align: center;
    text-shadow: 4px 4px 0 var(--lisavari4);
}

h2 {
    font-size: 2rem;
    color: var(--lisavari1);
    text-shadow: 4px 4px 0 var(--lisavari4);
}

hgroup.title {
  text-align: center;
  margin-bottom: 2.5rem;
}

hgroup > h1,
hgroup > h2 {
  margin: 0;
}

hgroup > p {
  display: block;
  font-size: 1.25rem;
  font-weight: normal;
  font-style: italic;
  color: var(--lisavari2);
  text-shadow: none;
}

h3{
    font-size: 1.25rem;
    letter-spacing: 2;
    text-align: left;
}

header {
  display: grid;
  grid-template-columns: auto 24ch;
  grid-template-areas:
  "logo info"
  "nav nav";
  gap: 1rem;
  /* display: block; */
  position: relative;
  height: auto;
  left: 0;
  right: 0;
  margin: 2rem;
  /* text-align: center; */
  align-items: center;
  /* justify-content: space-between; */
}

header > figure {
  grid-area: logo;
  display: block;
  position: relative;
  /* width: clamp(300px, 75%, 75vw); */
  /* width: 100% !important;
  height: 100%; */
  inset: 0;
  padding: 0;
  /* margin: 0 auto clamp(-50px, -25%, -25vh) auto; */
  margin: 0;
  /* margin-left: 2rem; */
  /* text-align: center; */
}

header > figure > img {
  /* position: absolute; */
  display: block;
  width: 100%;
  height: auto;
  /* inset: 0 0 auto 0; */
  margin: auto;
  /* margin-top: 25%; */
/*   transform: scale(1.2);
  transform-origin: 2rem 2rem; */
}

header > aside {
  grid-area: info;
  position: relative;
  /* background: white; */
  max-width: 24ch;
  height: auto;
  border: 0;
  color:#000;
  font-size: 0.8rem;
  font-family: var(--ff-leipateksti);
  font-weight: bold;
  padding: 0 0 0.8rem 0.8rem;
  /* position: absolute; */
  /* top: 0;
  right: 0; */
  text-align: left;
  /* opacity: 0.8; */

  z-index: 20;
}

header > aside > p {
  margin-bottom: 0;
  max-width: 20ch;
}

header > aside > p.k18 {
  position: absolute;
  display: inline;
  margin: 0.8rem;
  top: 0;
  right: 0;
  font-size: 1.5rem;
  font-weight: bold;
}

header > aside > ul {
  list-style-type: disc;
  padding-left: 0.8rem;
  margin-top: 0;
  max-width: 20ch;
}

header > aside > ul > li::marker {
  color: var(--lisavari1);
}

header > aside > ul:last-of-type {
  margin-bottom: 0;
}

nav {
  --rotate: 2deg;

  grid-area: nav;
  position: relative;
  border: 0px;
  max-width: 100%;
  left: 0;
  right: 0;
  margin: 0;
  margin-left: -1rem;
  padding: 0.75rem 0;
  z-index: 6;
}

nav a {
  transition-duration: 300ms;
  transition-timing-function: ease-out;

  --scale: 1.2
}

nav > div {
  position: relative;
  width: 100%;
  height: clamp(8rem, 100vh / 2, 100vw / 2);
  margin-bottom: 2.5rem;
}

nav > div > a {
  position: absolute;
  width: 100%;
  max-height: 100%;
  inset: 0;
  margin: auto;
  margin-bottom: -1.5rem;
  z-index: 12;

  --scale: 1.1
}

/* nav > div > a::before {
  content: '';
  display: block;
  position: absolute;
  inset: -2rem;
  width: clamp(320px, 55%, 980px)
  border-radius: 33.333% 50%;
  background-color: var(--paavari);
  opacity: 0.5;
  filter: blur(20px);
  z-index: -1;
} */

nav > div > a > img {
  position: absolute;
  width: clamp(300px, 50%, 900px);
  height: auto;
  inset: 0;
  margin: auto auto 5vw;
  scale: 1.1;
  filter: drop-shadow(0 0 10px var(--paavari));
}

nav > div > div {
  display: flex;
  position: absolute;
  width: clamp(100px, 15rem, 35vw);
  height: 100%;
  /* align-self: flex-start; */
  margin-top: calc( -5rem - 5vw );
}

nav > div > div#vasen-viiva {
  left: 0;
  z-index: 10;
}

nav > div > div#oikea-viiva {
  right: 0;
  z-index: 11;
}

nav > div > div > img {
  /* position: absolute; */
  width: 100%;
  margin: 0;
}

nav > div > div#vasen-viiva > img {
  left: -10%;
}

nav > div > div#oikea-viiva > img {
  right: -10%;
}

nav > div > div > img {
  transform: scale(1.5);
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
  /* gap: 2rem; */
  list-style: none;
  margin: 0 0.75rem 0;
  padding: 0;
  z-index: 13;
}

nav > ul > li {
   display: inline-block;
}

nav > ul > li > a {
  display: block;
  font-family: var(--ff-otsikko);
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.1rem;
  color: var(--lisavari1);
  text-decoration: none;
  text-transform: uppercase;

  --scale: 1.5;
}
nav a:hover, nav a:focus{
  transform: scale(var(--scale)) rotate(var(--rotate));
}

nav > ul > li:nth-of-type(2) {
  --rotate: -7deg;
}

nav > ul > li:nth-of-type(3) {
  --rotate: 10deg;
}

nav > ul > li:nth-of-type(4) {
  --rotate: -2deg;
}

.sisalto{
    border: 0px;
    border-radius: 0px 0px 30px 30px;
    margin: 0px auto;
    width: 1000px;
    left: 0;
}

main, footer {
  box-sizing: border-box;  
  background-color: var(--taustavari);
    /* clear: none; */
    margin-bottom: 10px;
    /* overflow: visible; */
    padding: 3rem;
    text-align: left;
    text-transform: none;
    text-decoration: none;
    left: 0;
    right: 0;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

main > section:not(:first-of-type) {
  margin-top: 2rem;
}

:is(main, footer) p {
  color: #000;
  font-size: 1rem;
  font-family: var(--ff-leipateksti);
  letter-spacing: 0;
  max-width: 60ch;
}

:is(main, footer) a{
  border: 0;
  color: var(--lisavari1);
  font-family: var(--ff-leipateksti);
  margin-right: none;
  text-transform: none;
}
:is(aside, main, footer) a:hover{
  color: var(--paavari);
}

:is(aside, main, footer) a:visited {
  color: var(--lisavari3);
}

:is(main, footer) em{
    border: none;
    color: var(--lisavari1);
    font-weight: bold;
    font-style: normal;
}

iframe {
  display: block;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2.5rem;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 800px;
}

.mainoxet{
    float: right;
    font-size: 12px;
    line-height: 16px;
    list-style:none;
    margin-right: 10px;
    padding: 0px;
    position: relative; top: 0px;
    text-align:center;
    width: 270px;
}

#credits {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

/* #credits > section { 
  min-width: 10rem;
  max-width: 50%;
} */

#credits > section > h2 {
  font-size: 1.5rem;
  margin: 0 0 0.5rem 0;
}

#credits > section > ul {
  list-style-type: none;
  padding: 0;
}

#credits > section > ul > li {
  font-family: var(--ff-leipateksti);
  font-size: 1rem;
}

main p {
  max-width: 60ch;
}

main em {
  color: var(--lisavari4);
}

main ul {
  font-family: var(--ff-leipateksti);
  font-size: 1rem;
  max-width: 60ch;
  padding: 0 0 0 1rem;
  margin-top: 0;
}

footer{
    padding: 1.5rem 3rem;
}

footer > p {
  font-family: var(--ff-leipateksti);
  font-size: 0.8rem;
  text-align: center;
  margin: 0;
  max-width: none;
}

main > section.hahmo > figure {
/*   background: radial-gradient(circle closest-side,
  var(--lisavari1) 0 40%, var(--lisavari2) 40% 60%, var(--lisavari3) 60% 80%, var(--lisavari4) 80%); */
  width: clamp(200px, 13rem, 25vw);
  height: clamp(200px, 13rem, 25vw);
  float: right;
  box-sizing: content-box;
  padding: 0;
  overflow: hidden;
  text-align: center;
  float: right;
  margin: 0 0 1rem 2rem;
  /* border: 1rem solid #a0a2ce; */
  /* border-radius: 50%; */
  rotate: 3deg;
}

main > section.hahmo:nth-of-type(even) > figure {
  float: left;
  margin: 0 2rem 1rem 0;
  rotate: -3deg;
}

main > section.hahmo > figure > img {
  height: 100%;
  width: auto;
  box-shadow: 4px 6px 8px;
  /* opacity: 0.9; */
  /* filter: drop-shadow(0px -2px 2px var(--lisavari1)); */
}

/* main > section.hahmo:nth-of-type(even) > *:not(figure) {
  float: right;
} */

/* ---------- MEDIA QUERY ---------- */

@media only screen and (max-width: 1000px) {
  
  header {
    grid-template-areas: 
    "logo logo"
    "nav info";
    gap: 0;
    margin: 2rem;
  }

  nav > ul {
    flex-direction: column;
    height: 100%;
    margin-left: 1rem;
    margin-bottom: 2rem;
  }

  nav > ul > li > a {
    text-align: start;
    transform-origin: center left;
  }

/*   aside {
    margin-left: -2rem;
  } */

}

@media only screen and (max-width: 800px) {
  
  :root {
    font-size: 16px;
  }

  header {
    margin-bottom: 0;
  }

/*   header > figure > img {
    transform-origin: top center;
  } */

/*   aside {
    margin-left: -4rem;
  } */

  main, footer {
    padding: 3rem;
  }

}

@media only screen and (max-width: 600px) {
    
  :root {
    font-size: 14px;
  }

/*   header > figure {
    margin-left: -2rem;
  } */

/*   header > figure > img {
    scale: 1.3;
  } */

/*   aside {
    margin-left: -2rem;
  } */

  nav > ul {
    gap: 1.5rem;
  }

  main, footer {
    padding: 2rem;
  }

  #credits {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 500px) {

  .piilotettava {
    display: none;
  }

  aside {
    font-size: 1rem;
    padding: 0.5rem;
  }

  aside > p {
    margin-top: 0.25rem;
    max-width: 20ch;
  }

  aside > p:not(.k18):first-of-type {
    margin-top: 0;
  }

  aside > p.k18 {
    margin: 0.5rem;
  }

  aside > p:last-of-type {
    display: none;
  }

  aside > ul {
    font-size: 0.8rem;
  }

  :is(main, footer) p {
    font-size: 1.25rem;
  }

  main > :is(section.hahmo, section.hahmo:nth-of-type(even)) > figure {
    float: none;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  main > section.hahmo:nth-of-type(even) > *:not(figure) {
    float: none;
  }
}

@media only screen and (max-width: 445px) {

/*   header > figure {
    margin-left: -4rem;
  }
  
  header > figure > img {
    transform-origin: center 5rem;
    inset: 0;
  }

  aside {
    margin-left: -1rem;
  } */

  h1 {
    font-size: 2.5rem;
  }

  #credits {
    grid-template-columns: 1fr;
  }

  #credits > section > ul > li {
    font-size: 1.25rem;
  }

}