/* RESET */

html, body, header, nav, h1, h2, h3, h4, h5, h6, 
a, ol, ul, li, strong, main, button, i,
section, img, div, p, form,
fieldset, label, select, input, textarea,
span, article, footer, time, small {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  font-family: 'Inconsolata', sans-serif;
  font-size: 100%;
  font-weight: 100;
  color: inherit;
  text-align: inherit;
  text-decoration: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
  background: transparent;
}

ol, ul, li {
  list-style: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

input[type="password"],
input[type="email"],
input[type="text"],
input[type="submit"],
textarea,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

a, button,
input[type="submit"] {
  cursor: pointer;
}

.in-progress { cursor: progress !important; }

.bd {
  background: #454777;
  color: #FAF4F4;
  /* text-align: center;  */
  margin: 5rem 10rem; }
  .menu {
  display: flex;
  flex-direction: column; }
  #main a {
    cursor: pointer; 
    font-size: 2.5rem; }
  #main a:hover { transform: translate(20px) }
  .home-link:hover,
  button.clear:hover {
    transform: scale(1.2); }
  .home-link {
    cursor: pointer;
    font-size: 1.2rem; 
    text-decoration: underline;
    text-align: center }


/* DRUM KICK */

#drumkit {
  background: #409784; }
  .keys {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 100vh; }
    .key {
      background: rgba(0, 0, 0, 0.4);
      border-radius: .5rem;
      color: #E8E0F7;
      cursor: pointer;
      font-size: 1.5rem;
      margin: 1rem;
      padding: 1rem .5rem;
      text-align: center;
      text-shadow: 0 0 .5rem #333;
      transition: all 0.7s ease;
      width: 7rem; }
  .sound {
    color: #c7b9e2;
    font-size: 1.2rem;
    letter-spacing: .1rem;
    text-transform: uppercase; }
  kbd {
    display: block;
    font-size: 4rem; }
  .playing {
    border-color: #EEEFC4;
    box-shadow: 0 0 1rem #EEEFC4;
    transform: scale(1.1); }


/* CLOCK */

#clock {
  background: #242423; }
  .clock-container {
    background-image: url(https://media1.tenor.com/images/1509ca7498ac6a6003796b77eb80bb1f/tenor.gif?itemid=17367600);
    background-size: cover;
    border: .8rem solid #FCD4A0;
    border-radius: 50%;
    height: 30rem;
    width: 30rem;
    position: relative;
    padding: 2rem;
    margin: 50px auto; 
    box-shadow:
        0 0 0 4px rgba(0,0,0,0.1),
        inset 0 0 0 3px #F3CBCF,
        inset 0 0 10px black,
        0 0 10px rgba(0,0,0,0.2); }
  .clock-face {
    height: 100%;
    width: 100%;
    position: relative;
    transform: translateY(-3px); }
  .clock-glitter {
    height: 100%;
    position: absolute; 
    padding: 2rem; }
  .hand {
    background: #454777;
    height: 6px;
    width: 50%;
    position: absolute;
    top: 50%; 
    transform-origin: 100%;
    transform: rotate(90deg);
    transition: all 0.05s;
    transition-timing-function: cubic-bezier(0.35, 1.74, 0.52, 0.99); }


/* CSS VARIABLES */

:root {
  --base: #F5CB5C;
  --blur: 5px;
  --spacing: 30px;
}

#css-variables {
  background: #242423;
  color: #FAF4F4;
  font-size: 3rem; 
  margin: 4rem;
  text-align: center;}
  .controls {
    font-size: 2rem; }
    .controls input {
      width: 6rem; }
  .day3-img {
    margin: 4rem; }
    .day3-img img {
      background: var(--base);
      filter: blur(var(--blur));
      padding: var(--spacing); }
  .hl {
    color: var(--base); 
    font-weight: 400; }


/* GALLERY */

.panel1 { background-image: url(https://vignette.wikia.nocookie.net/sailormoon/images/9/9c/Ami_Mizuno_Sailor_Mercury_Sailor_Form_-_Anime.png/revision/latest/scale-to-width-down/340?cb=20190904084817); }
.panel2 { background-image: url(https://vignette.wikia.nocookie.net/sailormoon/images/4/41/Minako_Aino_Sailor_Form_-_Anime.png/revision/latest/scale-to-width-down/340?cb=20190906073411); }
.panel3 { background-image: url(https://vignette.wikia.nocookie.net/sailormoon/images/1/1c/Usagi_Sailor_Moon_Cosmic_Form_-_Anime.png/revision/latest/scale-to-width-down/340?cb=20190909081231); }
.panel4 { background-image: url(https://vignette.wikia.nocookie.net/sailormoon/images/5/57/Rei_Hino_Sailor_Mars_Super_Sailor_Form_-_Anime.png/revision/latest/scale-to-width-down/340?cb=20190904235114); }
.panel5 { background-image: url(https://vignette.wikia.nocookie.net/sailormoon/images/2/2f/Makoto_Kino_Sailor_Jupiter_Sailor_Form_-_Anime.png/revision/latest/scale-to-width-down/340?cb=20190906020233); }
.panel6 { background-image: url(https://vignette.wikia.nocookie.net/sailormoon/images/f/fc/Hotaru_Tomoe_Sailor_Saturn_Super_Sailor_Form_-_Anime.png/revision/latest/scale-to-width-down/340?cb=20190910050006); }
.panel7 { background-image: url(https://vignette.wikia.nocookie.net/sailormoon/images/8/8f/Haruka_Tenou_Sailor_Uranus_Sailor_From_-_Anime.png/revision/latest/scale-to-width-down/340?cb=20190909055044); }
.panel8 { background-image: url(https://vignette.wikia.nocookie.net/p__/images/5/5a/Sailor_Neptune_Season_III.png/revision/latest?cb=20170607032544&path-prefix=protagonist); }
.panel9 { background-image: url(https://vignette.wikia.nocookie.net/p__/images/c/c6/Sailor_Pluto_Season_III.png/revision/latest?cb=20170607024056&path-prefix=protagonist); }

#gallery {
  background: #242423; }
  .panels {
    display: flex;
    margin: 2rem 20rem;
    min-height: 80vh;
    overflow: hidden; }
    .panel {
      background-position: center;
      background-size: cover;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 15rem 0;
      text-align: center;
      transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        background 0.2s; }
      .panel p {
        font-size: 1.5rem;
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45); }
      .panel p:nth-child(2) { font-size: 2rem; }
      .panel > * {
        display: flex;
        flex: 1 0 auto;
        align-items: center;
        justify-content: center;
        transition: transform 0.5s;
        margin: 0;
        width: 100%; }
      .panel > *:first-child { transform: translateY(-1000%); }
      .panel.open-active > *:first-child { transform: translateY(0); }
      .panel > *:last-child { transform: translateY(1000%); }
      .panel.open-active > *:last-child { transform: translateY(0); }
    .panel.open {
      flex: 3.5;
      font-size: 5rem;
    }


/* SEARCH */

#search {
  background: #F3CBCF;
  color: #454777; }
  .search-form {
    max-width: 400px;
    margin: 50px auto; }
    input.search {
      background: #FCD4A0;
      border: 2px solid #FCD4A0;
      border-radius: 5px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
      font-size: 30px;
      padding: 10px 20px;
      width: 100%; }
    .suggestions {
      margin: 0;
      padding: 0;
      position: relative; }
      .suggestions li {
        background: #FCD4A0;
        border-bottom: 1px solid #FAF4F4;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
        display: flex;
        justify-content: space-between;
        text-transform: capitalize;
        margin: 0;
        padding: 20px;
        transition: background 0.2s; }
      .suggestions li:nth-child(even) {
        transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
        background: linear-gradient(to bottom,  #FCD4A0 0%,#FCD29C 100%); }
      .suggestions li:nth-child(odd) {
        transform: perspective(100px) rotateX(-3deg) translateY(3px);
        background: linear-gradient(to top,  #FCD4A0 0%,#FCD29C 100%); }
    span.population {
      font-size: 15px; }
    .hl-search {
      background: #454777;
      color: #FCD4A0; }


/* CANVAS */

#canvas {
  background: #F5CB5C; 
  font-size: 18px !important; 
  margin: 2rem; }
  #draw {
    border: 4px solid #FCD4A0; 
    height: 100%;
    width: 100%; }
  .canvas-options {
    display: flex;
    align-items: center;
    justify-content: center; }
    .canvas-options > * {
      margin: 0rem 2rem 1rem; }
  button.clear, a.canvas {
    background: #F3789A;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    padding: 3px 10px; }
  select.effects {
    border-radius: 4px;
    color: #fff; }


/* CHECKLIST */

#checklist {
  color: #242423; 
  font-size: 1.3rem; }
  .checklist-homeIcon {
    fill: #FAF4F4;
    font-size: 1.3rem;
    font-weight: 400; 
    text-decoration: none; 
    transition: all 0.2s;}
  .checklist-homeIcon:hover {
    transform: scale(1.2); }
  .list {
    background: #FAF4F4;
    border-radius: 0.3rem;
    box-shadow: 10px 10px 0 rgba(0,0,0,0.25);
    max-width: 35rem;
    margin: 2rem auto; }
    .item {
      border-bottom: 1px solid #E8EDF1;
      display: flex;
      align-items: center; }
    .item:last-child {
      border-bottom: 0; }
    .cb-input {
      margin: 1.5rem 1.5rem; }
    .cb-input:checked + p {
      text-decoration: line-through; }
      .cb-input + p {
        border-left: 1px solid #D1E2FF;
        padding: 1.2rem;
      }


/* VIDEO PLAYER */

#video-player {
  background: rgb(245,203,92);
  background: linear-gradient(48deg, rgba(245,203,92,1) 0%, rgba(252,212,160,1) 22%, rgba(250,171,193,1) 62%, rgba(243,120,154,1) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 0; }
  .home-link.vp {
    margin-bottom: 2em; }
  .player {
    border: 5px solid rgba(0,0,0,0.2);
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    max-width: 50rem;
    position: relative;
    overflow: hidden; }
    .player__video {
      width: 100%; }
    .player__button {
      background: none;
      border: 0;
      cursor: pointer;
      line-height: 1;
      outline: 0;
      padding: 0.5rem; }
    .player__controls {
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 0;
      width: 100%;
      transition: all 0.3s;
      transform: translateY(100%) translateY(-5px); }
      /* .player__controls > * {
        flex: 1 } */
      .player:hover .player__controls {
        transform: translateY(0px); }
      .player:hover .progress {
        height: 1rem; }
    .progress {
      background: rgba(0,0,0,0.5);
      position: relative;
      display: flex;
      flex: 10;
      flex-basis: 100%;
      height: 5px;
      transition: height 0.3s; }
      .progress__filled {
        background: #ACCC29;
        flex: 0;
        flex-basis: 50%; 
        width: 50%; }

/* styling range input */

input[type=range].player__slider {
  -webkit-appearance: none;
  background: transparent;
  width: 100%;
  margin: 0 5px;
}

input[type=range].player__slider:focus {
  outline: none;
}

input[type=range].player__slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: rgba(255,255,255,0.8);
  border-radius: 1.3px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}

input[type=range].player__slider::-webkit-slider-thumb {
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background: #ffc600;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.5px;
  box-shadow:0 0 2px rgba(0,0,0,0.2);
}

input[type=range].player__slider:focus::-webkit-slider-runnable-track {
  background: #bada55;
}

input[type=range].player__slider::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
  background: #ffffff;
  border-radius: 1.3px;
  border: 0.2px solid rgba(1, 1, 1, 0);
}

input[type=range].player__slider::-moz-range-thumb {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
  height: 15px;
  width: 15px;
  border-radius: 50px;
  background: #ffc600;
  cursor: pointer;
}

/* KEY DETECTION */