@viewport {  
         orientation: landscape;  
      } 
  /* Webkit-scrollbar */
      /* width */
      ::-webkit-scrollbar {
        width: 20px;
      }

      /* Track */
      ::-webkit-scrollbar-track {
        background: black;
        box-shadow: inset 0 0 5px grey; 
        border-radius: 10px;
      }
       
      /* Handle */
      ::-webkit-scrollbar-thumb {
        background: #e6325e; 
        border-radius: 10px;
      }

      /* Handle on hover */
      ::-webkit-scrollbar-thumb:hover {
        background: #4b81c2; 
      }

      @import url("https://use.typekit.net/jmk3xov.css");

      html, body {

        /*cursor: url('cursor-hand.gif'), auto;*/
        orientation: landscape;
        overflow-x: hidden;
        background: #FFF url("../images/skybox/blue_space/skybox_back1.png");

        width: 100vw;
        height: 100vh;
        margin: 0;
        /*overflow: hidden;*/
      }

      #loading {
        /*display: flex;*/
        /*position: fixed;*/
        z-index: 100;
        width: 100%;
        height: 100%;
        background-color: rgba(192, 192, 192, 0.5);
        background-image: url("https://i.stack.imgur.com/MnyxU.gif");
        background-repeat: no-repeat;
        background-position: center;
      }

      canvas {
        position: fixed;
        top: 0;
        left: 0;
      }

      :root {
        --dark-bg: rgba(15, 15, 15, 0.95);
        --spacing: 350px;

        font-family: brandon-grotesque, sans-serif;
        font-weight: 400;
        font-style: normal;
      }

      main {
        /*display: none;*/
        width: 100vw;
        color: white;
        z-index: 99;
        position: absolute;
        width: 100%;
        margin: 0px auto;
        padding: 120px 0px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
      }

      h1, h2, h3, blockquote {
        font-family: elevon, sans-serif;
        font-weight: 700;
        font-style: normal;
      }

      header {
        background: var(--dark-bg);
        grid-column: 2 / span 5;
        font-size: 2.5rem;
        border-radius: 15px 50px 30px 5px;
        border: 2px solid #e6325e;
        padding: 20px;
        margin-bottom: var(--spacing);
        opacity: 0.75;
      }

      section {
        grid-column: 2 / 8;
        border-radius: 15px 50px 30px 5px;
        border: 2px solid #e6325e;
        padding: 20px;
        background: var(--dark-bg);
        font-size: 1.25rem;
        line-height: 1.5;
        margin-bottom: var(--spacing);
      }

      blockquote {
        margin: 0;
        border-radius: 15px 50px 30px 5px;
        border: 2px solid #e6325e;
        padding: 20px;
        grid-column: 2 / span 9;
        margin-bottom: var(--spacing);
        text-shadow: 0 1px 0 #ccc, 
           0 2px 0 #c9c9c9,
           0 3px 0 #bbb,
           0 4px 0 #b9b9b9,
           0 5px 0 #aaa,
           0 6px 1px rgba(0,0,0,.1),
           0 0 5px rgba(0,0,0,.1),
           0 1px 3px rgba(0,0,0,.3),
           0 3px 5px rgba(0,0,0,.2),
           0 5px 10px rgba(0,0,0,.25),
           0 10px 10px rgba(0,0,0,.2),
           0 20px 20px rgba(0,0,0,.15);
      }

      blockquote p {
        color: #4b81c2;
        
        font-size: 4rem;
        display: inline;
        line-height: 1;
      }




td 
{
    text-align: center; 
    vertical-align: middle;
}






      .left {
        grid-column: 6 / 12;
      }

      #quoted_by {
        color: #4bffc2;
        
        font-size: 4rem;
        text-align: right;      
      }

      #myBtn {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 30px;
        z-index: 100;
        font-size: 18px;
        border: none;
        outline: none;
        background-color: #4b81c2;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
      }

      #myBtn:hover {
        background-color: #e6325e;;
      }