@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 html {
  // your css to create a cover image 
  padding: env(safe-area-inset); // <- this is the missing piece. Add it.
}
 body{
  background-color: #e8e8e8;
  color: #000;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  user-select: none;
  width: 100%;
  height: 100vw;
  cursor: none;
}

canvas{
height:100dvh !important;	
}
	
h1{
	font-family: 'Roboto', sans-serif;
  color: #fff;
  font-size: 70px;
  font-weight: bold;
  text-align: center;
  margin-top: 2vw;
}
a{
	color:#fff;
}

.wrapper{
    width:100%;
}

.container{
    margin-left: auto;
    margin-right: auto;
}

.box{
    border: #09f solid 1px;
    display: inline-block;;
    color:black;
    width:6vw;
    height:6vw;
    margin: 0.5vw;
    text-align: center;
    font-size:5vw;
    background-color: #09f; 
    transition:  background-color 1s ease-in-out;
}

@media only screen and (max-width: 768px) {

    .box{
        width:12vw;
        height:12vw;
        font-size:3em;
    }

}


.selected{
    background-color: magenta;
}
.dg.ac{
	display: none;
}
#pngCanvas, #png10Canvas{
	display:none;
	position:fixed;
	left:50%;
}
#webgazerVideoContainer{
	left:50% !important;
}
#reactiondiffusion {
  display: block;
  width:100vw;
  height:100vh;
}


#light {
  display: none;
 
}
.hometitle, .abouttext, .blobtext{
	background-color:#000;
	border-radius:20px;
}
.hometitle{
	
	position: fixed;
  top: 10vw;
  left: calc(50% - 20vw);
  width: 40vw;
  height: 15vw;
  background-repeat: no-repeat;
  background-size: contain;
    
}

.abouttext{
	
position: fixed;
  top: 10vw;
  left: calc(50% - 30vw);
  width: 60vw;
  background-image: url("../images/about-back.png");
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: right bottom;
}
.aboutp{
	font-family: 'Roboto', sans-serif;
		color:#fff;
		font-size:20px;
		  margin: 50px;
}

.blobtext{
	
	position:fixed;
	top:10vw;
	left:calc(50% - 20vw);
	width:40vw;
  background-repeat:no-repeat;
  background-size:contain;
    height: 15vw;
}
.blobp{
	font-family: 'Roboto', sans-serif;
		color:#fff;
		font-size:20px;
		  margin: 50px;
}

.home, .about, .interact, .calibrateproteus, .loadingproteus, .start{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, 0.15);
}
.home{
  background-repeat:no-repeat;
  background-size:contain;
}
.about{
  background-repeat:no-repeat;
  background-size:contain;
}
.interact{
  background-repeat:no-repeat;
  background-size:contain;
}

.calibrateproteus{
  background-repeat:no-repeat;
  background-size:contain;
  display:none;
}
.loadingproteus{
  background-repeat:no-repeat;
  background-size:contain;
}

.start{
  background-repeat:no-repeat;
  background-size:auto;
  background-position:center;
}
.about, .interact{
	display:none;
}
.over{
	position:fixed;
	top:0px;
	left:0px;
	width:calc(100% - 200px);
	height:calc(100% - 200px);
	border: 100px solid;
	border-image-source:
    radial-gradient(closest-side, rgba(0, 0, 0, 0) 70%, rgb(0, 0, 0) 70%);
	border-image-slice: 49%;
}

.button{
	position:absolute;
	cursor:pointer;
	    
		text-align:center;
		 width: 12vw;
  height: 5vw;
  vertical-align: middle;
		      background-position: center; 
}
.buttp{
	font-family: 'Roboto', sans-serif;
		color:#fff;
		font-size:30px;
	  margin-top: 1.5vw;
}
.babout{
	bottom: 10%;
  left: 12%;
 
  background-repeat:no-repeat;
  background-size:contain;
}
.binteract{
	bottom: 10%;
  right: 12%;
  background-repeat:no-repeat;
  background-size:contain;
}
.bback{
	bottom: 10%;
  left: 10%;
  width: 5vw;
  height:5vw;
  background-color:#000;
  border-radius:20px;
}
.bagree{
	bottom: 10%;
  left: 20%;
  background-repeat:no-repeat;
  background-size:contain;
}
.bdagree{
	bottom: 10%;
  right: 20%;
  background-repeat:no-repeat;
  background-size:contain;
}

.dot {
	 height:2vw;
	 width:2vw;
  min-height: 25px;
  min-width: 25px;
  background-color: #FF0000;
  border-radius: 50%;
  position:fixed;
} 
.dottl{
	top:10px;
	left:10px;
	z-index:999;
}
.dottr{
	top:10px;
	right:10px;
}
.dotbl{
	bottom:10px;
	left:10px;
}
.dotbr{
	bottom:10px;
	right:10px;
}
@media only screen and (max-width: 1200px) {
h1{
	font-size:20px;
}
    .aboutp{
		font-size:12px;
}
.buttp{
		font-size:15px;
}
.blobp{

		font-size:12px;
		  margin: 3vw 3vw;
}

}