/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
background-color: gray;
  color: gray;
  font-family: Verdana;
}

#checklist {
  --background: #ffffff;
  --text: #414856;
  --check: #4F29F0;
  --disabled: #C3C8DE;
  --width: 100px;
  --height: 140px;
  --border-radius: 10px;
  background: var(--background);
  width: var(--width);
  height: var(--height);
  border-radius: var(--border-radius);
  position: relative;
  box-shadow: 0 10px 30px rgba(#414856, 0.05);
  padding: 30px 45px;
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
  label {
    color: var(--text);
    position: relative;
    cursor: pointer;
    display: grid;
    align-items: center;
    width: fit-content;
    transition: color .3s ease;
    &::before,
    &::after {
      content:"";
      position: absolute;
    }
    &::before {
      height: 2px;
      width: 8px;
      left: -27px;
      background: var(--check);
      border-radius: 2px;
      transition: background .3s ease; 
    }
    &:after {
      height: 4px;
      width: 4px;
      top: 8px;
      left: -25px;
      border-radius: 50%;
    }
  }
  input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    height: 15px;
    width: 15px;
    outline: none;
    border: 0;
    margin: 0 15px 0 0;
    cursor: pointer;
    background: var(--background);
    display: grid;
    align-items: center;
    &::before,
    &::after {
      content:"";
      position: absolute;
      height: 2px;
      top: auto;
      background: var(--check);
      border-radius: 2px;
    }
    &::before {
      width: 0px;
      right: 60%;
      transform-origin: right bottom;
    }
    &::after {
      width: 0px;
      left: 40%;
      transform-origin: left bottom;
    }
    &:checked {
      &::before {
        animation: check-01 .4s ease forwards;
      }
      &::after {
        animation: check-02 .4s ease forwards;
      }
      + label {
        color: var(--disabled);
        animation: move .3s ease .1s forwards;
        &::before {
          background: var(--disabled);
          animation: slice .4s ease forwards;
        }
        &::after {
          animation: firework .5s ease forwards .1s;
        }
      }
    }
  }
}

@keyframes move {
  50% {
    padding-left: 8px;
    padding-right: 0px;
  }
  100% {
    padding-right: 4px;
  }
}
@keyframes slice {
  60% {
    width: 100%;
    left: 4px;
  }
  100% {
    width: 100%;
    left: -2px;
    padding-left: 0;
  }
}
@keyframes check-01 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }
  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }
  51% {
    width: 0px;
    top: 8px;
    transform: rotate(45deg);
  }
  100% {
    width: 5px;
    top: 8px;
    transform: rotate(45deg);
  }
}
@keyframes check-02 {
  0% {
    width: 4px;
    top: auto;
    transform: rotate(0);
  }
  50% {
    width: 0px;
    top: auto;
    transform: rotate(0);
  }
  51% {
    width: 0px;
    top: 8px;
    transform: rotate(-45deg);
  }
  100% {
    width: 10px;
    top: 8px;
    transform: rotate(-45deg);
  }
}
@keyframes firework {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0, 0 0 0 -2px #4F29F0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    box-shadow: 0 -15px 0 0px #4F29F0, 14px -8px 0 0px #4F29F0, 14px 8px 0 0px #4F29F0, 0 15px 0 0px #4F29F0, -14px 8px 0 0px #4F29F0, -14px -8px 0 0px #4F29F0;
  }
}


//--- ## BASIC #############
body {
  background: #E8EBF3;
  height: 100vh;
  font: 400 16px 'Varela Round', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .socials {
    position: fixed;
    display: block;
    left: 20px;
    bottom: 20px;
    > a {
      display: block;
      width: 30px;
      opacity: .2;
      transform: scale(var(--scale, .8));
      transition: transform .3s cubic-bezier(0.38,-0.12, 0.24, 1.91);
      &:hover {
        --scale: 1;
      }
    }
  }
}



<!--- 

PAGEDOLL BEGINS HERE 

link to snippet: https://toyhou.se/25154081.css-hide-and-seek-pagedoll 

--> 

 

 

<div class="card pagedoll border-0" style="background-color: rgba(0,0,0,0); position: fixed; z-index: 3; 

 

bottom: 0px; 

right: 40px; 

width: 300px; 

height: 50px;"> 

 

<!-- bottom and right adjust the location of the entire pagedoll. width and height adjust the maximum area of the pagedoll. if you're looking to specifically tweak the positioning of individual images or the comments box, please keep scrolling! --> 

 

 

<div class="mx-md-0 mx-1 col-md-auto col swap-img"> 

<div class="row no-gutters"> 

 

 

<!-- COMMENTS BOX --> 

<!-- you may remove everything inside these markers if you DONT want the comment box anymore, however if may require you to realign the pagedoll images--> 

 

<div class="col order-1"> 

<div class="card border-0 bg-faded p-3 text-center" style="width: 200px; border-radius: 15px; 

right: 80px; 

bottom: 0px;"> 

<!-- right and bottom here adjust the positioning of the comments box specifically. keep scrolling if you are looking to adjust the pagedoll images --> 

 

<div class="text-muted"> 

<p> this comments box was adapted from @jiko's pagedoll code! </p> 

</div> 

 

<div class="row no-gutters pt-2 m-n1"> 

<div class="col p-1"> 

 

<!-- BUTTON LINKS --> 

<a href="#" class="w-100 btn btn-primary btn-sm text-white"> 

<i class="fas fa-moon my-auto"></i> 

</a> 

<!-- END BUTTON LINKS --> 

 

</div> 

</div> 

 

</div> 

</div> 

 

<!-- END COMMENTS BOX --> 

 

 

<!-- PAGEDOLL IMAGE --> 

 

<!-- remove the <a> tags if you dont want the image to link to anything --> 

<a href="#" target="_BLANK"> 

 

<!-- pagedoll image shown when NOT hovering --> 

<img src="https://f2.toyhou.se/file/f2-toyhou-se/users/Badame?2" class="btn btn-outline-transparent p-0 h-1 img-hidden" style=" 

 

max-width: 150px; 

bottom: 10px; 

right: -135px;"> <!-- use these to adjust the positioning of the pagedoll images --> 

 

<!-- pagedoll image shown when hovering --> 

<img src= "https://f2.toyhou.se/file/f2-toyhou-se/users/Badame?2" class="btn btn-outline-transparent p-0 h-1 img-hover" style=" 

 

max-width: 150px; 

bottom: -20px; 

right: 0px;"> 

<!-- the numbers are mismatched in order to line it up , i don't know how to fix it my bad --> 

 

</a> 

 

<!-- END PAGEDOLL IMAGE --> 

 

 

</div> 

</div> 


<div id="nav"> 

<ul> 

<li><a href="URL HERE">home</li> 

<li><a href="URL HERE">about</li> 

<li><a href="URL HERE">photos</li> 

<li><a href="URL HERE">blog</li> 

<li><a href="URL HERE">links</li> 

<li><a href="URL HERE">other</li> 

</ul> 

</div> 

 

<div id="credit"><a href="https://repth.neocities.org/index.html">©repth</a></div> 

 



</div>