@charset "UTF-8";
#homepage_contents {
	position: absolute;
	top: 70px;
	width: 1280px;
	height: 800px;
}

.container { 
	position: relative;
	overflow: hidden;
    width: 100%;
    height: 800px;
}

.container .slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 500%;
	height: 800px;
	animation: animate 20s linear infinite;
}

.container .slider .slide {
	position: relative;
	width: 20%;
	height: 800px;
	float: left;
}

.container .slider .slide.slide1 {
	background: url("../Images/Slider/Generative-Design_Slideshow-Image.png");
	background-size: cover;
	background-position: center;
}

.container .slider .slide.slide2 {
	background: url("../Images/Slider/Design-for-Advocacy_Slideshow-Image.png");
	background-size: cover;
	background-position: center;
}

.container .slider .slide.slide3 {
	background: url("../Images/Slider/Nebulae_Slideshow-Image.png");
	background-size: cover;
	background-position: center;
}

.container .slider .slide.slide4 {
	background: url("../Images/Slider/Anomaly_Blackholes_Slideshow-Image.png");
	background-size: cover;
	background-position: center;
}

@keyframes animate {
	0%{
	    left: 0;
	}
	20%{
		left: 0;
	}
	25%{
		left: -100%;
	}
	45%{
		left: -100%;
	}
	50%{
		left: -200%;
	}
	70%{
		left: -200%;
	}
	75%{
		left: -300%;
	}
	95%{
		left: -300%;
	}
	100%{
		left: -400%;
	}
}

#about_page_contents {
	position: absolute;
	top: 70px;
	width: 1280px;
	height: 800px;
}

.text {
	position: absolute;
	top: -11px;
	right: 11px;
}

.hero_image {
	position: absolute;
	top: 80px;
	right: 30px;
	width: 500px;
	height: 238px;
	overflow: hidden;
	cursor: pointer;
}

.hero_image:hover .hero_image_border {
	bottom: 0px;
	transition: 400ms;
}

.hero_image_border {
	position: absolute;
	bottom: -30px;
	width: 500px;
	height: 30px;
	background-color: rgba(255, 255, 255, 0.5);
	display: flex;
    align-items: center;
	justify-content: flex-start;
	font-family: quasimoda, sans-serif;
    font-size: 14px;
    font-style: normal;
	font-weight: 200;
	transition: 400ms;
}

.hero_image1 {
	position: absolute;
	top: 330px;
	right: 0px;
	width: 275px;
	height: 275px;
	overflow: hidden;
	cursor: pointer;
}

.hero_image1:hover .hero_image1_border {
	bottom: 0px;
	transition: 400ms;
}

.hero_image1_border {
	position: absolute;
	bottom: -30px;
	width: 275px;
	height: 30px;
	background-color: rgba(255, 255, 255, 0.5);
	display: flex;
    align-items: center;
	justify-content: flex-start;
	font-family: quasimoda, sans-serif;
    font-size: 14px;
    font-style: normal;
	font-weight: 200;
	transition: 400ms;
}

.hero_image2 {
	position: absolute;
	top: 330px;
	right: 285px;
	width: 275px;
	height: 389px;
	overflow: hidden;
	cursor: pointer;
}

.hero_image2:hover .hero_image2_border {
	bottom: 0px;
	transition: 400ms;
}

.hero_image2_border {
	position: absolute;
	bottom: -30px;
	width: 275px;
	height: 30px;
	background-color: rgba(255, 255, 255, 0.5);
	display: flex;
    align-items: center;
	justify-content: flex-start;
	font-family: quasimoda, sans-serif;
    font-size: 14px;
    font-style: normal;
	font-weight: 200;
	transition: 400ms;
}

.profile_image {
	position: absolute;
	top: 135px;
	left: 330px;
	background-image: url("../Images/Profile Image 5.png");
	width: 379px;
	height: 530px;
}

.pi_text {
	font-family: quasimoda, sans-serif;
    font-size: 14px;
    font-style: normal;
	font-weight: 200;
	line-height: 1.5em;
    color: rgba(0,0,0,1.00);
	position: absolute;
	top: 70px;
	left: 40px;
	width: 259px;
	cursor: text;
}

section { 
	position: absolute;
	bottom: 0px;
    width: 1280px;
    height: 800px;
}

section ul {
	display: flex;
}

section ul li {
	position: relative;
	left: 420px;
	font-family: quasimoda, sans-serif;
	font-style: normal;
	font-weight: 200;
	color: rgba(255,255,255,1.00);
	list-style: none;
	background: rgba(0,0,0,0.50);
	padding: 8px 20px;
	margin: 5px;
	cursor: pointer;
}

section ul li.active {
	background: rgba(0,0,0,1.00);
}

h1 {
	position: relative;
	top: -15px;
	height: 34px;
	font-family: quasimoda, sans-serif;
	font-style: normal;
	font-weight: 200;
	font-size: 20px;
	border-bottom: solid black 1px;
	margin-bottom: 18px;
	cursor: text;
}

.graphic_design {
	position: absolute;
	bottom: 0px;
    width: 1280px;
    height: 735px;
	background-color: rgba(255,255,255,1.00);
}

.items1 {
	position: absolute;
	top: 92.5px;
	width: 300px;
	height: 425px;
	border: none;
}

.img1 {
	left: 50%;
	transform: translateX(-175%);
	border: none;
}

.experimental_format {
	cursor: pointer;
}

.design_for_advocacy {
	cursor: pointer;
}

.typography {
	cursor: pointer;
}

.img_text {
	position: relative;
	top: -28px;
	font-family: quasimoda, sans-serif;
	font-style: normal;
	font-weight: 200;
	font-size: 14px;
	cursor: text;
}

.img2 {
	left: 50%;
	transform: translateX(-50%);
}

.img3 {
	left: 50%;
	transform: translateX(75%);
}

.graphic_design_gallery {
	position: absolute;
	top: 600px;
	left: 50%;
	transform: translateX(-50%);
	font-family: quasimoda, sans-serif;
	font-style: normal;
	font-weight: 200;
	font-size: 17px;
	cursor: pointer;
}

.generative_art {
	position: absolute;
	bottom: 0px;
    width: 1280px;
    height: 735px;
	background-color: rgba(255,255,255,1.00);
}

.items2 {
	position: absolute;
	left: 150px;
	width: 152.5px;
	height: 95.5px;
}

.holder4 {
	position: absolute;
	top: 90px;
	right: 170px;
	width: 400px;
	height: 400px;
}

.ga_img1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 133.3px;
	height: auto;
}

.ga_img2 {
	position: absolute;
	top: 133.3px;
	left: 133.3px;
	width: 133.3px;
	height: auto;
}

.ga_img3 {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 133.3px;
	height: auto;
}

.ga_img4 {
	position: absolute;
	top: 133.3px;
	left: 0px;
	width: 133.3px;
	height: auto;
}

.ga_img5 {
	position: absolute;
	top: 0px;
	left: 133.3px;
	width: 133.3px;
	height: auto;
}

.ga_img6 {
	position: absolute;
	top: 133.3px;
	right: 0px;
	width: 133.3px;
	height: auto;
}

.ga_img7 {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 133.3px;
	height: auto;
}

.ga_img8 {
	position: absolute;
	bottom: 0px;
	left: 133.3px;
	width: 133.3px;
	height: auto;
}

.ga_img9 {
	position: absolute;
	bottom: 0px;
	right: 0px;
	width: 133.3px;
	height: auto;
}

.img4 {
	position: absolute;
	top: 100px;
	left: 207.5px;
	width: 533px;
	height: 400px;
}

.img5 {
	position: absolute;
	top: 100px;
	right: 207.5px;
	width: 322px;
	height: 220px;
	background-image: url("../Images/Generative Art/V2/Connecting_Dots-2-Code.png");
	background-color: rgba(0,0,0,0.05);
	background-blend-mode: multiply;
}

h2 {
	position: absolute;
	top: -165px;
	left: 10px;
	font-family: quasimoda, sans-serif;
	font-style: normal;
	font-weight: 100;
	font-size: 42px;
	line-height: 1.4;
	cursor: text;
}

.ga_text-box {
	position: absolute;
	top: 222px;
	left: 170px;
	width: 520px;
	height: 270px;
	border-top: solid thin #000000;
}

.ga_text {
	position: absolute;
	top: -25px;
	left: 10px;
	font-family: quasimoda, sans-serif;
	font-style: normal;
	font-weight: 200;
	font-size: 17px;
	cursor: text;
}

.ga_line-break {
	position: absolute;
	top: 160px;
	right: 160px;
	width: 540px;
	height: 265px;
	border-left: solid thin #000000;
}

.generative_art_gallery {
	position: absolute;
	top: 600px;
	left: 50%;
	transform: translateX(-50%);
	font-family: quasimoda, sans-serif;
	font-style: normal;
	font-weight: 200;
	font-size: 17px;
	cursor: pointer;
}

#contact_me_contents {
	position: absolute;
	top: 70px;
	width: 1280px;
	height: 800px;
}

.l::before {
	background-image: url("../Images/L.png");
	background-size: 2.6701px 11px;
	width: 2.6701px;
	height: 11px;
	display: inline-block;
	content: "";
	margin-bottom: -0.25px;
	margin-left: 1.25px;
}

.linkedin_logo-cont{font-family: quasimoda, sans-serif; font-size: 16px; font-style: normal; font-weight: 200; line-height: 1.5em; color: rgba(0,0,0,1.00); position: relative; top: 0px; width: 150px; text-align: center; cursor: text;}
.linkedin_logo {
	position: absolute;
	top: 275px;
	left: 415px;
	width: 150px;
	height: 150px;
	cursor: pointer;
}

.behance_logo-cont{font-family: quasimoda, sans-serif; font-size: 16px; font-style: normal; font-weight: 200; line-height: 1.5em; color: rgba(0,0,0,1.00); position: relative; top: 0px; width: 150px; text-align: center; cursor: text;}
.behance_logo {
	position: absolute;
	top: 275px;
	left: 715px;
	width: 150px;
	height: 150px;
	cursor: pointer;
}