*{
  margin: 0;
  padding: 0;
  color: #333;
  text-decoration: none;
}

html{
  scroll-behavior: smooth;
  overflow: auto;
}

body {
  overflow: hidden;
  font-family: serif;
  line-height: 1.6rem;
  background: #FDEBED;
}

header{
  background: #FDEBED;
  animation: .8s cubic-bezier(0.170, 0.935, 0.305, 1.000) header forwards;
}

header h1{
  animation: .8s cubic-bezier(0.170, 0.935, 0.305, 1.000) header_h1 forwards;
}

header h1 a{
  color: #333;
}

#header_h1.active a{
  color: #333;
}

#nav_toggle {
  animation: .8s cubic-bezier(0.170, 0.935, 0.305, 1.000) nav_toggle forwards;
}

#nav_toggle i {
  background-color: #333;
}

#navigation{
  background: #FDEBED;
}

#toEN{
  background: #EF9CCD;
}

article{
  width: 100%;
  padding: 3.5rem 0;
  margin: 0;
  background: #fff;
}

h2{
  margin: 3rem auto;
  letter-spacing: 4px;
}

#youtube{
  height: 100vh;
  background: linear-gradient(180deg, #fff 0%, #fff 50%, #FDEBED 50%, #FDEBED 100%);
}

#youtube h3{
  padding: 1rem 0 0 0;
  font-size: 13px;
}

#youtubeWidth{
  margin: 1rem auto;
}

#backFlex{
  display: flex;
  justify-content: space-around;
  align-items: stretch;
}

#backFlex svg{
  width: 80px;
  height: auto;
}

#backFlex svg .st0{
  fill: none;
  stroke: #000000;
  stroke-width: .5;
}

@media screen and (min-width: 600px) {

  nav ul li a{
    color: #333;
  }

  #navigation{
    animation: .8s cubic-bezier(0.170, 0.935, 0.305, 1.000) navigation forwards;
  }

  article{
    width: 100%;
  }

}

@media screen and (min-width: 1024px) {

  #youtube h3{
    font-size: 20px;
  }

}