title: Responsive Countdown aligning to background image
body: <p>I would like to seek help on how I could turn my countdown timer responsive. Where it would still align inside the notebook background image at the center everytime you scale the window size. I am not that familiar with media queries yet. Plus I find it tricky to align the two since the paper design is embedded on the background image.</p>
  
  <p><strong><em>(added this in edit)</em></strong> I forgot to ask and mention as well. in this code here it works fine ( almost). I just need to mention that I have other p{} declared on my css. So i wanna ask as well how i can specifically target the .bg p{} ? because it seems, the previous p{} in my css also affects the countdown im working on</p>
  
  <p>here are the code
  <strong>html</strong></p>
  
  <pre><code>&lt;div class="bg"&gt;
  &lt;p id="countdown"&gt; &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.bg {
      background-image: url('http://thefeministmegaphone.com/wp-content/uploads/2016/12/893146-notebook-wallpaper.jpg');
      background-size: 100%;
      background-repeat: no-repeat;
      position:fixed;
      width:100%;
      height:100%;
      left:0;
      top:0;
      text-align:center;
  }
  p#countdown {
      transform: rotate(-5deg);
      display:block;
      color: #333;
      font-size: 65px;
      font-family:times;
      margin: auto;
      width: 60%;
      padding: 10px;
      top:50%;
  }
  @media screen and (width: 800px) {
    .bg p {
      font-size: .8em;
    }
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code> // Set the date we're counting down to
  var countDownDate = new Date("Oct 14, 2017 10:00:00").getTime();
  
  // Update the count down every 1 second
  var x = setInterval(function() {
  
  // Get todays date and time
  var now = new Date().getTime();
  
  // Find the distance between now an the count down date
  var distance = countDownDate - now;
  
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
  
  // Output the result in an element with id="countdown"
  document.getElementById("countdown").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
  
  // If the count down is over, write some text 
  if (distance &lt; 0) {
      clearInterval(x);
      document.getElementById("countdown").innerHTML = "EXPIRED";
  }
  }, 1000);
  </code></pre>