/* 
	PurpleKrypt
	This CSS file contains CSS used by the home page
*/

#home_background {
	min-height: calc(100vh - 150px);
	background: rgb(0,0,0);
	background: -moz-linear-gradient(25deg, rgba(0,0,0,1) 0%, rgba(93,0,144,1) 100%);
	background: -webkit-linear-gradient(25deg, rgba(0,0,0,1) 0%, rgba(93,0,144,1) 100%);
	background: linear-gradient(25deg, rgba(0,0,0,1) 0%, rgba(93,0,144,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#9900cc",GradientType=1); 
	
	padding-top: 20vh;
	padding-bottom: 10vh;
	display: flex;
    justify-content: center; 
}

#home_main_image {
    display: block;
    max-width: 400px;
    width: 120px; 
    height: auto; 
	margin-bottom: 0px;
	scale: 2;
	margin: 0px auto;
	
	opacity: 0;
	animation: fade_in_up 0.5s forwards;
	animation-delay: 0.2s;
}

#home_main_text {
	white-space: pre-line;
	font-size: 50px;
	padding-top: 0px;
	margin-top: 20px;
	margin-bottom: 60px;
	text-align: center;
	
	opacity: 0;
	animation: fade_in_up 0.5s forwards;
	animation-delay: 0.3s;
}

#home_algo_grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 10px;
	max-width: 1024px;
}

/* Animation assigning */
#home_algo_glow_box_1 {
	opacity: 0;
	animation: fade_in_up 0.5s forwards;
	animation-delay: 0.4s;

}
	
#home_algo_glow_box_2 {
	opacity: 0;
	animation: fade_in_up 0.5s forwards;
	animation-delay: 0.5s;
}

.home_algo_glow_box {
	border: 2px solid #ffffff;
	border-radius: 10px;
	padding: 20px;
	text-align: center;
	display: flex;
    justify-content: center; 
	
	-webkit-box-shadow:0px 0px 18px 2px rgba(153,0,204,0.38) , 0px 0px 18px 2px rgba(153,0,204,0.38) inset;
	-moz-box-shadow: 0px 0px 18px 2px rgba(153,0,204,0.38) , 0px 0px 18px 2px rgba(153,0,204,0.38) inset;
	box-shadow: 0px 0px 18px 2px rgba(153,0,204,0.38) , 0px 0px 18px 2px rgba(153,0,204,0.38) inset;
	
	-webkit-transition: all 0.2s ease;
    	-moz-transition: all 0.2s ease;
    	-o-transition: all 0.2s ease;
    	-ms-transition: all 0.2s ease;
    	transition: all 0.2s ease;
}

.home_algo_glow_text {
	white-space: pre-line;
	font-size: 32px;
	text-shadow: 0 0 10px #9900cc, 0 0 20px #9900cc, 0 0 30px #9900cc;
	font-family: 'roboto_regular';
	padding-top: 3px;
}

.home_ROSET_graphical_grid {
	display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(3, 1fr); 
    gap: 20px;
	margin: 70px 160px;
	font-size: 24px;
  
}

.home_ROSET_graphical_grid_obj_w {
	padding: 40px;
	background-color: transparent;
	color: #aaaaaa;
	text-align: center;
	border: 2px solid #aaaaaa;
	border-radius: 10px;
	display: block;
	margin: 0px;
	
	
	box-shadow: 1px 16px 29px -4px rgba(0,0,0,0.75);
	-webkit-box-shadow: 1px 16px 29px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: 1px 16px 29px -4px rgba(0,0,0,0.75);
	
	-webkit-transition: all 0.2s ease;
    	-moz-transition: all 0.2s ease;
    	-o-transition: all 0.2s ease;
    	-ms-transition: all 0.2s ease;
    	transition: all 0.2s ease;
}

.home_ROSET_graphical_grid_obj_w:hover {
	color: #ffffff;
	border: 2px solid #ffffff;
	transform: scale(1.05);
	
}

.home_ROSET_graphical_grid_obj_b {
	padding: 40px;
	background-color: transparent;
	color: #9900cc;
	text-align: center;
	border: 2px solid #9900cc;
	border-radius: 10px;
	display: block;
	margin: 0px;
	
	box-shadow: 1px 16px 29px -4px rgba(0,0,0,0.75);
	-webkit-box-shadow: 1px 16px 29px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: 1px 16px 29px -4px rgba(0,0,0,0.75);
	
	-webkit-transition: all 0.2s ease;
    	-moz-transition: all 0.2s ease;
    	-o-transition: all 0.2s ease;
    	-ms-transition: all 0.2s ease;
    	transition: all 0.2s ease;
}

.home_ROSET_graphical_grid_obj_b:hover {
	color: #cc00ff;
	border: 2px solid #cc00ff;
	transform: scale(1.05);
}

.image-container img {
    display: none;  /* Hide all images initially */
    opacity: 0;
    transition: opacity 1s ease-in-out;  /* Fade-in and fade-out animation */
}

.image-container img.show {
    display: block;  /* Show the image when it has the 'show' class */
    opacity: 1;
}

.image-container img.fade-out {
    opacity: 0;  /* Fade out effect */
}

#span_2{
 grid-column: span 2;
}

#home_API_pic {
	max-height: 400px; 
	margin-right: 50px;
}

#home_API_desc {
	font-size:22px; 
	padding-right:150px;
}



/* For Mobile */
@media screen and (max-width: 1000px) {
	
	#home_main_text {
		font-size: 45px;
	}
	.home_algo_glow_text {
		padding-top: 2px;
		font-size: 24px;

	}
	
	#algo_des {
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
	}
	
	.home_ROSET_graphical_grid {
		margin: 70px 0px;
		font-size: 20px;
  
	}
	
	#home_API_pic {
		max-height: auto; 
		max-width: 70%; 
		margin: 0px auto;
		margin-bottom: 15px;
	}

	#home_API_desc {
		font-size:20px; 
		text-align: center;
		margin: 0px auto;
		padding: 5px
	}
}

@media screen and (max-width: 700px) {
	
	#home_main_text {
		font-size: 40px;
	}
	.home_algo_glow_text {
		padding-top: 3px;
		font-size: 24px;
	}

	.home_ROSET_graphical_grid {
		margin: 10px 0px;
		font-size: 18px;
		grid-template-columns: repeat(2, 1fr); 
  
	}
	
	#home_main_image {
		width: 80px; 
    }

	#home_ROSET_graphical_grid_opensource {
		 grid-column: span 2;
	}
	
}

@media screen and (max-width: 500px) {
	#home_main_text {
		font-size: 32px;
	}
	
	.home_algo_glow_text {
		padding-top: 3px;
		font-size: 22px;
	}
	
	#home_algo_grid {
		margin: auto;
		max-width:220px;
		grid-template-columns: 1fr ;
	}
	
}

/* animations */
@keyframes fade_in_up {
        from {
			opacity: 0;
            transform: translate(0, 100px);
        }
        to {
			opacity: 1;
            transform: translate(0, 0px);
        }
 }
 
 @keyframes fade_in_right {
        from {
			opacity: 0;
            transform: translate(-100px, 0px);
        }
        to {
			opacity: 1;
            transform: translate(0px);
        }
 }
 
 @keyframes fade_in_left {
        from {
			opacity: 0;
           transform: translate(100px, 0px);
        }
        to {
			opacity: 1;
            transform: translate(0px);
        }
 }