@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Orbitron:wght@600;700&&display=swap');

     /* The side navigation menu */
     .sidenav {
       height: 100%;
       /* 100% Full-height */
       width: 0;
       /* 0 width - change this with JavaScript */
       position: fixed;
       /* Stay in place */
       z-index: 1;
       /* Stay on top */
       top: 0;
       left: 0;
       background-color: #111;
       /* Black*/
       overflow-x: hidden;
       /* Disable horizontal scroll */
       padding-top: 60px;
       /* Place content 60px from the top */
       transition: 0.5s;
       /* 0.5 second transition effect to slide in the sidenav */
     }

     /* The navigation menu links */
     .sidenav a {
       padding: 8px 8px 8px 32px;
       text-decoration: none;
       font-size: 25px;
       color: #818181;
       display: block;
       transition: 0.3s;
     }

     /* When you mouse over the navigation links, change their color */
     .sidenav a:hover {
       color: #f1f1f1;
     }

     /* Position and style the close button (top right corner) */
     .sidenav .closebtn {
       position: absolute;
       top: 0;
       right: 25px;
       font-size: 36px;
       margin-left: 50px;
     }

     body {
       background-color: rgb(227, 239, 239);
     }

     /* Style page content - use this if you want to push the page content to the right when you open the side navigation */
     #main {
       /* background-image: url("carto.jpg"); */
       transition: margin-left .5s;
       padding: 20px;
     }

     /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
     @media screen and (max-height: 450px) {
       .sidenav {
         padding-top: 15px;
       }

       .sidenav a {
         font-size: 18px;
       }
     }

     .text-st {
       font-family: 'Architects Daughter', cursive;
       font-weight: bolder;
       font-size: xx-large;
       text-decoration: overline underline;
       color: white;
     }

     .text-wh {
       font-family: 'Architects Daughter', cursive;
       font-weight: bolder;
       font-size: x-large;
       text-decoration: overline underline;
       color: rgb(216, 216, 241);
     }

     .text-bl {
       font-family: 'Orbitron', sans-serif;
       font-weight: bolder;
       font-size: x-large;

       color: rgb(236, 244, 234);
     }

     .typing-demo {
       width: 22ch;
       animation: typing 2s steps(22), blink .5s step-end infinite alternate;
       white-space: nowrap;
       overflow: hidden;
       border-right: 3px solid;
       font-family: 'Architects Daughter', cursive;
       font-size: 2.1em;
     }


     @keyframes typing {
       from {
         width: 0
       }
     }

     @keyframes blink {
       50% {
         border-color: transparent
       }
     }

     .audio {
       float: inline-end;
     }

     /* iPads (portrait) ----------- */
     @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
       .scene {
         width: 98%;
         height: 98%;
         margin: 5%;
       }