mobile_style.css

body {
   
    background-color: #817F80;

    overflow-y: hidden;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
  }

  ::-webkit-scrollbar {
    width: 6px;
  /*  color: darkgray; */
  }
  
  ::-webkit-scrollbar-track {
    /*
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px; */
  
   /* background: #ffff00; */
   background: blue;
   border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
    background: darkgray;
  
    background: #dbe219;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #dbe219; 
  }

/* on landing page */
#main_title {

    width: 45%;
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto;
    cursor: pointer;
}

@font-face {
    font-family: dseg_modern_mini_italic; 
    src: url(dseg_modern_mini_italic.ttf)
} 

#space_between_eyes {

    background-color: transparent;
    width: 10px;
    visibility: hidden;
}

.face {
    width: 90px; 
    position: fixed;
    bottom: 3px;
    right: 150px; 
  }
  .eye {

   position: relative;  
   display: inline-block;
    border-radius: 50%;
    height: 30px;
    width: 30px;    
    background: #CCC; 
  }
  .eye:after { /*pupil*/
    position: absolute;
    bottom: 17px;
    right: 10px;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
    content: " ";
  }

#clock {
  font-size: 20px;  /* was 16px */
  font-family: dseg_modern_mini_italic;
  background-color: black;
  border: 2pt solid #ff0000;
  color: #ff0000;
 
  /*
  box-shadow: inset 0 0 30px rgb(15, 58, 250); 
 */
  padding: 2px;
   position: fixed ; 
  bottom: -12px;
   right: 30px;
}

#sliding_camera {

    position: absolute ;
    left: 0px ; 
    width: 70px ;
    transform: rotate(-25deg) translateX(-15px); 
}

#menu {

    padding-top: 5px;
    margin-bottom: 10px;
    /*
    display: flex;
   flex-direction: column;
 justify-content: space-evenly; */
}

.menu_button {

     transition-duration: 0.4s;
    background-color: transparent;
    cursor: pointer;
    
    /*
    text-align: center;
*/
    border: 2px solid blue;
    border-radius: 9px;
    
    font-size: 13px;
    
    padding: 5px 32px;
    
     color: blue;

     margin-right: 5px;
    
    margin-bottom: 5px;

    width: max-content;
}
.menu_button:focus {
    outline: 0; 
}
 .menu_button:hover {
  color: #dbe219 ;
  border-color: #dbe219;
  background-color: blue;
 }

 .menu_button[name="current_menu_button"] {
  background-color: #dbe219 ;
    color: blue;
 } 



 /*
.essay_page {

    background-color: orchid;

} */

.essay_area {
  /*  display: flex; */
  /* justify-content: space-around;*/

   /* z-index: 5 ; */

   /*
   padding-right: 20px;
   padding-left: 20px;  */
}

.essay_title {
   /*  width: 450px; */
   max-width: 35%;
    height: auto;
  float: left; 
  padding: 15px;

  display: none;
}

.essay_box {  

  /*
  background-color: rgba(255, 255, 255, 0.5); 
  box-shadow: inset 0 0 500px  white; */
  
  /*
  background-image: url("images/white_background.jpg");  
  backdrop-filter: blur(1px) opacity(0.5);
*/
 /*
  filter: blur(1px);
  -webkit-filter: blur(1px);
  */
  /*
  backdrop-filter: blur(7px); */

  -webkit-backdrop-filter: blur(10px) ;
  backdrop-filter: blur(10px);
  
/*
  border: 1pt solid; */
  border-color: lightgray;
  border-radius: 9px;
   
  width: 96%; /* was 60% */
   
height: 510px;

/* float: right; */

padding-top: 20px; 
padding-bottom: 10px;

margin-top: 20px;   
margin-right: 15px; 

outline-style: none;
outline: 0;

margin: auto    ;

}

.essay_text {
   
    width: 90%;
    height: 100%;    

    overflow: scroll;
    overflow-x: hidden;

    background-color: transparent ;
    color: black;
    font-size: 16px;
    font-family: 'Helvetica Neue', 'Helvetica' , 'Times new Roman', Arial,sans-serif;
    font-style: normal;
    line-height: 1.6;

     text-align: justify;

    padding-left: 15px;
    padding-right: 15px;

    margin-left: auto;
    margin-right: auto;

    z-index: 2;
}
.essay_references {

    color: white;

    padding-top: 10px;
    padding-left: 25px;

    text-align: left;

}

#rob_lucas {
    text-align: end;
  }


   
 #p5_canvas_container {
   
  /*  background-color: orchid;*/
 /*
  position: absolute;
    z-index: -4; */
 
    display: none;
  }

  #moles_video {

    display: none;
    /*
    position: absolute;
    left: 0;
    top: 0;
      z-index: -3; */
  }
  
  #introduction_background_image{

   display: none;
   
   /*
    position: absolute;
    left: 10px; 
    bottom: 0; 
    width: 34%;
  
    z-index: -2; */
  }
  
  #working_video {
  
    display: none;
    /*
    position: absolute; 
    left: 0;
    margin-left: 25%;
    z-index: -3 ;
    opacity: 0.5; */
  
  }
  
  #connection_loading { 

    display: none;
    /*
    position: absolute;
    left: 0;
    top:0; 
    width: 100%;
    z-index: 10; */
   
  }
  
  #webcam_video {

    display: none;
    /*
    position: absolute;
    left: 0; 
    top: 0; 
    width: 100%;
    z-index: -3; */
  }
  
  #neoliberal_gradient {
    position: absolute;
    left: 0; 
    top: 0; 
    width: 100%;
    height: 100%;
    z-index: -5;
    opacity: 0.8;
  }

  #overlay {
    position: fixed; /* Sit on top of the page content */
   /* display: none; */
    /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(100,100,200,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
  }

  #overlay_message {
  
  color: blue;
  background-color:#dbe219 ;
  padding: 10px;
  border-radius: 10px;
  border-color: blue;
  border: 2px solid blue;

  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  }