How can I fix a Content Security Policy blocking Javascript on my website?

[boogeyGod]

Attempting to run a simple script for when the user clicks on an image of a present, the present animates and text appears.

I've inserted the javascript code into theme.liquid, and I'm getting the following error:

Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).

Below is the code in my theme, as well as the custom liquid section on the page I'm displaying this in.

How do I resolve this issue?

Theme.liquid:

    <script>
function openPresent() {
  var present = document.querySelector('img');
  var text = document.querySelector('#hidden-text');
  present.classList.add('open');
  present.addEventListener('animationend', function() {
    text.classList.remove('hidden');
  });
}
    </script>

custom liquid section:

<img src="(imagelink)"  
class="image-style"
onclick="openPresent()">
<div id="hidden-text" class="hidden">Surprise!</div>

<style>
.image-style {
width: 200px;
}

.hidden {
  display: none;
}
img {
  transition: transform 1s;
}
img.open {
  transform: rotateY(180deg);
  animation: fadeOut 1s forwards;
}
.hidden-text {
  opacity: 0;
  animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
img.open {
  animation-duration: 2s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
img.open + .hidden-text {
  animation-duration: 2s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

</style>