body {
    font-family: "Barlow", sans-serif;
    font-size: 1.5rem;
    color: #FBF7F4;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    margin: 0;
    background-color: #010101;
    
  }
  .container {
    height: 120%;
    background-image: url(asset/background.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    background-clip: border-box;
    padding-left: 5%;
  }
  
  .dp{height: 100%;}

  .logo {
    width: 30%;
  }
  
  .reservation{
    position: relative;
    top: 5%;
    display: flex;
    flex-direction: column;
  }

  .cta{
    margin: 0 5px 40px 5px;
  }
  
  p {
    margin-bottom: 12px;
    margin-top: 12px;
  }
  
  .date {
    font-weight: 600;
    padding-bottom: 20px;
  }

  .report{
    font-weight: 100;
    font-style: italic;
    font-size: .8em;
    margin-left: .5em;
    padding-bottom: 20px;
  }

  .inline{display: flex; flex-flow: row wrap; align-items: center;}
  .soldout-text{text-decoration: line-through;padding-bottom: 0px;}
  .soldout-banner, .newdate-banner{margin-bottom: 20px; margin-left: 16px; background-color:#FF0505; padding: 8px;transform: rotate(-3deg);text-transform: uppercase;}
  .soldout-banner{margin-bottom: 0px;}
  .newepisode-banner{background-color: #2384F6;margin-bottom: 20px; margin-left: 16px; padding: 8px;transform: rotate(-3deg);text-transform: uppercase;}

  a {
    text-decoration: none;
    text-align: center;
    color: #FBF7F4;
    padding: 15px 20px;
    border: 1px solid #FBF7F4;
    margin-top: 40px;
    transition: all 250ms ease-in-out;
  }

  .reservation-dp{
    position: relative;
    top: 10%;
    display: flex;
    flex-direction: column;
  }

  .reservation-dp > h2{
    padding-bottom: 1.5rem;
  }

  .download{
    display: block;
    margin: 0 5px 60px 5px;
  }

  a:hover {
    color: #010302;
    background: #FBF7F4 ;
  }
  
  .scrolldown{
    position: relative;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
  }

  .section01, .section02{
    padding: 0 5%;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }
  .section02{
    padding-top:5%;
    padding-right: 0;
  }

  .luna{
    width: 50%;
    position: relative;
    left: -10%;
  }

  .description{
    columns: 2;
    font-size: 1rem;
  }

  .info{
    width: 45%;
    order: 2;
  }

  .decoration{
    margin: 0 auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 50px;
  }

  h2{
    font-size: 1.5rem;
    text-transform: uppercase;
  }

  .bloc{
    font-weight: 600;
    font-size: 1rem;
    width: 250px;
  }

  h3{
    font-weight: 300;
    text-transform: uppercase;
    font-size: 1rem;
    margin-bottom: 5px;
  }

  .caption{
    font-size: .75rem;
    font-weight: 400;
    margin-bottom: 5px;
  }

  .list{
    display: flex;
    flex-flow: row wrap;
    gap: 50px;
  }

  .dancers{
    margin-bottom: 200px;
  }

  .lydienatan{
    width: 33%;
  }


@media screen and (max-width:1919px) {
  body {
    font-size: 1rem;
  }

  p {
    margin-bottom: 6px;
    margin-top: 6px;
  }
  .bloc{width: 210px;}
  .dancers{margin-bottom: 100px}
}

@media screen and (max-width:1441px) {
  .container{height: 135%;}
  .scrolldown{top: 3%;}
  h2{font-size: 1.2rem;}
  .decoration{padding-top: 30px;}
  .bloc{font-size: .8rem; width: 180px;}
  .dp{height: 100%;}
}

@media screen and (max-width:1024px) {
  .container{padding-left: inherit; background-size: auto 80%; background-position: bottom;}
  body{text-align: center;}
  .logo {width: 60%;}
  .reservation{position: inherit;}
  .inline{justify-content: center;}
  .scrolldown{transform: none; left: inherit; top: 10%;}
  .section01, .section02{text-align: left; justify-content: center;overflow-x: hidden;}
  .section02{padding-right: 5%;}
  .info{width: 65%; order: inherit;}
  .luna {transform: scaleX(-1); left: inherit; right: -40%; top: -150px;}
  .section02{padding-top: 0;}
  .container{height: 120%;}
  .dp{height: 110%;}
}

@media screen and (max-width:820px) {
  .scrolldown{top: 5%;}
  .info{width: 80%;}
  .section02{padding-top: 0; padding-right: 5%;}
  .crew{width: 80%;}
  .bloc{width: 250px;}
  .artists{margin-bottom: 50px;}
}

@media screen and (max-width:480px) {
  .logo {width: 50%;}
  .reservation{gap: 20px; padding: 0 16px;}
  .soldout-banner, .newdate-banner{font-size: .8rem; padding: 6px; margin-left: 8px;}
  .soldout{flex-wrap: nowrap;}
  .newdate-text, .report{padding-bottom: 0;}
  .newdate{padding-bottom: 20px;}
  .description{columns: inherit;}
  .luna{top: -50px; width: 70%;}
  .list{gap: 30px;}
  .bloc{width: 155px;}
  .dancers{margin-bottom: 50px;}
  .lydienatan{width: 60%;}
}

@media screen and (max-width:420px) {
  .info, .crew{width: 95%;}
  .scrolldown{top: 5%;}
  .container{height: 155%;}
}

@media screen and (max-width:395px) {
  .decoration{width: 50%;}
  .bloc{width: 135px;}
  .container{height: 170%;}
}

@media screen and (max-width:360px) {
  .container{height: 180%;}
}

@media screen and (max-width:320px) {
  .container{height: 230%;}
}

@media screen and (min-width:3000px) {
  body{font-size: 2.5rem;}
  .container{height: 130%;}
  h2{font-size: 3rem;}
  .description, h3, .bloc{font-size: 2rem;}
  .bloc{width: 500px;}
  .list{gap: 100px;}
  .dp{height: 100%;}
}

@media (min-width:480px) and (max-height:320px){
  .logo{width: 25%;}
  .container{height: 220%;}
}

@media (min-width:640px) and (max-height:768px){
  .logo{width: 25%;}
  .container{height: 220%;}
}

@media (min-width:1440px) and (max-height:1350px){
  .container{height: 180%;}
}

@media (min-width:2000px) and (max-height:1350px){
  .container{height: 200%;}
}

@media (min-width:3840px) and (max-height:1600px){
  .container{height: 200%;}
}

@media (max-width:3840px) and (max-height:600px){
  .container{height: 250%;}
}