Can't style Fancybox modal

I'm having problems styling a modal I've set to open with fancy box. The content for the modal/div shows up after clicking with no issues but it seems all the styling I applied to that modal div refuses to show up.

.hidden{
display:none;
}

.red{
background: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>modal</title>
  
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
</head>
  
  
<body>
  <div>
     <a data-fancybox data-src="#open" href="javascript:;">Open modal  box</a>
  </div>
  
  <div class="hidden">
     <div class="red" id="open">
          <h2>Hello</h2>
          <p>You are awesome.</p>
       </div>
   </div>
  
</body>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
</html>

Here is my setup on Codepen

Solution

If your common selectors can't able to apply styles then try to select elements more specifically.

IDs are Higher specific because they are unique.

Class names are specific too but they are used in other stylesheets also

Tag names are not most specific because they can found anywhere in page

And * selector has lowest specificity in css

div.red{background: red;} // Selects divs that have 'red' classname

.hidden{
display:none;
}

div.red{
background: red;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>modal</title>
  
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
</head>
  
  
<body>
  <div>
     <a data-fancybox data-src="#open" href="javascript:;">Open modal  box</a>
  </div>
  
  <div class="hidden">
     <div class="red" id="open">
          <h2>Hello</h2>
          <p>You are awesome.</p>
       </div>
   </div>
  
</body>
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
</html>