html, body {
overflow: hidden;
}

body {
width: 100%;
/*	background-image: url("https://images.pexels.com/photos/189349/pexels-photo-189349.jpeg");*/
background-image: url("/images/background_island_new.jpg");
/* Background image is centered vertically and horizontally at all times */
background-position: center;

/* Background image doesn't tile */
background-repeat: no-repeat;

/* Background image is fixed in the viewport so that it doesn't move when
 the content's height is greater than the image's height */
background-attachment: fixed;

/* This is what makes the background image rescale based
 on the container's size */
background-size: cover;

/* Set a background color that will be displayed
 while the background image is loading */
background-color: #464646;
z-index: 1;
/* color: #3bff00;*/


overflow: hidden;
}
/*
footer {
position: fixed;
bottom: 0;
background-color: rebeccapurple;
width: 100%;
height: 48px;
padding: 4px;
box-shadow: 0 2px 2px 1px black;
}

header {
position: fixed;
top: 0;
background-color: rebeccapurple;
width: 100%;
height: 20px;
opacity: 2;
padding: 4px;
color: white;
font-size: 12px;
}
*/
p {
cursor: default;
margin-top: 0;
}

[id^="button"] {
/*	margin-left: 20px;*/
color: white;
cursor: pointer;
/*font-size: 30px;
position: relative;
bottom: 2px;*/
}

.flex-container {
padding: 0;
margin: 0;
list-style: none;
z-index:50;


-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
overflow: hidden;
}

.flex-item {
position: relative;
/* background: tomato;*/
padding: -30px;
border: 0px solid red;

color: white;
font-weight: bold;
font-size: 2em;
/* text-align: center;*/
}

.flex1 { flex: 2 2 1px; flex-grow:10000;}
.flex2 { flex: 2 2 1px;
flex-grow:10000;
}
.flex3 {
text-align: center;
flex: 2 2 1px;
flex-grow:10000;

}

.flex4 {
text-align: center;
flex: 2 2 1px;
flex-grow:10000;

}
/*tree*/
.flex5 {
text-align: left;
flex: 2 2 1px;
flex-grow:122000;
/* next 2 tree */
}
.flex6 { flex: 2 2 1px;
flex-grow:100000;
}

/*FOX*/
.flex7 {
text-align: right;
flex: 2 2 1px;
flex-grow:60000;
}
/*FISH*/
.flex8 {
flex: 2 2 1px;
flex-grow:6000;
}
/*boat*/
.flex9 {
flex: 2 2 1px;
text-align: center;
flex-grow:10000;
}
/*island*/
.flex10 {  text-align: right;
flex: 2 2 1px;
flex-grow:10000;}

.flex-item img {
max-width:auto;
object-fit: contain;
}


   /* embedding */
.embedding {
height: 100%;
width: 100%;
position: absolute;
z-index: 150;
top: 40px;
/*overflow-x: scroll;*/
overflow-y: scroll;
padding-top: 0px;
left: 0px;
font-family: "NeueBit-Regular";
background-color: black;
font-size: 20px;
color: green;
opacity:2;

* {
scrollbar-width: thin;
scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 12px;
}

*::-webkit-scrollbar-track {
background: orange;
}

*::-webkit-scrollbar-thumb {
background-color: blue;
border-radius: 20px;
border: 3px solid orange;
}

}


/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 101;
top: 0;
padding-top: 0px;
}
.split1 {
height: 100%;
width: 40%;
position: fixed;
z-index: 101;
top: 0;
padding-top: 0px;
}



/* Control the left side */
.left {
left: 0px;
position: fixed;
background-color: black;
font-size: 10px;
color: pink;
/*  margin-right:10px;
justify-content: space-between;
display: flex;*/
overflow-y: scroll;
}

/* Control the right side */
.right {
right: 0px;
position: fixed;
background-color: black;
font-size: 10px;
color: red;
overflow-y: scroll;
}


/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
left: 2%;
margin:20px;
font-family: "NeueBit-Regular";
        font-size: 20px;
/*   top: 150%;
transform: translate(-50%, -50%);
text-align: left;*/
}

/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 0%;
}

@font-face {
font-family: "NeueBit-Bold";
/*src: url("/font/NeueBit-Bold.eot");
src: url("/font/NeueBit-Bold.woff") format("woff"),
url("/font/NeueBit-Bold.otf") format("opentype"),
url("/font/NeueBit-Bold.svg#filename") format("svg");*/
src: url('/font/NeueBit-Bold.eot'); /* IE9 Compat Modes */
src: url('/font/NeueBit-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('/font/NeueBit-Bold.woff2') format('woff2'), /* Super Modern Browsers */
   url('/font/NeueBit-Bold.woff') format('woff'), /* Pretty Modern Browsers */
   url('/font/NeueBit-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
   url('/font/NeueBit-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/*	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/


@font-face {
font-family: "NeueBit-Bold";
/*src: url("/font/NeueBit-Bold.eot");
src: url("/font/NeueBit-Bold.woff") format("woff"),
url("/font/NeueBit-Bold.otf") format("opentype"),
url("/font/NeueBit-Bold.svg#filename") format("svg");*/
src: url('/font/NeueBit-Regular.eot'); /* IE9 Compat Modes */
src: url('/font/NeueBit-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('/font/NeueBit-Regular.woff2') format('woff2'), /* Super Modern Browsers */
   url('/font/NeueBit-Regular.woff') format('woff'), /* Pretty Modern Browsers */
   url('/font/NeueBit-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
   url('/font/NeueBit-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/*	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/



/* scroll bar ***/
   /* embedding */
.embedding {
height: 100%;
width: 100%;
position: absolute;
z-index: 150;
top: 40px;
/*overflow-x: scroll;*/
overflow-y: scroll;
padding-top: 0px;
left: 0px;
background-color: black;
opacity:2;
}

  .slide-out-div {
      padding: 0px;
      width: 350px;
      height:600px;
      background: radial-gradient(circle, rgba(49,6,231,0.7175070711878502) 40%, rgba(0,0,0,0.7623249983587185) 70%);
     border-style: ridge ridge none ridge;
       border-width: 10px;
       border-color: #EC7FFD;
      -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
      box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
      z-index: 9999;
        position: fixed;
        font-family: "NeueBit-Regular";



  }
  /*entangled events*/
    .slide-out-div1 {
      padding: 0px;
      width: 350px;
      height:600px;
      background: radial-gradient(circle, rgba(49,6,231,0.7175070711878502) 40%, rgba(0,0,0,0.7623249983587185) 60%);
      border-style: none ridge ridge ridge;
      border-width: 10px;
      border-color: #EC7FFD;
      -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
      box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
      z-index: 9999;
      position: fixed;
       font-family: "NeueBit-Bold";
        /*font-size: 30px;*/

  }