* { box-sizing: border-box; }

  body { background: #f8f8f6; color: black; }

  h2 { text-shadow: 0 0 10px rgba(0,0,0,.3); font-family: Cabin Sketch; font-size: 27px; margin: 0; margin-bottom: 10px; }

  .shadow { border: solid 1px rgba(0,0,0,.05); box-shadow: 0 0 20px rgba(0,0,0,.05); }

  .top { overflow: hidden; position: relative; background: #dde2dd; margin-bottom: 20px; background-position: center top; background-size: cover; }
  .top-inner { text-shadow: 0 0 10px rgba(0,0,0,.3); padding: 0 10px 30px; box-sizing: border-box; width: 100%; height: 100%; xdisplay: flex; align-items: center; justify-content: center; text-align: center; }
  .site-name { display: table; margin: auto; font-size: 10px; letter-spacing: 1px; font-weight: bold; margin-top: 20px; margin-bottom: 15px; }
  .site-name pre { text-align: left; margin: 0; }
  .line { font-family: Monospace; font-size: 14px; letter-spacing: 1px; line-height: 1.2; padding: 0 40px; }

  .mail { font-size: 11px; float: right; color: white; padding: 4px 5px; padding-bottom: 1px; border-radius: 3px; background: gray; }
  .mail:hover { text-decoration: none; background: #666; }
  .mail i { vertical-align: middle; margin-right: 4px; margin-top: -3px; font-size: 17px; }


  .items { margin-right: -10px; margin-bottom: 40px; }
  .items::after { content: ""; display: block; clear: both; }
  .items .item { position: relative; background-repeat: no-repeat; background-size: contain; display: block; float: left; margin-right: 10px; margin-bottom: 10px; width: calc(50% - 10px); padding-bottom: calc(50% + 20px); color: black; box-sizing: border-box; }

  .drum-items { margin-right: -10px; margin-bottom: 40px; }
  .drum-items::after { content: ""; display: block; clear: both; }
  .drum-items iframe { position: absolute; width: 100%; height: 100%; }
  .drum-items .item { position: relative; width: calc(50% - 10px); float: left; margin-right: 10px; padding-bottom: 30.8%; }

  .drum-items .drum-machine { position: relative; color: black; display: block; background-color: white; background-image: url(//s3.amazonaws.com/onemotion/images/thumbnail-drum-machine.jpg); background-repeat: no-repeat; background-size: contain; /*margin-bottom: 40px; padding-bottom: 70%; */padding-bottom: 35.4%; }
  .drum-items .drum-machine span { position: absolute; text-align: center; display: block; bottom: 0; left: 0; right: 0; background: white; padding: 7px 10px; xfont-family: Give You Glory; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


  .comments {�padding: 20px; background: white; margin-bottom: 40px; }

  @media (min-width: 568px) {
    .site-name { font-size: 23px; }
    .line { font-size: 17px; }
    /*.drum-machine { width: 49%; padding-bottom: 35.4%; }*/
    .items .item { width: calc(25% - 10px); padding-bottom: calc(25% + 20px); }
    h2 { font-size: 33px; }
  }

  /*@media (min-width: 1024px) {
    .top { background-size: 100%; xbackground-attachment: fixed; padding-bottom: 240px; }
    .top-inner { position: absolute; }
  }*/
  .item span { position: absolute; text-align: center; display: block; bottom: 0; left: 0; right: 0; background: white; padding: 7px 10px; xfont-family: 'Special Elite'; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .banner { display: block; xborder: solid 1px #ddd; margin: auto; margin-top: 5px; margin-bottom: 40px; }