body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow-x: hidden;
  position: relative;
  -webkit-overflow-scrolling: auto !important;
  background-color: #f8f9fa;
  font-family:'Arial', monospace;
  font-size: 32px;
}

  iframe {
    height: 100vh !important;
    border: none;
    width: 84%;
    margin-left: 120px;
}

  .nav {
    position: fixed;
    z-index: 100 !important;
    left: 18px;
    top: 10px;
    width: 120px;
    position: fixed;
    bottom: 0;
  }

select{
	font-size:30px;
	left: 20px;
  top: 20px;
	font-family: sans-serif;
  position: fixed;
	z-index: 100;
	cursor: pointer;
}


/* Small window ----------- */
@media only screen and (max-width : 920px) and (min-width: 640px) {
select{
 left: 10px

}

    .title {
     left: 10px
    }
}


/* Tablet (portrait) ----------- */
@media only screen and (max-width : 650px) {
select{
	font-size:30px;
	left: 50%;
	transform: translateX(-50%);
	top: 20px;
	position: absolute;
	z-index: 100;
}


}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 400px) {
select{
	font-size:30px;
	left: 50%;
	transform: translateX(-50%);
	top: 20px;
	position: absolute;
	z-index: 100;
}


iframe {
	margin: 0;
	padding: 0;
	border: none;
	width: 100vw;
	height: 100vh;
	/*transform: translateZ(-10px);*/
    opacity: .5;
	transition:500ms;
}
}