Responsive Countdown aligning to background image

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.

(added this in edit) 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

here are the code html

<div class="bg">
<p id="countdown"> </p>
</div>

css

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

js

 // 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 < 0) {
    clearInterval(x);
    document.getElementById("countdown").innerHTML = "EXPIRED";
}
}, 1000);

I've created a codeine below.

CODEPEN

Might be a better way of doing this, but I've used percentages to get the right alignment and use em measurement for the font.

You can use multiple break points (1024px etc) to adjust the sizing to suit.

@media screen and (max-width: 768px) {
  .bg p {
    margin-top: 20%;
    font-size: 2em;
  }