* {
        /* to remove the top and left whitespace */
        margin: 5;
        padding: 5;
    }
    img{
      display: inline-block;
      border-radius: 5vh;

        }
    html,body {
        /* just to be sure these are full screen*/
        width: 100%;
        height: 100%;
        background-color: rgb(0, 0, 0);
        color: rgb(198, 255, 177);

    }
    h1{
      display: inline-block;
      vertical-align: top;
      margin: 2vw;

      color: rgb(255, 255, 255);
    }

    canvas {
        /* To remove the scrollbars */
        height: 95%;
        width: 100vw;
        background-color: rgb(0, 0, 0);
        display: block;
    }

    #container-left {
        padding: 25px;
        bottom: 0;
        left: 0;
        position: relative;
        height: 5%;
        float: left;
        font-size: 2vh;
        font-family: open_dyslexic;
        background-color: rgb(0, 0, 0);
        color: #ffffff;
    }

    #url {
        position: fixed;
        bottom: 15px;
        left: 15px;
        width: 100%;
        font-size: 2vh;
    }

    #container-right {
        padding: 25px;
        bottom: 0;
        left: 0;
        position: relative;
        height: 5%;
        float: right;
        background-color: rgb(0, 0, 0);
        font-size: 2vh;
        font-family: open_dyslexic;
        color: #ffffff;
    }

    div.pair {
        float: left;
        text-align: center;
    }

    .button {
        padding: 3vh;
        background-color: rgb(0, 0, 0);
        color: rgb(99, 145, 80);
        border: 2px solid #ff5100;
        border-radius: 5px;
        -webkit-transition-duration: 0.4s;
        /* Safari */
        transition-duration: 0.4s;
        font-family: open_dyslexic;
        padding-top: 0.75vh;
        padding-bottom: 0.75vh;
        padding-left: 0.75vw;
        padding-right: 0.75vw;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 2.5vh;
        margin: 4px 2px;
        color: #ffffff;
    }

    .button:hover {
        border-radius: 5px;
        background-color: #a63737;
        color: white;
    }

    .label {
        font-size: 2vh;
        pointer-events: none;
        font-family: open_dyslexic;
        color: rgb(198, 255, 177);

    }

    .slidecontainer {
      padding: 0.2em;
        width: 20vw;
        /* Width of the outside container */
    }

    /* The slider itself */
    .slider {

        -webkit-appearance: none;
        /* Override default CSS styles */
        appearance: none;
        width: 20vw;
        /* Full-width */
        height: 1vh;
        /* Specified height */
        background: #fff1e2;
        /* Grey background */
        outline: none;
        /* Remove outline */
        opacity: 0.8;
        /* Set transparency (for mouse-over effects on hover) */
        -webkit-transition: .2s;
        /* 0.2 seconds transition on hover */
        transition: opacity .2s;
    }

    /* Mouse-over effects */
    .slider:hover {
        opacity: 1;
        /* Fully shown on mouse-over */
    }

    /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        /* Override default look */
        appearance: none;
        width: 1.5vw;
        /* Set a specific slider handle width */
        height: 2.5vh;
        /* Slider handle height */
        background: #e64500;
        /* Green background */
        cursor: pointer;
        /* Cursor on hover */
    }

    .slider::-moz-range-thumb {

        width: 2.5vw;
        /* Set a specific slider handle width */
        height: 2.5vh;
        /* Slider handle height */
        background: #aa3904;
        /* Green background */
        cursor: pointer;
        /* Cursor on hover */
    }
    @font-face {
    font-family: open_dyslexic;
    src: url("open_dyslexic/OpenDyslexic-Regular.otf") format("opentype");
}

@font-face {
    font-family: open_dyslexic;
    font-weight: bold;
    src: url("open_dyslexic/OpenDyslexic-Bold.otf") format("opentype");
}
.switch {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 34px;
}


 .slide {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(156, 28, 28);
  -webkit-transition: .4s;
  transition: .4s;
  display:flex;
  align-items: center;
  justify-content: space-between;
}

.slide:before {
  position: absolute;
  content: "";
  height: 36px;
  width: 60px;
  left:0px;
  bottom: -1px;
  top: -1px;
  background-color: rgb(255, 255, 255);
  -webkit-transition: .4s;
  transition: .4s;
}


.slide:after {
  content:'Optimize';
  font-size: 1.75vh;

  position:relative;
  padding:10px;
  padding-left:4.5vw;
}

input:checked + .slide:after {
  content: 'Natural';
  font-size: 1.75vh;
  padding-left:1vw;
}

input:checked + .slide {
  background-color: #2c6390;
}


input:focus + .slide {
  box-shadow: 0 0 1px #2c6390;
}

input:checked + .slide:before {
  -webkit-transform: translateX(120px);
  -ms-transform: translateX(120px);
  transform: translateX(120px);
} 
#header a.navbar {
  font-family: open_dyslexic;
  font-size: 2vh;
  color:#ffffff;
	-ms-transition: transform 0.2s cubic-bezier(0.29, 0.02, 0.59, 0.87);
	-webkit-transition: transform 0.2s cubic-bezier(0.29, 0.02, 0.59, 0.87);
	transition: transform 0.2s cubic-bezier(0.29, 0.02, 0.59, 0.87);
	position: relative;
	display: inline-block;
	padding: 5px;
	margin: 0px 60px 0px;

	-webkit-transform: scale(1);
    
	-webkit-transition: transform  .75s;
	-webkit-transition-timing-function: cubic-bezier(0.51, 0.51, 0.5, 0.53);
	
	-moz-transform: scale(1);
	-moz-transition: transform  .75s;
	-moz-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1);

	-o-transform: scale(1);
	-o-transition: transform  .75s;
	-o-transition-timing-function: cubic-bezier(1, 0.8, 0.5, 1);


}


#header a.navbar:hover {
	-webkit-transition: padding 0.2s, top 0.2s;


	-webkit-transform: scale(1.2);
	-moz-transition: padding 0.2s, top 0.2s;


	-moz-transform: scale(1.2);
	-o-transition: padding 0.2s, top 0.2s;


	-o-transform: scale(1.2);

}
#header a.navbar:before {

	content: "";
	height: 5%;
	width: 100%;
	background: rgba(255, 255, 255, 0);
	position: absolute;
	bottom: 0;
	left: 0;
	display: inline;
	-webkit-transition: height 0.25s ease-out;
	-moz-transition: height 0.25s ease-out;
	-ms-transition: height 0.25s ease-out;
	-o-transition: height 0.25s ease-out;
	transition: height 0.25s ease-out;
    	border-radius: 0.5em;


	z-index: -1;

}

#header a.navbar:after {
	content: "";
	height: 0%;
	width: 100%;
	background: rgb(213, 150, 88);
	position: absolute;
	bottom: 0;
	left: 0;
	display: inline;
	-webkit-transition: all 0.375s cubic-bezier(0.37, -0.45, 0.34, 1.24);
	-moz-transition: all 0.375s cubic-bezier(0.37, -0.45, 0.34, 1.24);
	-ms-transition: all 0.375s cubic-bezier(0.37, -0.45, 0.34, 1.24);
	-o-transition: all 0.375s cubic-bezier(0.37, -0.45, 0.34, 1.24);
	transition: all 0.375s cubic-bezier(0.37, -0.45, 0.34, 1.24);
    	border-radius: 0.5em;

	z-index: -1;

}

#header a.navbar:hover:before {

	background: rgb(213, 150, 88,1);
	border-radius: 0.5em;
	height: 100%;
    
}
#header a.navbar:hover:after {
        transition-delay: 0.175s;
    	border-radius: 0.5em;
	background: rgba(255, 255, 255, 0);
	height: 100%;
    bottom: 0;
    
}
#header a.img-button {
	-ms-transition: transform .15s cubic-bezier(0.29, 0.02, 0.59, 0.87);
	-webkit-transition: transform .15s cubic-bezier(0.29, 0.02, 0.59, 0.87);
	transition: transform .15s cubic-bezier(0.29, 0.02, 0.59, 0.87);
	position: relative;
	display: inline-block;
	padding: 5px;
	margin: 0px 50px 0px;

}

#header a.img-button:hover {
	-ms-transform: scale(1.15);
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}
* {box-sizing: border-box;}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*set the size of the lens:*/
  width: 40px;
  height: 40px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*set the size of the result div:*/
  width: 300px;
  height: 300px;
}