main.interest_main{
	width:100%;
}

.interest_div{
	position: relative;
	width: 100%;
	height: 80vh;
	background-size: cover;
	opacity: 0.75;
	overflow: hidden;
	margin-bottom: 2vh;
}

.interest_main .text{
	position: absolute;
	background-color: rgb(27, 27, 27);
	opacity: 0.85;
	font-size: 6vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

.interest_main .text p{
	margin: 4vw;
}

/* basketball */
.basketball{
	background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0)),linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0)),url("../imgs/interest/basketball/background3.png");
}

#lebron_poster{
	position: absolute;
	width: 70vw;
	bottom:-14vw;
	right:-13vw;
	z-index:2;
}

#kobe_painting{
	position: absolute;
	width:41vw;
	top: 1.0vh;
	left: 2vw;
}

#kobe_painting:active, #kobe_painting:hover{
	animation: shake 0.6s;
}

.basketball_text{
	height:27vh;
	width: 77vw;
	top: 24vh;
	left: 5vw;
	box-shadow: 4vw 3vw rgb(128, 0, 0);
}

#basketball_icon{
	position: absolute;
	width:14vw;
	height: 14vw;
	left:5vw;
	animation: bounce 0.78s  ease-out infinite;
}

@keyframes shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
  }

@keyframes bounce {
	0% {
	  bottom: 12vh;
	}
	50% {
	  bottom: -3vw;
	  width: 15.9vw;
	  height: 12.4vw;
	}
	100%{
		bottom: 12vh;
		width:14vw;
		height:14vw;
	}
}

/* guitar */
.guitar{
	background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0)),linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0)),url("../imgs/interest/guitar/background_phone.png")
}

#guitar_img{
	position: absolute;
	width: 100vw;
	top:-18vh;
	left:-20vw;
}

.guitar_text{
	width: 65vw;
	height: 32vh;
	top: 20vh;
	left: 30vw;
	box-shadow: 3vw 4vw #5c3452;
}

#notes1{
	position: absolute;
	z-index: 100;
	width:9.5vw;
	top: 53vh;
	left: 30vw;
	animation:  notes_shift 3.4s linear infinite;
}
#notes2{
	position: absolute;
	z-index: 100;
	width:13vw;
	top: 53vh;
	left: 41vw;
	animation:  notes_shift 2.9s linear infinite;
}
#notes3{
	position: absolute;
	z-index: 100;
	width:11vw;
	top: 56vh;
	left: 56vw;
	animation:  notes_shift 3.7s linear infinite;
}

@keyframes notes_shift {
	0% { transform:  scale(1); }
	10% { transform: translate(2vw, -2vw) rotate(10deg) scale(1.1); }
	20% { transform: translate(6vw, -4.8vw) rotate(0deg) scale(1.18); }
	30% { transform: translate(9.5vw, -7.8vw) rotate(-11deg) scale(1.26); }
	40% { transform: translate(13vw, -10.4vw) rotate(1deg) scale(1.34); opacity:0.8}
	50% { transform: translate(16.8vw, -12.7vw) rotate(10deg) scale(1.42); opacity: 0.6;}
	60% { transform: translate(20vw, -16vw) rotate(2deg) scale(1.5); opacity: 0.5;}
	70% { transform: translate(23.7vw, -18.8vw) rotate(-8deg) scale(1.54); opacity: 0.4;}
	80% { transform: translate(28vw, -21vw) rotate(0deg) scale(1.58); opacity: 0.3;}
	100% { transform: translate(31.7vw, -23.5vw) rotate(10deg) scale(1.58); opacity: 0.0;}
}

/* mario */
.mario{
	background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0)),linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0)),url("../imgs/interest/mario kart/mario_background.jpg");
}

#mario_kart{
	position: absolute;
	bottom:0vh;
	left:30vw;
}

#pipe{
	width: 45vw;
	position: absolute;
	bottom:-3vh;
	left:-8vw;
}

#brick{
	width: 45vw;
	position: absolute;
	bottom: 7vh;
	left:0vw;
}

#star{
	position: absolute;
	width:14vw;
	bottom: 24vh;
	left:16vw;
	z-index: 2;
	display:none;
}

.star_activate{
	animation: shine 2.3s linear;
}

@keyframes shine {
	0% { bottom: 22vh; transform: scale(1) ; opacity:0.0}
	10% {bottom: 23vh;transform: scale(1) ; opacity: 0.5}
	20%{bottom: 24vh; transform:  scale(1) ; opacity: 1}
	30% {transform: scale(1.27) ;}
	40% {transform: scale(1) ;}
	50%{transform:  scale(1.18) ;}
	60%{transform:  scale(1) ;}
	70%{transform:  scale(1.12) ;}
	80%{transform:  scale(1) ;}
	100%{transform: scale(1) ;}
}

#mario_logo{
	position: absolute;
	width:14vw;
	top: 6vw;
	right:6vw;
}

.mario_text{
	width: 65vw;
	height: 30vh;
	top: 13vh;
	left: 7vw;
	box-shadow: 3vw 4vw #3229af;
}

/* youtube */
.youtube{
	background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0.0)),linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0.0)),url("../imgs/interest/youtube/background3.jpg");
}

#window{
	position: absolute;
	width: 100vw;
	bottom: 20vh;
	left: 0;
}

#youtube_logo{
	width: 45vw;
	position: absolute;
	top: 1vh;
	left:3vw;
	z-index: 2;
}

#youtube_logo:hover, #youtube_logo:active{
	animation: shake 0.8s;
}

.youtube_text{
	width: 80vw;
	height: 33vh;
	bottom:24vh;
	left: 13vw;
}

.interest_main  .youtube_text{
	background-color: transparent;
}

/* travel */
.travel{
	background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0.0)),linear-gradient(to top,rgba(0,0,0,0.95),rgba(0,0,0,0.55),rgba(0,0,0,0.0)),url("../imgs/interest/travel/collage.jpeg");
	background-size: contain;
}

#attractions{
	position: absolute;
	width: 73vw;
	bottom: 8vh;
	left: 0;
	animation: drift 3.8s linear infinite;
}

@keyframes drift {
	0% { transform: translate(0px, -20px);}
	50% { transform: translate(0px, 0px);}
	100% { transform: translate(0px, -20px);}
}

#shadow{
	width: 35vw;
	position: absolute;
	bottom: 2vh;
	left:14vw;
	animation: shadow_effect 3.8s linear infinite;
}

@keyframes shadow_effect {
	0% { transform: scale(1);}
	50% { transform: scale(1.14,0.6);}
	100% { transform: scale(1);}
}

#passport{
	width: 50vw;
	position: absolute;
	bottom: 17vh;
	right:-7vw;
	z-index:2;	
}

.travel_text{
	width: 65vw;
	height: 33vh;
	top: 12vh;
	left: 15vw;
	box-shadow: 3vw 4vw #84fff4;
}

#visited_num{
	color: #84fff4;
	font-weight: bold;
}

/* tablet view */
/* *****************************************************************************/
@media only screen 
and (min-width : 481px)
and (max-width: 999px)
and (orientation: portrait)
{
		.interest_div{
			height: 130vh;
		}
	
		#lebron_poster{
			width: 70vw;
			position: absolute;
			bottom: -10vw;
			right:-13vw;
			z-index:2;
		}
		
		.basketball_text{
			height:50vh;
			width: 77vw;
			top: 40vh;
			left: 5vw;
		}
	
		#basketball_icon{
			animation: bounce 0.78s  ease-out infinite;	
		}
		
		@keyframes bounce {
			0% {
			  bottom: 20vh;
			}
			50% {
			  bottom: -3vw;
			  width: 15.9vw;
			  height: 12.4vw;
			}
			100%{
				bottom: 20vh;
				width:14vw;
				height:14vw;
			}
		  }
		
		/* guitar */
		
		#guitar_img{
			width: 100vw;
			top:-17vh;
			left:-20vw;
		}
	
		.guitar_text{
			width: 65vw;
			height: 50vh;
			top: 40vh;
			left: 30vw;
		}
		
		.guitar_text p{
			margin:4vw;
		}
		
		#notes1{
			width:9.5vw;
			top: 90vh;
			left: 30vw;
			animation:  notes_shift 3.4s linear infinite;
		}
	
		#notes2{
			width:13vw;
			top: 90vh;
			left: 41vw;
			animation:  notes_shift 2.9s linear infinite;
		}
	
		#notes3{
			width:11vw;
			top: 95vh;
			left: 56vw;
			animation:  notes_shift 3.7s linear infinite;
		}	
		
		/* mario */	
		#mario_kart{
			bottom:0vh;
			left:30vw;
			z-index: 2;
		}
		
		#pipe{
			width: 45vw;
			bottom:0vh;
			left:-8vw;
		}
		
		#brick{
			width: 45vw;
			bottom: 20vh;
			left:0vw;
		}
		
		#star{
			width:14vw;
			bottom: 44vh;
			left:16vw;
			z-index: 2;	
		}
		
		.star_activate{
			animation: shine 2.3s linear;
		}
		
		@keyframes shine {
			0% { bottom: 38vh; transform: scale(1) ; opacity:0.0}
			10% {bottom: 41vh;transform: scale(1) ; opacity: 0.5}
			20%{bottom: 44vh; transform:  scale(1) ; opacity: 1}
			30% { transform: scale(1.27) ;}
			40% {transform: scale(1) ;}
			50%{transform:  scale(1.18) ;}
			60%{transform:  scale(1) ;}
			70%{transform:  scale(1.12) ;}
			80%{transform:  scale(1) ;}
			100%{transform: scale(1) ;}
		}
	
		#mario_logo{
			width:14vw;
			top: 6vw;
			right:6vw;
		}
		
		.mario_text{
			width: 65vw;
			height: 50vh;
			top: 20vh;
			left: 7vw;	
		}
	
		/* youtube */	
		#window{
			bottom: 35vh;
		}
		
		#youtube_logo{
			top: 1vh;
			left:3vw;
		}
			
		.youtube_text{
			width: 75vw;
			height: 80vh;
			bottom:27vh;
			left: 13vw;
		}
		
		/* travel */
		
		#attractions{
			bottom: 15vh;
			left: 0;		
		}
		
		#shadow{
			bottom: 2vh;
			left:14vw;
		}
		
		#passport{
			bottom: 40vh;
			right:-7vw;		
		}
		
		.travel_text{
			width: 65vw;
			height: 50vh;
			top: 25vh;
			left: 15vw;
		}
}

/* desktop view */
/* *****************************************************************************/
@media only screen and (min-width: 1024px)
{
	.interest_div{
		width: 100%;
		height: 90vh;
	}

	.interest_main .text{
		font-size: 3vw;
	}

	.basketball{
		background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0)),linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0)),url("../imgs/interest/basketball/background_desktop.png");
	}
	
	#lebron_poster{
		width: 40vw;
		bottom: -10vw;
		right:-5vw;
	}
	
	#kobe_painting{
		width:20vw;
		top: 1vh;
		left: 2vw;
	}
	
	.basketball_text{
		height:50vh;
		width: 53vw;
		top: 20vh;
		left: 23vw;
		box-shadow: 3vw 2.5vw rgb(128, 0, 0);
	}

	#basketball_icon{
		width:8vw;
		height: 8vw;
		left:5vw;
		animation: bounce 0.78s  ease-out infinite;
	}
	
	@keyframes bounce {
		0% {
		  bottom: 20vh;
		}
		50% {
		  bottom: -2vw;
		  width: 8.8vw;
		  height: 6.8vw;
		}
		100%{
			bottom: 20vh;
			width:8vw;
			height:8vw;
		}
	  }
	
	/* guitar */
	.guitar{	
		background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0)),linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0)),url("../imgs/interest/guitar/background_desktop.jpeg");
	}
	
	#guitar_img{
		width: 60vw;
		top:-100vh;
		left:-4vw;
	}

	.guitar_text{
		width: 53vw;
		height: 50vh;
		top: 15vh;
		left: 30vw;
		box-shadow: 3vw 2.5vw #5c3452;
	}

	#notes1{
		z-index: 100;
		width:5vw;
		top: 70vh;
		left: 27vw;
		animation:  notes_shift 5.1s linear infinite;
	}
	#notes2{
		z-index: 100;
		width:7vw;
		top: 70vh;
		left: 35vw;
		animation:  notes_shift 4.4s linear infinite;
	}
	#notes3{
		z-index: 100;
		width:6vw;
		top: 75vh;
		left: 40vw;
		animation:  notes_shift 5.5s linear infinite;
	}
	
	/* mario */
	.mario{
		background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0)),linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0)),url("../imgs/interest/mario kart/background_desktop.jpeg");
	}
	
	#mario_kart{
		bottom:0vh;
		left:60vw;
		z-index: 2;
		width: 50vw;
	}
	
	#pipe{
		width: 30vw;
		bottom:-10vh;
		left:0vw;
	}
	
	#brick{
		width: 25vw;
		bottom: 10vh;
		left:3vw;
	}
	
	#star{
		width:10vw;
		bottom: 41vh;
		left:11vw;
		z-index: 2;
		display:none;
	}
	
	.star_activate{
		animation: shine 2.3s linear;
	}

	@keyframes shine {
		0% { bottom: 39vh; transform: scale(1) ; opacity:0.0}
		10% {bottom: 42vh;transform: scale(1) ; opacity: 0.5}
		20%{bottom: 45vh; transform:  scale(1) ; opacity: 1}
		30% { transform: scale(1.27) ;}
		40% {transform: scale(1) ;}
		50%{transform:  scale(1.18) ;}
		60%{transform:  scale(1) ;}
		70%{transform:  scale(1.12) ;}
		80%{transform:  scale(1) ;}
		100%{transform: scale(1) ;}
	}
	
	#mario_logo{
		width:8vw;
		top: 3vw;
		right:3vw;
	}
	
	.mario_text{
		width: 53vw;
		height: 50vh;
		top: 10vh;
		left: 29vw;
		box-shadow: 3vw 2.5vw #3229af;
	}

	/* youtube */
	.youtube{
		background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0.0)),linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0.0)),url("../imgs/interest/youtube/background3.jpg");
	}
	
	#window{
		position: relative;
		display: block;
		top:5vh;
		margin: 0 auto;
		width: 55vw;
	}
	
	#youtube_logo{
		width: 20vw;
		position: absolute;
		top: -2vh;
		left:0vw;
		z-index: 2;
	}
	
	.youtube_text{
		width: 60vw;
		height: 80vh;
		bottom:10vh;
		left: 20vw;
	}
	
	/* travel */
	.travel{
		background-image: linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.2),rgba(0,0,0,0.0)),linear-gradient(to top,rgba(0,0,0,0.95),rgba(0,0,0,0.55),rgba(0,0,0,0.0)),url("../imgs/interest/travel/collage.jpeg");
		background-size: contain;
	}
	
	#attractions{
		width: 40vw;
		bottom: 15vh;
		left: 0;
		animation: drift 3s linear infinite;
		z-index: 2;
	}
	
	#shadow{
		width: 30vw;
		bottom: 2vh;
		left:3vw;
		animation: shadow_effect 3s linear infinite;
	}
	
	#passport{
		width: 35vw;
		bottom: 3vh;
		right:-7vw;
		z-index:2;
		
	}
	
	.travel_text{
		width: 53vw;
		height: 50vh;
		top: 12vh;
		left: 30vw;
		box-shadow: 3vw 4vw #84fff4;
	}
}