#navbar {
  top: 0;
  display: flex;
  position: fixed;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  height: 5em;
  background: #AB886D; /*#FF6600;     Top bar*/
  z-index: 10;
}
.active{
  background-color:	#493628;/*#FF5000;    Top bar active*/
}
body,html {
  margin: 0;
  font: bold 14px/1.4 'Open Sans', arial, sans-serif;
  background:  #D6C0B3        /*#ABE1FD;    Background left and right on most pages*/
}
#bread {
  position: absolute;

  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5em;
  padding-bottom: 3em;
  background: #E4E0E1;
  overflow: hidden;
}



/*
#1: 9F5255, 7C444F, E16A54, F39E60
#2: 03A6A1, FFA673, FFE3BB, FF4F0F
#3: 9ECAD6, 748DAE, F5CBCB, FFEAEA
#4: AB886D, 493628, D6C0B3, E4E0E1
*/





#top {
  margin-top: 5%;
}
#top_lower {
  margin-top: 8%;
}
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}
b {
  -webkit-text-stroke: 1px rgb(100, 100, 100);
}
a {
  text-decoration: none;
  color: black;
}
a:hover{
  color: white;
}
.normal_list{
  text-align: left;
}
.column2 {
  column-count: 2;
  width: 80%;
}
.text {
  font-family: Courier New;
  font-weight: bold;
  color: black;
  display: block;
  break-inside: avoid-column;
  text-align: left;
}
.text a{
  cursor: pointer;
}
.text p {
  width: 50%;
  margin-left: 25%;
}
.text .command {
  width: 100%;
  margin-left: 0;
  font-weight: bold;
  font-family: courier;
  font-size: 18px;
  margin-block-start: 1.3em;
  margin-block-end: 1.3em;
}
.active a {
  color: #000;
}
.link_box{
  position: relative;
  padding: 0 2%;
  height: 100%;
  width: 9em;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-evenly !important;
}
/*
.logo img {
  background: url("../images/white_logo.png") no-repeat;
  background-size: 55%;
  background-position: center;
  width: 8%;
  height: 100%;
  padding-left:2em;
  padding-right:2em;
}
*/
.link_box a{
  text-transform: uppercase;
  letter-spacing: 0.15em;
  width: 100%;
  font: bold 130% 'Open Sans', arial, sans-serif;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.links{
  display: flex;
  width: 100%;
}
.links:not(:first-child) .link_box a:hover {
  color: black;
}
.links:not(:first-child) .active a:hover {
  color: #AB886D;
}
.links:not(:first-child) .link_box a:after{
  bottom: 0;
  content: "";
  height: 3px;
  position: absolute;
  background: #000;
  transition: all 0.3s ease;
  color: white;
  width: 0;
  left: 50%;
}
.links:not(:first-child) .link_box a:hover:after {
  color: #000;
  width: 100%;
  left: 0;
}

.food {
  width: 90%;
  font-size: 105%;
  font-family: Courier New;
  font-weight: bold;
  color: black;
  margin-left: 5%;
}
.scriptOB{
  z-index: 1;
  position: absolute;
}
button {
 font-size: 40px;
}

.page{
  display: inline-block;
  background-color: rgb(120, 255, 120);
  border: 3px solid rgb(120, 255, 120);
  border-radius: 5%;
  width: 29%;
  font: bold 130% 'Open Sans', arial, sans-serif;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: white;

  transition: all 0.25s ease;
}
.page:first-child:nth-last-child(4),
.page:first-child:nth-last-child(4) ~ .page{
  width: 20%;
}
.page center{
  margin: 3% 0;
}

.page:hover {
  border: 3px solid black;
  color: black;
  transform: scale(1.1);
}
.page video {
  margin-top: 2%;
  width: 75%;
}
.page img {
  margin-top: 5%;
  width: auto;
  width: 75%;
}
.page:not(:first-child){
  margin-left: 2%;
}
.page_row:not(:first-child){
  margin-top: 2%;
}


iframe {
  border: 0;
}
.game {
  height: 640px;
  width: 480px;
  min-height: 100%;
  min-width: 100%;
  max-height: 100%;
  max-width: 100%;
  overflow: visible;
}
/*
#wrap {
  width: 90%;
  height: 200px;

  transform: scale(0.15);
  transform-origin: center;
  transform: translate(-50%, -50%);

}

iframe {
  width: 1920px;
  height: 1080px;

  border: 5px solid black;
}
*/


span{
  display: block;
}
.effect{
  height: 100px;
}
.effect:after{
  transition: all 0.1s ease;

  width: 120%;
  content: "";
  background: black;
  position: absolute;
  left: -10%;

  bottom: 0px;
  height: 0px;
}
.effect:hover:after {
  height: 2px;
}




img {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}




/*
For creating arrows that can be clicked
*/
.arrow {
  border: solid black;
  border-width: 0 13px 13px 0;
  display: inline-block;
  padding: 13px;

  position: relative;
  top: -40px;
}
.arrow:hover{
  border-width: 0 15px 15px 0;
  padding: 15px;
}
.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.left:hover {
  left: -6px;
  margin-right: -6px;
}

/* 
For creating two columns side-by-side.
*/
.column {
  display:inline-block;
  /*float: left;*/
  width: 50%;
}
/*
.row:after {
  content: "";
  display: table;
  clear: both;
}
*/







/*
Phone settings.
*/
@media only screen and (max-width: 1000px) {
    .link_box {
        width: 15%;
    }
}