:root {
    --bg-main-color: #1f2029;
    --toned-down-white: #f1f1f1;
    --highlight-main: #8167a9;
  }
  
  body {
    background-color: var(--bg-main-color);
    font-family: "Montserrat", sans-serif;
    transition: 0.3s linear;
    overflow:hidden;
  }
  
  h1 {
    color: var(--toned-down-white);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10%;
    font-size: 3rem;
    transition: 0.3s linear;
    transform-origin: left;
  }
  h2 {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 40px;
    transition: 0.3s linear;
  }
  
  .hearBeat{
      animation:heartBeat .6s linear;
  }
  
  @keyframes heartBeat{
      0%{
          transform:scale(1);
  
      }
      20%{
          transform:scale(1.1);
      }
      60%{
          transform:scale(1);
  
      }
      80%{
          transform:scale(1.1);
  
      }
      100%{
          transform:scale(1);
  
      }
  }
  
  .change1 {
    color: var(--toned-down-white);
    transition: 0.3s linear;
  }
  .change2 {
    color: var(--highlight-main);
    transition: 0.3s linear;
  }
  
  #btn-wrapper {
    text-align: center;
  }
  
  /* sets the size the switch's body, this is the label element, and our container */
  .switch {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 10px;
  }
  
  /* hides the checkbox's default ticking box, we don't need to show it, we only need it's "checked" functionality to keep track of when user clicks*/
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* this is a span nested inside label container, that takes the width and position of its container */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    background-color: var(--highlight-main);
    transition: 0.4s;
  }
  
  /* this is the toggle circle that moves, setting its inital position and size */
  .slider:before {
    position: absolute;
    content: "";
    height: 40px;
    width: 40px;
    left: -4px;
    bottom: -15px;
    background-color: var(--toned-down-white);
    transition: 0.4s;
    color: var(--highlight-main);
    font-size: 10px;
  }
  
  /* color change on slider circle when input container is clicked.because label element is container, clicking anywhere in it triggers input:checked */
  input:checked + .slider {
    background-color: var(--toned-down-white);
  }
  
  /* when input is focused show shadow on slider */
  input:focus + .slider {
    box-shadow: 0 0 1px #2196f3;
  }
  
  /* when label cointainer is clicked change toggle circle color, and move it to the right */
  input:checked + .slider:before {
    background-color: var(--highlight-main);
    content: "";
    transform: translateX(70px);
  }
  
  /* make the label container rounded*/
  .slider.round {
    border-radius: 34px;
  }
  
  /* make the roggle circle round */
  .slider.round:before {
    border-radius: 50%;
  }