* {
	box-sizing: border-box;
}
html {
	font-family: sans-serif;
	scroll-snap-type: mandatory;
	scroll-snap-points-y: repeat(100vh);
	scroll-snap-type: y mandatory;
}
section {

	
	height: 100vh;
	scroll-snap-align: start;
	text-align: center;
	position: relative;
	padding-top: .5vmin;
}
h1	{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
	color: blue;
	width: 100%;
	left: 0;
	font-size: calc(1rem + 3vw);
}

  .home{
    background-image:url("images/background.jpg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  
}

/* //// */
#scroll-container {
	border-radius: 5px;
	height:100vh;
	overflow:hidden;
  }
  
  #scroll-text {
	/* animation properties */
	-moz-transform: translateX(100%);
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
	
	-moz-animation: my-animation 20s linear infinite;
	-webkit-animation: my-animation 20s linear infinite;
	animation: my-animation 40s linear infinite;
	display: flex;
	width:100vw;
  }
  #scroll-text2 {
	/* animation properties */
	-moz-transform: translateX(0);
	-webkit-transform: translateX(0);
	transform: translateX(0);
	
	-moz-animation: my-animation1 20s linear infinite;
	-webkit-animation: my-animation1 20s linear infinite;
	animation: my-animation1 20s linear infinite;
	display: flex;
	position: relative; 
	top:85vh;
  }
  
  #scroll-text img{
	height: 5vmin;
  }
  
  #scroll-text img:hover {
	background: rgb(255,115,119);
	
  }
  #scroll-text2 img{
	height: 7vmin;
  }

  #scroll-text2 img:hover {
	background: black;
	
  }
  /* for Firefox */
  @-moz-keyframes my-animation {
	from { -moz-transform: translateX(100%); }
	to { -moz-transform: translateX(-100%); }
  }
  
  /* for Chrome */
  @-webkit-keyframes my-animation {
	from { -webkit-transform: translateX(100%); }
	to { -webkit-transform: translateX(-100%); }
  }
  
  @keyframes my-animation{
	from {
	  -moz-transform: translateX(100%);
	  -webkit-transform: translateX(100%);
	  transform: translateX(0%);
	}
	to {
	  -moz-transform: translateX(-100%);
	  -webkit-transform: translateX(-100%);
	  transform: translateX(-100%);
	}
  }


   /* for Firefox */
   @-moz-keyframes my-animation1 {
	from { -moz-transform: translateX(-100%); }
	to { -moz-transform: translateX(100%); }
  }
  
  /* for Chrome */
  @-webkit-keyframes my-animation1 {
	from { -webkit-transform: translateX(-100%); }
	to { -webkit-transform: translateX(100%); }
  }
  
  @keyframes my-animation1{
	from {
	  -moz-transform: translateX(100%);
	  -webkit-transform: translateX(100%);
	  transform: translateX(-100%);
	}
	to {
	  -moz-transform: translateX(0%);
	  -webkit-transform: translateX(0%);
	  transform: translateX(0%);
	}
  }
 


#about{
	background-image:url("images/about.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.gallery {
	padding: 1rem;
	display: flex;
	overflow-x: scroll;
	scroll-padding: 0 50%;
	scroll-snap-type: x mandatory;
}


li {
	scroll-snap-align: center;
	display: inline-block;
	height: 83vh;
	border-radius: 3px;
	font-size: 0;
	margin-right: 3rem;
	/* margin-top: 7vmin; */
}

li img{
	height: 100%

}
@media (max-width: 700px) {
	
	#scroll-text img{
		height: 15vmin;
	}
	#scroll-text2 {
		top:70vh;
	  }
	#scroll-text2 img{
		height: 10vmin;}
	li img{
		height: 75%; 
	}
	
  }

  .riso_type{
	height: 5vmin;
	margin-right: 5vmin;
	

  }
  .riso_type:hover{
	background-color:rgb(245,124,17);
  }
  

  #shape img{
	position:absolute;
	height: 100px;
	top: 15vmin;
	left: 5vmin;
	z-index: 1;
  }

  #shape img:hover{
	height:105px;
	top: 14.5vmin;
	left: 4.5vmin;
  }
  #star img{
	height: 5vmin;

  }

#star:hover img{
	background-color: rgb(195,239,30);
	}

	
	#shop img{
		height: 5vmin;
		margin-left: 5vmin;
	  }
	
	#shop:hover img{
		background-color: rgb(136,137,254);
		}