/* Question 1 */
.red-circle{
    width:100px;
    height:100px;
    border-radius:50%;
    background-color:red;
  }
  
  /* Add Your Code for Question 1 here */
  .red-circle:hover {
    background-color: black;
    transition: 0.2s;
  }
  
  
  /* Question 2 */
  .hover-b-r{
      background-color:blue;
      width:250px;
      height:100px;
  }
  
  /* Add Your Code for Question 2 here */
  .hover-b-r:hover {
    border-radius: 20px;
    transition: 0.5s;
  }
  
  
  /* Question 3 */
  .hover-tr{
      font-family:sans-serif;
      letter-spacing:-0.1px;
  }
  
  /* Add Your Code for Question 3 here */
  .hover-tr:hover{
    letter-spacing: 10px;
    transition: 0.7s;
  }
  
  
  /* Question 4 */
  .hover-move-up{
      background-color:pink;
      padding:8px;
      border-radius:8px;
      font-family:sans-serif;
      text-transform:uppercase;
      text-decoration: none;
      position: relative;
      
  }
  
  /* Add Your Code for Question 4 here */
  .hover-move-up:hover {
    bottom: 5px;
    transition: 0.9s;
    
}

  /* Questions 5 & 6 */
  #hover-move, #hover-move-2{
      position:relative;
      left:0px;
      transition: 2s;
  }
  
  /* Add Your Code for Question 5 here */
  #hover-move:hover {
    left: 30px;
    transition: 2s;
    transition-timing-function: ease-in-out;
  }
  
  /* Add Your Code for Question 6 here */
  #hover-move-2:hover{
    position: absolute;
    left: calc(100vw - 100px);
    transition: 2s;
    transition-timing-function: ease-in-out;
  }
  
  
  /* Question 7 */
  .hover-blur{
      width:400px;
  }
  
  /* Add Your Code for Question 7 here */
  .hover-blur:hover {
    width:400px;
    filter: blur(4px);
    transition: 3s;
}
  
  /* Question 8 */
  .hover-cursor{
      background-color:yellow;
      width:500px;
      padding:20px;
      text-align:center;
  }
  
  /* Add Your Code for Question 8 here */
  .hover-cursor:hover{
    cursor: progress;
    transition: 3.5s;
}
  /* Question 11 */
  .blue-circle-parent{
      padding:50px;
      background-color:lightblue;
      display:inline-block;
  }
  
  /* Add Your Code for Question 11 here */
  .blue-circle-parent > .red-square {
    background-color:blue;
    border-radius: 50%;
  }
  
  /* Question 12 */
  .paragraph-parent{
      width:400px;
  }
  
  /* Add Your Code for Question 12 here */
  .paragraph-parent > p {
    color: red;
    font-family: sans-serif;
  }
  
  /* Question 13 */
  .parent-presence > div{
    background: rgb(48, 17, 255);
    margin: 10px;
    width:5px;
    height: 5px;
    border: 10px solid;
  }
  
  
  /* Question 14 */
  .parent-child-appear{
      background-color:wheat;
      padding:20px;
      position:relative;
      height:140px;
  }
  
  .child-appear{
      position:absolute;
      right:20px;
      width:100px;
      height:100px;
      background-color:white;
      opacity: 0;
  }
  
  /* Add Your Code for Question 14 here */
  .parent-child-appear:hover > .child-appear {
    opacity: 100;
  }
  
  /* Add your code to question 15 here */
  
  .parent-move-1 .red-square {
    position: absolute;
    left:0;
  }
  
  /* Add Your Code for Question 15 here */
  .parent-move-1:hover > .red-square {
    left: 30px;
  }
  
  /* Add your code to question 16 here */
  
  .parent-move-2 .red-square {
      position: absolute;
      left: 0;
  }
  
  /* Add Your Code for Question 16 here */
  .parent-move-1:hover > .red-square {
    position: fixed;
    left: calc(100vw - 100px);
  }
  
  /* Question 17 */
  .loading-parent{
      background-color:yellow;
      width:500px;
      height:20px;
      padding:20px;
      text-align:center;
      position:relative;
  }
  
  .loading-child{
      background-color:blue;
      height:100%;
      width:20%;
      position:absolute;
      top:0px;
      left:0px;
  }
  
  /* Add Your Code for Question 17 here */
  .loading-parent:hover > .loading-child {
    width: 80%;
  }
  
  
  /* Question 18 */
  .parent-rotate{
      width:300px;
      background-color:grey;
      padding:10px;
  }
  
  .parent-rotate div{
      width:30px;
      height:30px;
      background-color:blue;
      display:inline-block;
      margin:6px;
  }
  
  /* Add Your Code for Question 18 here */
  .parent-rotate:hover > div {
    transform: rotate( 30deg );
  }
  
  /* Question 19 */
  .parent-ta-da{
      background-color:grey;
      border-radius:50%;
      padding:50px;
      width:10px;
      height:10px;
  }
  .ta-da{
    position: fixed;
      background-color:yellow;
      height:100vh;
      width:100vh;
      border-radius:50%;
      top:0px;
      right:0px;
      z-index:3;
      line-height:100vh;
      text-align:center;
      display:none;
  }
  
  /* Add Your Code for Question 19 here */
  .parent-ta-da:hover + .ta-da {
    display: block;
  }
  
  /* Question 20 */
  .parent-text-change{
      width:300px;
      background-color:pink;
      padding:10px;
      color:red;
      font-family:sans-serif;
  }
  
  /* Add Your Code for Question 20 here */
  .parent-text-change:hover > .before-hover {
    display: none;
  }
  .parent-text-change:hover > .on-hover {
    display: flex;
  }
  
  
  /* Question 21 */
  .tonguetwister{
      font-size:20px;
  }
  
  /* Add Your Code for Question 21 here */
  .tonguetwister:hover > .hide-letter {
    color: transparent;
  }
  
  
  /* Question 22 */
  .stripes div{
      width:20px;
      height:80px;
      display:inline-block;
  }
  .s1{
      background-color:orange;
  }
  .s2{
      background-color:black;
  }
  
  /* Add Your Code for Question 22 here */
  .stripes:hover > .s1 {
    background-color: black;
  }

  .stripes:hover > .s2 {
    background-color: orange;
  }
  
  
  
  
  
  
  
  /* END OF WORKSHEET */
  /* EXTRA STYLING — DON'T TOUCH */
  p{
      margin-top:30px;
  }
  .red-square{
      width:100px;
      height:100px;
      background-color:red;
  }
  .parent-move-1, .parent-move-2{
      position: relative;
      width:100%;
      height:100px;
      background-color:#f1f1f1;
  }
  .label{
      color:red;
      z-index:2;
      position:relative;
      width:100%;
      height:100%;
  }