@import 'https://fonts.googleapis.com/css?family=Prompt:400,700';

    .takeover-modal {
      /* This way it could be display flex or grid or whatever also. */
      display: block;
      
      /* Probably need media queries here */
      width: 800px;
      max-width: 100%;
      
      height: 420px;
      max-height: 100%;
      
      position: fixed;
      
      z-index: 100;
      
      left: 50%;
      top: 50%;
      
      /* Use this for centering if unknown width/height */
      transform: translate(-50%, -50%);
      
      /* If known, negative margins are probably better (less chance of blurry text). */
      /* margin: -200px 0 0 -200px; */
      
      background: white;
      box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.9);

      font-family: 'Prompt', sans-serif;
    }

    .takeover-modal * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
    
      .takeover-modal ul {
        margin: 10px 0 10px 30px;
      }
      .takeover-modal li, .takeover-modal p {
        margin: 0 0 10px 0;
        font-size:medium;
      }
      .takeover-modal h1 {
        margin: 0 0 20px 0;
      }

    .takeover-closed {
      display: none;
    }
    
    .takeover-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 50;
      
      background: rgba(0, 0, 0, 0.6);
    }
    .takeover-modal-guts {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      padding: 20px 50px 20px 20px;
    }
    
    
    .takeover-modal .takeover-close-button {
      position: absolute;
      cursor:pointer;
      
      /* don't need to go crazy with z-index here, just sits over .modal-guts */
      z-index: 1;
      
      top: 20px;
      
      /* needs to look OK with or without scrollbar */
      right: 20px;
      
      border: 0;
      background: black;
      color: white;
      padding: 5px 10px;
      font-size: 1.3rem;
    }
    
    .takeover-modal .takeover-link {
      background-color: #CC0000;
      color: white;
      padding: .5em .75em;
      text-decoration: none;    
      font-size:medium;
    }
    
    .takeover-modal .takeover-link:hover {
      background-color: #555;
    }
    
    .takeover-modal .takeover-link:active {
      background-color: black;
    }
    
    .takeover-left {
      float:left;
      width:50%;
    }
    
    .takeover-right {
      float:right;
      width:50%;  
    }
    .takeover-left .content {
        padding-right:20px;
    }
        
    @media screen and (max-width: 600px) {
      .takeover-left {
        width:200px;
        float:left;
        
      }
      .takeover-right{
        width:100%;
      }
    }