/* Question 1 */
.red-circle{
    width:100px;
    height:100px;
    border-radius:50%;
    background-color:red;
    transition: background-color 0.3s ease;
  }
  
  /* Add Your Code for Question 1 here */
  .red-circle:hover {
    background-color: rgb(255, 0, 230);
  }
  
  
  
  /* Question 2 */
  .hover-b-r{
      background-color:blue;
      width:250px;
      height:100px;
      transition: border-radius 0.5s ease;
}
  
  
  /* Add Your Code for Question 2 here */
  .hover-b-r:hover {
    border-radius: 30px;
  }
  
  
  /* Question 3 */
  .hover-tr{
      font-family:sans-serif;
      letter-spacing:-0.1px;
      transition: letter-spacing 0.7s ease;
  }
  
  /* Add Your Code for Question 3 here */
  .hover-tr:hover {
    letter-spacing: 5px;
  }
  
  
  /* 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;
      transition: top 0.9s ease;
  }
  
  .hover-move-up:hover {
    top: -5px; 
  }
  
  /* Questions 5 & 6 */
  #hover-move, #hover-move-2{
      position:relative;
      left:0px;
      transition: left 1.1s ease-in-out;
  }
  
  #hover-move-2{
    position:relative;
    left:0px;
    transition: left 1.3s ease-in-out;
}
  /* Add Your Code for Question 5 here */
  #hover-move:hover {
    left: 30px;
  }
  
  
  /* Add Your Code for Question 6 here */
#hover-move-2 {
  transition: transform 0.4s ease;
}
  #hover-move-2:hover {
    transform: translateX(calc(100vw - 100px));
    
  }
  
  
  /* Question 7 */
  .hover-blur{
      width:400px;
      transition: filter 1.5s ease;
  }
  
  /* Add Your Code for Question 7 here */
  .hover-blur:hover {
    filter: blur(4px);
  }
  
  /* Question 8 */
  .hover-cursor{
      background-color:yellow;
      width:500px;
      padding:20px;
      text-align:center;
      transition: background-color 1.7s ease;
  }
  
  /* Add Your Code for Question 8 here */
  .hover-cursor:hover {
    cursor: progress; 
  }
  
  /* 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 {
    font-family: sans-serif;
    color: red;
  }
  
  
  /* Question 13 */
  .parent-presence div{
    background: red;
    margin: 5px;
    width: 12px;
    height: 12px;
  }
  
  
  /* 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: 1;
  }
  
  /* 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-2:hover .red-square {
    transform: translateX(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(360deg);
    transition: transform 1.0s;
  }
  
  
  /* Question 19 */
  .parent-ta-da{
      background-color:grey;
      border-radius:50%;
      padding:50px;
      width:10px;
      height:10px;
  }
  .ta-da{
      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 */
  .ta-da {
    position: fixed;
    bottom: 0;
    right: 0;
  }
  
  .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 */

.before-hover {
    display: block;
  }
  
  .on-hover {
    display: none;
  }
  
  .parent-text-change:hover .before-hover {
    display: none;
  }
  
  .parent-text-change:hover .on-hover {
    display: block;
  }
  
  
  /* Question 21 */
  .tonguetwister{
      font-size:20px;
  }
  
  /* Add Your Code for Question 21 here */
  
.tonguetwister:hover span {
    visibility: hidden;
  }
  

  
  
  /* 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 .s1 {
    background-color: orange;
  }
  
  .stripes .s2 {
    background-color: black;
  }
  

  .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%;
  }