@charset "UTF-8";
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}


img {
  width: 60%;
  margin: 5% 20% 35% 20%;
  pointer-events: none;
}
.menu img {
  width: 100%;
  margin: 5% 0 5% 0;
  pointer-events: none;
}
.bookmark {
  text-align: center;
  margin: 10% auto;
  font-family: sans-serif;
  z-index: 999;
  width: 60%;
  display: flex;
  justify-content: space-between;
}
a {
  text-decoration: none;
  color: black;
}
.bookmark a:hover {
  background-image: linear-gradient(black, black);
    background-position: 0 50%;
    background-size: 100% 3px;
    background-repeat: repeat-x;
    text-decoration: none;
}
.info {
  font-family: Arial, sans-serif;
}
label {
  position: fixed;
  top: 40px;
  margin-left: 40px;
    display: block;
    line-height: 1;
    cursor :pointer;
    padding: 7px 8px;
    border-radius: 100px;
    color: white;
    background: darkgray;
}
input {
    display: none;
}
.info p {
  position: fixed;
  top: 47px;
  font-size: 550%;
  margin-left: 100px;
    height: 0;
    overflow: hidden;
    display: block;
    opacity: 0;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    /* z-index: -1; */
    color: mediumblue;
}

.caption p {
  position: fixed;
  top: 155px;
  margin-right: 40%;
  font-size: 100%;
  text-align: justify;
  font-family: a-otf-gothic-bbb-pr6n, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: mediumblue;
}

#film-info:checked ~ #link p {
    opacity: 1;
    height: 300px;
}





.title {
  width: 60%;
  margin: auto;
  font-family: Arial, sans-serif;
}
.title h1 {
  padding: 5% 0 1% 0;
}
.title a {
  font-size: 15px;
}
.title a:hover {
  background-image: linear-gradient(black, black);
    background-position: 0 50%;
    background-size: 100% 3px;
    background-repeat: repeat-x;
    text-decoration: none;
}
.title p {
  padding: 10% 0 5% 0;
  word-break: break-all;
  font-feature-settings: "palt" 1;
  font-family: a-otf-gothic-bbb-pr6n, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.menu {
  margin: auto;
  width: 60%;
  font-family: Arial, sans-serif;
}

.menu h1 {
  padding: 5% 0 1% 0;
}

.menu p {
  text-align: right;
  font-size: 10px;
  position: relative;
  top: -20px;
  margin-bottom: -13px;
  z-index: -1;
}

.menu a{
  font-size: 30px;
  display: block;
}

.menu a:hover .menu-label {
  background-color: black;
  color: black;
}

.menu-item {
  max-width: 90%;
}

hr {
  border-width: 1px 0px 0px 0px;
}




@keyframes fadeIn {
  from {
      opacity:0;
      /* transform: translateY(50px); */
  }
  to {
      opacity:1;
      /* transform: translateY(0); */
  }
}

.menu, .photos, .title p {
  animation: fadeIn 3s;
}



@media screen and (max-width: 665px) {
  body {
    background:url("bg.png");
    background-repeat: repeat-y;
    background-position: top;
    background-color: black !important;
    background-size: contain;
  }
  .photos {
    margin-top: 3%;
  }
  img {
    width: 80%;
    margin: 1% 10%;
    -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
  }
  .bookmark {
    margin: 25% 10% 20% 10%;
    text-align: center;
    width: 80%;
  }
  .bookmark a:hover {
    background-image: linear-gradient(#fe9d17, #fe9d17);
      background-position: 0 50%;
      background-size: 100% 3px;
      background-repeat: repeat-x;
      text-decoration: none;
  }
  a {
    color: #fe9d17;
  }
  label {
    position: fixed;
    top: 30px;
    margin-left: 10px;
      display: block;
      line-height: 1;
      cursor :pointer;
      padding: 7px 13px;
      border-radius: 100px;
      color: #fe9d17;
      background: black;
      opacity: 0.4;
  }
  .info p {
    top: 70px;
    margin-left: 20px;
    color: #fe9d17;
    font-size: 75px;
  }
  .caption p {
    top: 150px;
    font-size: 100%;
    margin-right: 20px;
    text-align: justify;
    font-family: a-otf-gothic-bbb-pr6n, sans-serif;
    font-weight: 400;
    font-style: normal;
  }





  .title {
    width: 85%;
  }
  .title a {
    color: darkgray;
  }
  .title a:hover {
    background-image: linear-gradient(darkgray, darkgray);
      background-position: 0 50%;
      background-size: 100% 3px;
      background-repeat: repeat-x;
      text-decoration: none;
  }
  .title h1 {
    text-align: right;
  }
  .title p {
    color: darkgray;
    padding: 20% 2%;
  }

  .menu {
    width: 85%;
  }
  .menu h1 {
    color: darkgray;
  }
  .menu a {
    color: darkgray;
    display: block;
  }
  .menu a:visited {
    color: dimgray;
  }
  .menu a:hover .menu-label {
    background-color: white;
    color: white;
  }
  .menu p {
    color: darkgray;
  }
  .menu-item {
    max-width: 90%;
  }

}