body{
  font-family: 'Mali', cursive;
  position: absolute;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
  background-color: rgba(153,204,255, 0.8);
}

#Header{
  position: fixed;
  z-index: 100;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 5vh;
  font-size: 1.5em;
  color: white;
  display:flex;
  justify-content: center;
  align-items: center;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2e466e), color-stop(1, #415989));
	background:-moz-linear-gradient(top, #2e466e 5%, #415989 100%);
	background:-webkit-linear-gradient(top, #2e466e 5%, #415989 100%);
	background:-o-linear-gradient(top, #2e466e 5%, #415989 100%);
	background:-ms-linear-gradient(top, #2e466e 5%, #415989 100%);
	background:linear-gradient(to bottom, #2e466e 5%, #415989 100%);
  background-color:#2e466e;
  box-shadow: 0px 0px 15px 3px #23395e;
}

#Footer{
  position: fixed;
  margin: 0;
  padding: 0;
  bottom: 0;
  width: 100vw;
  height: 10vh;
  display:flex;
  justify-content: center;
  align-items: center;
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2e466e), color-stop(1, #415989));
	background:-moz-linear-gradient(top, #2e466e 5%, #415989 100%);
	background:-webkit-linear-gradient(top, #2e466e 5%, #415989 100%);
	background:-o-linear-gradient(top, #2e466e 5%, #415989 100%);
	background:-ms-linear-gradient(top, #2e466e 5%, #415989 100%);
	background:linear-gradient(to bottom, #2e466e 5%, #415989 100%);
  background-color:#2e466e;
  box-shadow: 0px 0px 15px 3px #23395e;
}

#Credits{
  position: absolute;
  margin: 0;
  padding: 1vh;
  right: 1vw;
  border-radius: 10px;
  max-height: 4vh;
  font-size: 0.8em;
  background-color: rgb(130,200,255);
  overflow: hidden;
}

#OreoContainer{
  position: absolute;
  margin: 0;
  padding: 0;
  top: 5vh;
  width: 100vw;
  height: 85vh;
  height: calc(var(--vh, 1vh) * 85);
  overflow: auto;
}

#OreoButton{
  position: relative;
  margin: 1vh;
  -moz-box-shadow:inset 0px 0px 15px 3px #23395e;
	-webkit-box-shadow:inset 0px 0px 15px 3px #23395e;
	box-shadow:inset 0px 0px 15px 3px #23395e;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2e466e), color-stop(1, #415989));
	background:-moz-linear-gradient(top, #2e466e 5%, #415989 100%);
	background:-webkit-linear-gradient(top, #2e466e 5%, #415989 100%);
	background:-o-linear-gradient(top, #2e466e 5%, #415989 100%);
	background:-ms-linear-gradient(top, #2e466e 5%, #415989 100%);
	background:linear-gradient(to bottom, #2e466e 5%, #415989 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2e466e', endColorstr='#415989',GradientType=0);
	background-color:#2e466e;
	-moz-border-radius:17px;
	-webkit-border-radius:17px;
	border-radius:17px;
	border:1px solid #1f2f47;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:6px 13px;
	text-shadow:0px 1px 0px #263666;
}

#OreoButton:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #415989), color-stop(1, #2e466e));
	background:-moz-linear-gradient(top, #415989 5%, #2e466e 100%);
	background:-webkit-linear-gradient(top, #415989 5%, #2e466e 100%);
	background:-o-linear-gradient(top, #415989 5%, #2e466e 100%);
	background:-ms-linear-gradient(top, #415989 5%, #2e466e 100%);
	background:linear-gradient(to bottom, #415989 5%, #2e466e 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#415989', endColorstr='#2e466e',GradientType=0);
	background-color:#415989;
}

#OreoNumber{
  position: relative;
  margin: auto;
  margin-top: 1vh;
  text-align: right;
}

#OreoDescription{
  margin-top: 2vh;
  margin-bottom: 2vh;
  background-color: white;
  box-shadow: 0 0 8px rgb(153,204,255);
  white-space: pre-wrap;      /* CSS3 */
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: -pre-wrap;     /* Opera <7 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  word-wrap: break-word;      /* IE */
}

#OreoImage{
  position: relative;
  margin: auto;
  margin-top: 1.5vh;
  margin-bottom: 1.5vh;
  margin-bottom: calc(var(--vh, 1vh) * 1.5);
  display: flex;
  width: 16vmax;
  min-height: 32vmax;
  justify-content:center;
  align-items: flex-end;
  background-color: rgb(153,204,255);
  border-radius: 10px;
  box-shadow: 0 0 8px rgb(153,204,255);
}

#OreoContainer::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}

#OreoContainer::-webkit-scrollbar
{
  width: 12px;
}

#OreoContainer::-webkit-scrollbar-thumb
{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  border-radius: 10px;
  background-color: #27141c;
}