html, body {
    background-color: #000000;
        overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            touch-action: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            outline: none;
}

#renderCanvas {
    width: 100%;
        height: 100%;
        touch-action: none;
}


/* CSS for the overlay elements (form, video) */

.overlay {
    position: absolute;
    width: 100%;
    /* Adjust position as needed */
    /* Adjust position as needed */
    z-index: 1;
    /* Make sure it's above the canvas */
    /* Slight transparency */
    opacity: 1;
    padding: 0px;
    border-radius: 0px;
}

.nav{
display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    
/* position: absolute; */
}

a {
float: right;
padding: 1%;
}

button{ 
width: 100px;
}


.logo {
    height: 80px;
    position: fixed;
    float: left;
    width: auto;    
  }






  @media (min-width:320px) {
      /* smartphones, iPhone, portrait 480x320 phones */
    .overlay {
        position: absolute;
        width: 100%;
        z-index: 1;

        opacity: 1;
        padding: 0px;
        border-radius: 0px;
    }

    .nav {
        display: block;
        margin-left: auto;
        margin-right: auto;
        float: right;
        width: 50%;
        padding: 1%;
    }

    a {
        float: right;
    }

    button {
        width: 40px;
    }


    .logo {
        height: 120px;
        padding: 2%;
        width: auto;
    }
  }

  @media (min-width:481px) {
      /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
     
        }  

  @media (min-width:641px) {
      /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
  }

  @media (min-width:961px) {
      /* tablet, landscape iPad, lo-res laptops ands desktops */
  }

  @media (min-width:1025px) {
      /* big landscape tablets, laptops, and desktops */
  }

  @media (min-width:1281px) {
      /* hi-res laptops and desktops */
  }