body {
  left: 2vw;
  position:relative;
  margin-right: 3vw;
}
/*body {*/
  /*padding: 0px 0px 0px 15%;*/
/*}*/
.noselect {
    cursor: pointer;
    /*-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
}
a {
  color: #777766;
}
span {
  color: #777766;
}
.b_0 {
  position: absolute;
  z-index:1;
}
.b_1 {
  position: absolute;
 z-index: 2;
}
.b_2 {
  position: absolute;
 z-index: 3;
}
.b_3 {
  position: absolute;
 z-index: 4;
}
.parallax_box {
  padding: 0;
  top: 0px;
  width:1100px;
  position: absolute;
  background-color: #000000;
  z-index: 0;
}
.left_bound {
position: absolute;
 top: 0px;
 left: -20px;
 width: 30px;
 height: 300px;
 /*opacity: .3;*/
 background-color: #FFFFFF;
 z-index: 5;
}
.right_bound {
  position: absolute;
 top: 0px;
 left: 785px;
 width: 25px;
 height: 300px;
 /*opacity: .3;*/
 background-color: #FFFFFF;
 z-index: 5;
}
#character {
  font-family: Helvetica,Helvetica,Arial,sans-serif;
  position: absolute;
  top: 150px;
  left: 500px;
  color: #000000;
  font-size: 33;
  font-weight: bold;
  font-weight: 300;
  z-index: 4;
}
.test {
  position: fixed;
  color: #ccc;
  background-color: yellow;
  display: none;
  top: 20%;
  left:90%;
  width:20px;
  height:50px;
  z-index: 20;
}
.main {
  position: relative;
  height:100%;
  width:100%;
}

.menu {
  font-family: Helvetica,Helvetica,Arial,sans-serif;
  font-size:30px;
  padding-left:80px;
  margin:10px;
  width:775px;
  height:60px;
  color: #CACACA;
  top:200px;
  position: relative;
  /*background-color: red;*/
  z-index: 0;
  overflow: visible;
}
.sub_menu {
  display: inline-block;
  margin:0px 0px 0px 5px;
  /*background-color: blue;*/
}
.sub_menu:hover {
  color: #000000;
  background-color: #AAAAAA;
  opacity: .7;
  /*text-decoration: underline;*/
}

.circle {
  position: fixed;
  cursor: pointer;
  top: 90%;
  left: 85%;
  width: 40px;
  height: 40px;
  background: red;
  z-index: 10;
  background-color: #777766;
  color:#FFFFFF;
  font-family: Helvetica,Helvetica,Arial,sans-serif;
  font-size:40px;
}
.circle:hover {
  background-color: #777766;
}
.content {
  position:relative;
/*  top:380px;
  width:80%;*/

}
.subcontent {
  height:2em;
  /*width: 70%;*/
  display:block;
  /*background-color: green;*/
  margin-top:800px;
  padding-right:20px;
  font-family: Helvetica,Helvetica,Arial,sans-serif;
  font-size:20px;
  color: #777766;
}
.subtitle {
  width: .25%;
  /*position:absolute;*/
  padding:0px 0px 0px .5em;
  z-index:10;
  color:#999999;
  background-color: #05DFC0;
  font-size:2em;
  font-family: Helvetica,Helvetica,Arial,sans-serif;
}
span {
  margin-left: 3px;
}
.ok {
  cursor: pointer;
  position: fixed;
  top: 90%;
  left: 2%;
  background-color: white;
  position:relative;
  color: #999999;
  font-size:1.5em;
  font-family: Helvetica,Helvetica,Arial,sans-serif;
}

ul {
  list-style: square inside url("bullet.svg");
  padding-left: 0;
  position: relative;
}

li {
  padding-bottom: .2em;
}


.col-2 {
  width:60%;
  margin-left: 30px;
  padding-right: 10px;
}
.col-3 {width:33.33%;}
@media screen and (max-width: 650px) {
  [class*='col-'] {
    width: 100%;
  }
}

#container {
    display: flex;           /* establish flex container */
    flex-direction: column;  /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center;     /* center items horizontally, in this case */
    height: 300px;
}

pre {
    margin: 22px 2px 22px 2px;
    padding: 2px;
    color: #000000;
    border-left: 3px solid #009400;
    font-size: 14px;
    font-family: 'PT Mono', monospace;
    background: #eeeeee;
    line-height: 1.125em;
    overflow-x: auto;
}
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 480px) and (min-height: 500px) {
  a {
   font-size: 4vh;
  }
}


@-moz-keyframes scroll-left {
	0% {
		-moz-transform: translateX(-50%);
	}
	100% {
		-moz-transform: translateX(100%);
	}
}

@-webkit-keyframes scroll-left {
	0% {
		-webkit-transform: translateX(-50%);
	}
	100% {
		-webkit-transform: translateX(100%);
	}
}

@keyframes scroll-left {
	0% {
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	100% {
		-moz-transform: translateX(100%);
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
}

.marquee {
  display: inline-block; /* Ensure the element is treated as inline-block */
  white-space: nowrap; /* Prevent text from wrapping */
  animation: scroll-left 20s linear infinite;
}