Insert Custom Modal Code

I have Modal code I need to add to a WordPress website, all code will be provided.

A very easy job need to be completed today.

The code needed to add is this just unsure where to add it


<style>
.modal { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; }
.modal:target { visibility: visible; opacity: 1; }
.modal-content { margin: 25px auto; padding: 20px;; background: #fff; border-radius: 5px; width: 90%; position: relative; transition: all 5s ease-in-out; }
.modal-header h2 { margin-top: 0; color: #333; }
.modal-header .close { position: absolute; top: 20px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; }
.modal-header .close:hover { color: #06D85F; }
.modal-iframe-container { position: relative; overflow: hidden; padding-top: 56.25%; height:100%; width:100% }
.modal-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
</style>

<a class="button open-blossom-avenue-modal" href="#blossomAvenueModal">Open Blossom Avenue Configurator</a>

<div id="blossomAvenueModal" class="modal" aria-labelledby="blossomAvenueModalLabel">
<div class="modal-content">
<div class="modal-header">
<h2 id="blossomAvenueModalLabel">Blossom Avenue: Configurator</h2>
<a class="close" href="#" aria-label="Close Configurator Modal Window">×</a>
</div>
<div class="modal-iframe-container">
<iframe class="modal-iframe" src="https://configurator.blossomavenue.co.uk" id="blossomAvenueEmbed" name="blossomAvenueEmbed" title="Blossom Avenue Configurator Tool" width="600" height="800" frameborder="0" allow="fullscreen" loading="lazy"></iframe>
</div>
</div>
</div>