* {
	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);
}


/* //// */
#scroll-container {
	border-radius: 5px;
	height:100vh;
	overflow:hidden;
	/* background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 28%, rgba(255,255,255,1) 58%); */
z-index: 999;
  }
  
  #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;
	z-index: 999;
  }
  #scroll-text img:hover {
	background: rgb(1,146,66);
	
  }
  #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;
	z-index: 999;
  }
  

  #scroll-text2 img{
	height: 7vmin;
	
	

  }
  /* 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%);
	}
  }
 










  .all_type{
	height: 6vmin;
	margin-right: 3vmin;
	
  }
  .all_type:hover{
	background-color:rgb(161,222,255);
  }
  
  .comics_type{
	height: 6vmin;
	margin-right: 3vmin;
  }
	.comics_type:hover{
	background-color: rgb(195,239,30);
	}
.poster_type{
		height: 6vmin;
		margin-right: 3vmin;
		
	  }
	  .poster_type:hover{
		background-color:rgb(255,119,0);
	  }
	
	  .misc_type{
		height: 6vmin;
		margin-right: 3vmin;
		
	  }
	  .misc_type:hover{
		background-color:rgb(37,183,123);
	  }
	


		 .row {
			border: 1px solid black;
			display: grid;
			flex-wrap: wrap;
			overflow: scroll;
			scroll-snap-type: both mandatory;
			scroll-padding: 1rem;
	  		justify-content: center;
  			height: 90vh;
	} 
	
	.row img{
		scroll-snap-align: start;
		display:grid;
		border-radius: 3px;
		text-align: center;
		background: url("images/base.png");
		background-position: center;
		background-size: cover;
		height:70vmin;
		padding:3vmin;
		
	}
	.row text{
		color: black;
		
		display: flex;
		justify-content: center;

		
	}

	#shop_one{ 
		background-image: url(images/adam_poster.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	#shop_one:hover{ 
		background-image: url(images/adam_two_poster.png);
		
	}

	#shop_two{ 
		background-image: url(images/window_poster.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	#shop_two:hover{ 
		background-image: url(images/window_ONE_poster.png);
	}
	#shop_three{ 
		background-image: url(images/cabeswater_poster.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	#shop_three:hover{ 
		background-image: url(images/cabeswater_one_poster.png);
	}

	#shop_four { 
		background-image: url(images/horse_misc.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	#shop_four:hover{ 
		background-image: url(images/horse_two_misc.png);
	}
	#shop_five{ 
		background-image: url(images/home_poster.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	#shop_five:hover{ 
		background-image: url(images/home_one_poster.png);
	}

	#shop_six{ 
		background-image: url(images/calendar_misc.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	#shop_six:hover{ 
		background-image: url(images/calendar_two_bookmark.png);
	}

	#shop_seven{ 
		background-image: url(images/lighthouse_comics.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	#shop_seven:hover{ 
		background-image: url(images/lighthouse_one_comcis.png);
	}
	#shop_eight{ 
		background-image: url(images/umbra_comics.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	#shop_eight:hover{ 
		background-image: url(images/umbra_one_comics.png);
	}

	#shop_nine{ 
		background-image: url(images/twin_comics.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	#shop_nine:hover{ 
		background-image: url(images/twin_one_comics.png);
	}
	#shop_ten{ 
		background-image: url(images/margin_comic.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	#shop_ten:hover{ 
		background-image: url(images/margin_one_comic.png);
	}
	#shop_eleven{ 
		background-image: url(images/card_misc.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	#shop_eleven:hover{ 
		background-image: url(images/card_one_misc.png);
	}
	
	#shop_twelve{ 
		background-image: url(images/knight_poster.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	/* #shop_twelve:hover{ 
		background-image: url(images/knight_two_poster.png);
	} */
	#shop_thirteen{ 
		background-image: url(images/small_home_poster.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	/* #shop_thirteen:hover{ 
		background-image: url(images/small_home_two_poster.png);
	} */
	
	
	#shop_fourteen{ 
		background-image: url(images/cow_misc.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}


	#shop_fifteen{ 
		background-image: url(images/pumpkin_poster.jpg);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

#shop_fifteen:hover{ 
		background-image: url(images/pumpkin_one_poster.png);
	}
	
	#shop_sixteen{ 
		background-image: url(images/sunbeast_poster.jpg);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}
	#shop_sixteen:hover{ 
		background-image: url(images/sunbeast_one_poster.jpg);
	}
	

	#shop_seventeen{ 
		background-image: url(images/STAR_POSTER.jpg);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}

	#shop_eighteen{ 
		background-image: url(images/seelie_poster.jpg);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}
	#shop_eighteen:hover{ 
		background-image: url(images/seelie_one_poster.png);
	}
	
	#shop_nineteen{ 
		background-image: url(images/snoopy_stickers_MISC.jpg);
	
	}

	#shop_twenty{ 
		background-image: url(images/fish_stickers_misc.jpg);
		
	}

	#shop_twentyone{ 
		background-image: url(images/eight_card_misc_1.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}
	#shop_twentyone:hover{ 
		background-image: url(images/eight_card_misc_2.png);
	}
	#shop_twentytwo{ 
		background-image: url(images/olive_Card_misc_1.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}
	#shop_twentytwo:hover{ 
		background-image: url(images/olive_card_misc_2.png);
	}

	#shop_twentythree{ 
		background-image: url(images/lighthouse_comics.png);
		transition-duration:200ms;
		transition-timing-function: ease-in-out;
	}
	#shop_twentythree:hover{ 
		background-image: url(images/lighthouse_digital_comics_2.png);
	}

	#shop_twentyfour{ 
		
		background-image: url(images/braids_1.png);

		transition-duration:200ms;
		transition-timing-function: ease-in-out;
		
	}
	#shop_twentyfour:hover{ 
		background-image: url(images/braids_2.png);
	}
	#shop_twentyfive{ 
		
		background-image: url(images/medusa_1.png);

		transition-duration:200ms;
		transition-timing-function: ease-in-out;
		
	}
	#shop_twentyfive:hover{ 
		background-image: url(images/medusa_1a.png);
	}
	#shop_twentysix{ 
		
		background-image: url(images/medusa_2.png);

		transition-duration:200ms;
		transition-timing-function: ease-in-out;
		
	}
	#shop_twentysix:hover{ 
		background-image: url(images/medusa_2a.png);
	}

	#shop_twentyseven{ 
		
		background-image: url(images/medusa_3.png);

		transition-duration:200ms;
		transition-timing-function: ease-in-out;
		
	}
	#shop_twentyseven:hover{ 
		background-image: url(images/medusa_3a.png);
	}
	#shop_twentyeight{ 
		
		background-image: url(images/medusa_4.png);

		transition-duration:200ms;
		transition-timing-function: ease-in-out;
		
	}
	#shop_twentyeight:hover{ 
		background-image: url(images/medusa_4a.png);
	}


	#shop_twentynine{ 
		
		background-image: url(images/medusa_print.png);

		transition-duration:200ms;
		transition-timing-function: ease-in-out;
		
	}
	#shop_twentynine:hover{ 
		background-image: url(images/medusa_print1.png);
	}


#shop_thirty{
	background-image: url(images/lighthouse1_misc\ copy.jpg);
	transition-duration:200ms;
		transition-timing-function: ease-in-out;
}
#shop_thirty:hover{
	background-image: url(images/lighthouse2_misc.jpg);
}
#shop_thirtyone{
	background-image: url(images/sleeping1_misc.png);
	transition-duration:200ms;
		transition-timing-function: ease-in-out;
}
#shop_thirtyone:hover{
	background-image: url(images/sleeping2_misc.jpg);
}
#shop_thirtytwo{
	background-image: url(images/ghost1_print.jpg);
	transition-duration:200ms;
		transition-timing-function: ease-in-out;
}
#shop_thirtytwo:hover{
	background-image: url(images/ghost2_print.jpg);
}

#shop_thirtythree{
	background-image: url(images/swan1_print.jpg);
	transition-duration:200ms;
		transition-timing-function: ease-in-out;
}
#shop_thirtythree:hover{
	background-image: url(images/swan2_print.jpg);
}

#shop_thirtyfour{
	background-image: url(images/sunbeast_poster.jpg);
	transition-duration:200ms;
		transition-timing-function: ease-in-out;
}
#shop_thirtyfour:hover{
	background-image: url(images/sunbeast_one_poster.jpg);
}

	  /* Create three equal columns that floats next to each other */
	  .column {
		display: none; /* Hide columns by default */
		border: 1px solid black;
	  }
	  
	  
	  /* Clear floats after rows */
	  .row:after {
		content: "";
		display: table;
		clear: both;
	  } 
	  
	  /* Content */
	  .content {
		background-color: white;
		padding: 10px;
	  }
	  
	  /* The "show" class is added to the filtered elements */
	  .show {
		display: block;
	  }
	  
	  /* Style the buttons */
	  .btn {
		border: none;
		outline: none;
		margin-bottom: 3vmin;
		background-color: white;
		cursor: pointer;
	  }
	  
	  /* Add a grey background color on mouse-over */
	  
	  
	  /* Add a dark background color to the active button */
	  .btn.active img{
		background-color: rgb(244,177,244);
		 color: white;
	  }


	  @media (min-width: 700px){
	  .row{
	width:max-content;
	display: block;
margin-left: auto;
margin-right:auto;

	  }
	}

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

		.row img{
			height: 99vmin;
		}
	.row{
		width: 100%;
	}
  }
#about img{
	width: 100vmin;
  height: 100vmin;
  
  /* Center vertically and horizontally */
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -50vmin 0 0 -50vmin; /* Apply negative top and left margins to truly center the element */
  z-index:-1;
}