body {
	margin: 0;
	padding: 0;
	background: #000;
	min-width: 280px;
	width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
	flex-direction: column;
    overflow-x: hidden;
	
}

h1 {
	text-lign: center;
	font-size: 72px;
	color: #17db4e;
}
h2 {
	text-lign: center;
	font-size: 50px;
	color: #17db4e;
}
h3 {
	text-lign: center;
	font-size: 24px;
	color: #17db4e;
}
p {
	font-size: 16px;
}

hr {
	width: 100%;
	border-style: outset;
	border-width:3px;	
	border-color: #17db4e;
}


					/* Start of header */

header {
	display: flex;
	flex-direction: row-reverse;
	column-gap: 10px;
	padding: 0;
	position: fixed;
	right: 0;
	width: fit-content;
	z-index: 1;
}

header nav {
	width: fit-content;
	padding: 0;
}

header nav ul li{
	background-color: #11823b;
	padding: 2px 10px;
	margin: 3px;
	box-shadow: 0 2px 8px 0 #afaeae;
	width: fit-content;
	border-radius: 20px;
	display: inline-block;
	float: right;
	box-shadow: none;
	color: #fff;
}

#prof-nav{
	background: none;
}

#prof-nav:hover {
	animation-name: none;
	opacity: 50%;
}

header nav ul li:hover {
	animation-name: bg-hover;
	animation-duration: .75s;
}

header nav ul li a{
	background: none;
	text-decoration: none;
	color: #fff;
}


@keyframes bg-hover {
	0 {background-color: #11823b; color: #fff;
		padding: 2px 10px;}
	50% {background-color: #004d25; color:    
		padding: 4px 14px;}
	100% {background-color: #11823b; color: #fff;
		padding: 2px 10px;}
}

.profile-nav {
	padding: 0;
	margin: 0;	
	
	img {
		width: 40px;
		height: 40px;
		border-radius:  20px;
		padding: 0;
		margin: 0;
	}
}

					/* End of header */
					
					/* Start of main */
					
		
main {	
	min-height: fit-content;
	height: 100%;
	width: 100%;
	min-width: fit-content;
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;	
		
		/* Start of main profile */
		
	#profile {
		min-height: 820px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		align-items: center;
		z-index: 0;
		
		.left-profile {
			min-width: 240px;
			width: 50%;
			padding: 50px;
			display: block;
			text-align: right;
			
			h1 {
				margin-top: 0;
			}
			
			div {
				height: 100px;
				margin: 0;
				padding: 10 20px;
				display: inline-flex;
				flex-direction: column;
				
				h2 {
					margin: 0;
					display: inline;
					gap: 20px;
					color: #fff;
				}
				
				h3 {
					margin-top: 10px;
					display: inline;
				}
			}
		}
			
		.right-profile {
			width: auto;
			padding: 50px;
			
			img {
				width: 280px;
				height: 280px;
				border-radius: 250px;
			}
		}
	}
	@media screen and (max-width: 980px) {
		#profile {   
			flex-direction: column;
		
			.left-profile {
				text-align: center;
			}
		}
	}
	
					/* End of main profile */
					
					/* Start of main experience */
					
	#experience {
		min-height: 820px;
		min-width: 320px;
		text-align: center;
		color: #17db4e;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
	
		.experience-header {
			padding: 20px;
		}
	
		.experience-content {
			padding: 20px;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			column-gap: 50px;
			color: #fff;
		
			.experience-content-left  {
				padding: 20px;
				height: fit-content;
				display: inline-flex;
				flex-direction: column;
				row-gap: 50px;
			
				p {
					height: fit-content;
					max-width: 400px;
					text-align: center;
				}
			
				.experience-contents-mpv  {
					height: fit-content;
					display: inline-flex;
					flex-direction: column;
	
					img {
						height: 50px;
						max-width: 280px;
						transition: height 1s, max-width 1s;
					}
	
					img:hover {
						height: 60px;
						max-width: 290px;
					}
				}
			}
			.mvp-id {
				padding: 20px;
		
				img {
					height: 320px;
					width: 200px;
					transition: height .75s, width .75s;
				}
	
				img:hover {
					height: 340px;
					width: 220px;
				}
			}
		}
		.experience-contents-proj {
			margin-top: 50px;
			padding: 20px;
			min-width: 280px;
			display: flex;
			flex-direction: column;
		
			h3 {
				padding-bottom: 0;
			}
	
			ul {
				padding: 0;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				height: 200px;

		
				li {
					list-style: none;
					min-width: 280px;
					
					a {
						margin-top: 30px;
				
						img {
							min-height: 50px;
							max-width: 100px;
							transition:  min-height 1s, max-width 1s;
						}
	
						img:hover {
							min-height: 80px;
							max-width: 180px;
						}
					}
				}
			}
		}
	}
	@media screen and (max-width: 780px) {
		.experience-content {
			flex-direction: column;
		}
		.mvp-id {
			display: none;
		}
	}
					/* End of main Experience */		
	
							
					/* Start of main Tech Skills */

	#skills {
		margin-top: 50px;
		padding: 50px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
		color: #fff;
		
		.skills-header {
			color: #17db4e;
			text-align: center;
		}

		.skills-contents {
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			width: 100%;
			gap: 20px;
			align-items: center;
	
			h3 {
				color: #17db4e;
			}
	
			.skills-contents-nocode {
				display: inline-flex;
				flex-wrap: wrap;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				gap: 20px;
				padding: 20px;
		
	
				img {
					width: 300px;
					height: 200px;
				}
				ul {
					display: inline-flex;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
					row-gap: 20px;
					width: 400px;
				}
			}	
			.skills-contents-hardcode {
				background-image: radial-gradient(farthest-side at 50% 50%, #004d25, #000);
				display: inline-flex;
				flex-wrap: wrap;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 20px;
				padding: 20px;
		
				ul {
					display: inline-flex;
					flex-wrap: wrap;
					flex-direction: column;
					justify-content: center;
					row-gap: 20px;
				}
			}		
		}
	}
						/* End of mvp main Tech Skills */
						
						/* Start of mvp main Education */
						
	#education {
		color: #fff;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		
		.education-header {
			text-align: center;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
	
		}
		
		.education-content {
			align-item: center;
			width: fit-content;
			justify-content: center;
			display: flex;
			padding: 50px;
			
			img {
				width: 300px;
				height: 300px;
				border-radius: 300px;
				transition: transform 3s;
			}
			img:hover {
				transform: rotateY(360deg);
			}
		}
	}
	
						/* End of mvp main Education */
						
						/* Start of main Certificates */
						
	#certificates{
		text-align: center;
		min-height: 820px;
		
		.certificates-header {
			background: #fff;
		}
		
		.certificates-content {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-content: center;
			
			.certificates-content-gallery-list {
				padding: 10px;
				margin: 30px;
				max-width: 720px;
						
				img {
					opacity: 0.8;
					padding: 10px;
					cursor: pointer;
					max-width: 200px;
					max-height: 150px;
				}
				
				img:hover {
					opacity: 1;
				}
					
			}
			
			.image-modal {
				display: none;
				position: fixed;
				z-index: 1;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: #000;
				background: rgb(0, 0, 0, 0.4);
				
				.modal-content {
					background-color: #fefefe;
					margin: 5% auto;
					padding: 15px 20px;
					border: 1px solid #888;
					width: 50%;
					border-radius: 10px;
					display: flex;
					flex-direction: column;
					align-items: center;
					
					.modal-header {
						position: absolute;
						right: 20%;
						top: 5%;
						align-self: right;
						background: #fff;
						border-radius: 100%;
					
						.close-modal {
							padding: 10px 10px;
							color: #ff8888;
							font-size: 35px;
							cursor: pointer;
						}
					}
					img {
						width: 100%;
						padding: 10px 10px;
						color: #00bb00;
						font-size: 35px;
						cursor: pointer;
					}
				}
			}
		}
	}						
}
						/* End of mvp Main */

						
						/* The Matrix effects */
.matrix-container {
    position: relative;
	z-index: -1;
}
.matrix-column {
    position: absolute;
    top: 0;
    color: #0f0;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    animation: fall linear infinite;
    text-shadow: 0 5px 5px #0f0;
    width: auto;
}

@keyframes fall {
    0% {
        transform: translateY(-100%);
        
    }
    50% {
        opacity: 100%;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* Fade-out gradient overlay */

.matrix-column::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90%;
    height: 30%;
    background: linear-gradient(to bottom, transparent 0%, black 100%);
    pointer-events: none;
}

.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 90%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 255, 0, 0.1) 0%,
        rgba(0, 255, 0, 0.1) 3%,
        transparent 3%,
        transparent 97%,
        rgba(0, 255, 0, 0.1) 97%,
        rgba(0, 255, 0, 0.1) 100%
    );
    background-size: 90% 0;
}