p{
  margin: 0px;
}

ul{
  margin: 0px;
  padding: 0px;
}

html, body {
  margin: 0px;
  padding: 20px;
  color: #fff;
  font-family: forma-djr-text, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-feature-settings: "salt";
  font-size: 1.2rem;
  background: url('../assets/bg.jpeg');
  background-size: cover;
}

canvas {
  display: block;
}
#container{
  opacity: 0;
}

@media (min-width: 800px) {
  .grid {
    margin-left: 135px;
    padding-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 30px;
    grid-template-areas: "z z z z"
                         "a c c c"
                         "a g g h";
    max-width: 1600px;
  }
}

@media (max-width: 800px) {
  .grid {
    padding-top: 40px;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr;
    grid-template-areas: "c"
                         "a"
                         "g";
    max-width: 1600px;
    padding-bottom: 200px;
  }

  .story{
    padding-right: 0px !important;
    font-size: 1.5rem !important;
  }
}

.story{
  grid-area: c;
  font-size: 2rem;
  font-weight: 500;
  text-align: justify;
  padding-right: 100px;
  hyphens: manual;
}

p{
  grid-area: g;
  text-align: justify;
  line-height: 1.5rem;
  hyphens: auto;
}

ul{
  grid-area: a;
  font-weight: 300;
  list-style: none;
}

li{
  transition: 0.3s;
}

li:hover{
  margin-left: 20px;
}

.ep{
  font-weight: 500;
}

.line{
  display: inline-block;
  width: 83px;
  border-bottom: 2px #fff solid;
  margin-bottom: 5px;
  margin-right: 5px;
}


#logo{
  height: 102px;
  /*filter: brightness(0);*/
}

.hideall {
  display: none !important;
}

a{
  text-decoration: none;
  color: inherit;
}