<!-- <h1>Challenge 2: Finished</h1> -->
<div class="wrapper">
  <div class="graph">
  <div class="box red"></div>
  <div class="box blue"></div>
    <div class="green"></div>
</div>
  <div class="instructions">

    <h2>Instructions</h2>
      
    Make these changes to your Challenge 2 file:  
    <ul>
      
      <li>have the red and blue elements bounce off each other when they meet</li>
      <li>during the last second of vertical movement, spin red and blue 360 degrees with a slight overshoot</li>
      
    </ul>
    
    
    
    
  </div> 
</div>

<!-- <h2>All challenges start with:</h2>
  <ul>
    <li>a div with class of .graph (400x350 grid of 50x50 tiles)</li>
    <li>a div with class of .red positioned at x:150, y:150</li>
    <li>a div with class of .blue positioned at x:200, y:150</li>
    <li>a div with class of .green which may be needed later</li>
</ul>
   -->

body {
  font-family:sans-serif;
  font-size:22px;
}

.wrapper {
  
  display:flex;
  flex-wrap:wrap;
}
.instructions{
  padding:20px;
  width:800px;
}

li{
  margin:10px;
}


.graph{
  position:relative;
  width:400px;
  height:350px;
  background-color:#ccc;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size: 50px 50px, 50px 50px;
background-position:-2px -2px, -2px -2px;
}

.box {
  width:48px;
  height:48px;
  position:absolute;
}

.red {
  background:red;
  transform:translate(150px, 150px);
}

.blue {
  background:blue;
  transform:translate(200px, 150px);
}

.green {
  width:398px;
  height:10px;
  position:absolute;
  background:green;
  bottom:-10px;
}