@charset "UTF-8";

body{
	background-color:#14320b;
}

.wrap{
	position: relative;
	/*transform-style: preserve-3d;*/
	/*perspective: 380px;*/
	/*transform-origin:center;*/
}
/**********************************************/
@media screen and (max-width:768px){
	.wrap{
		width:58%;
	}		
}
/***********************************************/
canvas {
	/*width: 100vw;*/
	/*height: 100vh;*/
	z-index:1;
}

.container{
	position: absolute;
	top:-10px;
	left:-10px;
	background-color:#000000;
	/*background-color:#14320b;*/
	width: 100vw;
	height: 100vh;
}
/*************************************************************/

/********************************************************
.container:before, .container:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: black;
}
**********************************************************/
.anima{
    width: 630px;
    height: 300px;
	position: absolute;
    /*position: relative;*/
    top:360px;
    left:400px;
    background-color:pink;
    z-index:2;
    animation-name:moveRight;
    animation-duration:16s;
    /*animation-delay:*/
    animation-iteration-count:3;
    animation-direction:alternate;
    animation-fill-mode:forwards;
    animation-timing-function:ease-in-out;
    /*animation-play-state*/
  }

@keyframes moveRight {
    from {
    	left: 100px;
    }
    to {
    	left: 1200px;
	}
}

.dot {
    position: absolute;
    width: 1.5px;
    height: 1.5px;
	background:#00CEAF;
}

.dot2 {
    position: absolute;
    width: 1.5px;
    height: 1.5px;
	background:orange;
	z-index:2;
	}