* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
    --crimson: #b83556;
    --light-orange: #faded2;
    --white: #faf2ee;
	--light-pink: #ffe6f2;
	--baby-pink: #f9a5c5;
}

@font-face {
	font-family: 'Cormorant Garamond';
	src: url('CormorantGaramond-Bold.ttf') format('truetype');
}

@font-face {
	font-family: 'Poppins';
	src: url('Poppins-Regular.ttf') format('truetype');
}

h1, h2, h3 {
	font-family: 'Cormorant Garamond', serif;
}

body {
	font-family: 'Poppins', sans-serif;
	height: 100%;
	
	background: repeating-linear-gradient(
    90deg,
    var(--light-pink),
    var(--light-pink) 30px,
    var(--baby-pink) 30px,
    var(--baby-pink) 60px
	);   
}

header {
	background-color: var(--crimson);
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 1000;
}

nav {
	display: flex;
	align-items: center;
}

nav img {
	width: 6%;
}

nav a {
	color: var(--white);
	text-decoration: none;
	font-family: 'Poppins', sans-serif;
	font-weight: bold;
	padding: 10px 20px;
	border: 3px solid transparent;
	border-radius: 20px;
	font-size: 18px;
}

.left-nav, .right-nav {
	flex: 1;
	display: flex;
	justify-content: space-evenly;
}

.open {
	border: 3px solid white;
	border-radius: 20px;
	background-color: var(--light-orange);
	color: var(--crimson);
}

nav a:hover {
	border: 3px solid white;
	border-radius: 20px;
}

/** = HOME =========================================== **/

.home {	
	display: flex;
	flex-direction: column;
    justify-content: center;
	align-items: center;
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
	height: 450px;
	margin: 30px auto;
}

.hero img {
    border-radius: 30px;
    width: 70%;
}

.hero-content {
    position: relative;
    display: inline-block;
}

.badge {
    position: absolute;
    top: 10%;
    right: 10%;
}

.badge img {
	width: 200px;
}

.badge-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    color: var(--crimson);
    font-weight: bold;
    font-size: 28px;
    text-align: center;
}

.typing {
    position: relative;
    display: inline-block;
    height: 50px;
    min-width: 150px;
    overflow: hidden;
}

.typing span {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-70%);
    
	font-size: 24px;
    opacity: 0;				/* words will show sabay-sabay pag wala 'to*/
    animation: typingWords 6s infinite;
}

/* when susulpot yung words */
.typing span:nth-child(1) { animation-delay: 0s; }
.typing span:nth-child(2) { animation-delay: 2s; }
.typing span:nth-child(3) { animation-delay: 4s; }

@keyframes typingWords {
    0% {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    30% {
        opacity: 1;
    }
    40% {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    100% {
        opacity: 0;
    }
}

.introduction h2, .education h2 {
	text-align: center;
	margin-bottom: 10px;
	letter-spacing: 10px;
	color: var(--crimson);
}

.introduction {
	background-color: var(--white);
	text-align: center;
	padding: 20px 200px;
	border-top: 4px solid var(--crimson);
	border-bottom: 4px solid var(--crimson);
}

.introduction p, .education p {
	text-align: center;
	margin-bottom: 10px;
	font-size: 18px;
}

.intro-btn {
	background-color: var(--crimson);
	color: var(--white);
	text-decoration: none;
	padding: 5px 10px;
	border-radius: 10px;
	font-size: 18px;
	font-weight: bold;
	width: 250px;
	margin: 0 auto;
	
	display: flex;
	justify-content: center;
}

.intro-btn:hover {
	background-color: var(--light-orange);
	color: var(--crimson);
}

.education {
	background-color: var(--white);
	margin-top: 30px;
	padding: 20px 100px;
	border-top: 4px solid var(--crimson);
	
	display: flex;
	flex-direction: column;
	align-items: center;   
}

.education-row {
	width: 80%;
    margin: 30px auto;
	padding-top: 15px;
	
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
}

.education-row::before {
    content: "";
    position: absolute;
    width: 4px;
    background-color: var(--crimson);
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.education-column {
	width: 100%;
	
    display: flex;
    align-items: center; 
	position: relative;
}

.education-column.left {
    justify-content: flex-start;
}

.education-column.right {
    justify-content: flex-end;
}

.content {
	width: 40%;
    padding: 15px;
    background-color: var(--baby-pink) ;
    border-radius: 10px;
}

.content h3, .content p  {
	font-size: 18px;
	font-family: 'Poppins', sans-serif;
}

.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
	
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    width: 70px; 
    height: 70px;
	border-radius: 50%;
	border: 4px solid var(--crimson);
}

/**= ABOUT ========================================== **/

.about-me {
	width: 	100%;
	margin: 50px 0;
	
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 50px;
}

.about-photo img {
	width: 100%;
	max-width: 450px;
}

.about-text {
	background-color: var(--white);
	border: 5px solid var(--crimson);
	border-radius: 10px;
	padding: 20px;
	width: 100%;
	max-width: 600px;
}

.about-text h1 {
	text-align: center;
}

.about-text p {
	line-height: 1.5;
	font-size: 18px;
	margin-top: 10px;
}

.view-btn {
	background-color: var(--crimson);
	border-radius: 25px;
	font-weight: bold;
	color: var(--white);
	text-decoration: none;
	padding: 10px 15px;
	width: 40%;
	margin: 10px auto;
	
	display: flex;
	justify-content: center;
}

.view-btn:hover {
	background-color: var(--light-orange);
	color: var(--crimson);
}

.about-title, .projects-title, .demo-reel-title {
	background-color: var(--white);
	border-top: 4px solid var(--crimson);
	border-bottom: 4px solid var(--crimson);
	padding: 20px 80px;
	text-align: center;
	margin: 20px 0;
}

.certificates-row {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-bottom: 10px;
}

.certificates {
    width: 230px; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.certificates img {
	width: 100%;	
	border: 10px ridge var(--light-orange);
	margin-bottom: 5px;
}

.certificates h3 {
	background-color: var(--white);
	border: 2px solid var(--crimson);
	text-align: center;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	font-weight: 400;
	padding: 5px 10px;
	width: 100%;
	
	display: flex;
	flex-direction: column;
}

.issuer {
	font-size: 13px;
	font-weight: 600;
	margin-top: 5px;
}

.skills {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px 0;
}

.soft-skills, .technical-skills {
	background-color: var(--light-orange);
	flex: 1;
	margin: 0 5px;
	padding: 10px;
	border: 4px solid var(--crimson);
	border-radius: 20px;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.skills h3 {
	color: var(--crimson);
	font-size: 25px;
}

/** = GALLERY ========================================== **/

.works {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 0 20px 20px 20px;
}

.demo-reel video {
	width: 50%;
	display: flex;
	align-items: center;
	margin: 0 auto;
	border-radius: 10px;
	border: 2px solid var(--crimson);
}

.projects img, .projects video{
	width: 50px;
}

.graphic-design, .branding, .video-editing {
	background-color: var(--light-orange);
	border: 2px solid var(--crimson);
	border-radius: 10px;
	width: 85%;
	padding: 20px;
	text-align: center
}

.project1, .project2, .project3 {
    display: flex;
    justify-content: space-between;
    gap: 5px;                     
    margin-top: 10px;
}

.banner {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 33%;
}

.banner img {
    width: 100%; 
    border-radius: 10px;
    border: 1.5px solid var(--crimson);
}

.poster {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
    width: 21%; 
}

.poster img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1.5px solid var(--crimson);
}

.logo-school {
	display: flex;
    flex-direction: column;
    gap: 15px;
    width: 24%;
}

.logo-school img {
    width: 100%; 
    border-radius: 10px;
    border: 1.5px solid var(--crimson);
}

.mock-up {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
    width: 24%; 
}

.mock-up img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1.5px solid var(--crimson);
}

.project3 video {
    width: 50%;
    border-radius: 10px;
	border: 1.5px solid var(--crimson);
	
	display: flex;
	align-items: center;
}

.vid1 {
	width: 100%;
	margin: auto 0;
}

.graphic-design h2, .branding h2, .video-editing h2 {
    margin-top: 0;
	text-align: center;
}

/** = CONTACT ========================================== **/

.contact {
    display: flex;
    justify-content: center;
    gap: 80px;
    max-width: 90%;
    margin: 0 auto;
    padding: 50px 20px;
     flex-wrap: wrap;
}

.left-content {
    text-align: center;
    width: 30%;
	
	display: flex;
	flex-direction: column;
}

.left-content h2, .right-content h2 {
    background-color: var(--light-orange);
    padding: 25px 40px 0 40px;
    text-align: center;
}

.left-content p, .right-content p {
    background-color: var(--light-orange);
    padding: 0 40px 25px 40px;
    text-align: center;
}

.social-links, .resume {
    margin-bottom: 30px;
	background-color: var(--light-orange);
	border: 2px solid var(--crimson);
}

.social {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 25px;
    padding: 0 30px;
    text-align: center;
}

.social a {
    text-decoration: none;
    color: var(--crimson);
    font-weight: bold;
	
    display: flex;       
    align-items: center;
    gap: 10px;
}

.social a:hover {
	color: black;
}

.social img {
    width: 40px;
    border-radius: 5px;
    background-color: white;
	border: 1.5px solid var(--crimson);
}

.resume-btn {
    display: flex;
	justify-content: center;
	margin: 0 auto;
	width: 80%;
    background-color: white;
    border: 2px solid var(--crimson);
    color: var(--crimson);
    padding: 12px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
	margin-bottom: 25px;
}

.resume-btn:hover {
	background-color: var(--crimson);
	color: var(--white);
}

.right-content {
    text-align: center;
    flex: 3;
}

.right-title {
	border: 2px solid var(--crimson);
	margin-bottom: 5px;
}

.form {
    background-color: var(--white);
    border: 3px solid var(--crimson);
    border-radius: 20px;
	padding: 30px;
	width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.form form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.form input, .form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var(--crimson);
	border-radius: 10px;
}

.form textarea {
	min-height: 120px;
	resize: none;
}

.send-btn {
    background-color: var(--crimson);
	border: 2px solid var(--crimson);
    color: var(--white);
    padding: 10px;
    border-radius: 25px;
	font-weight: bold;
	font-family: "Poppins", sans-serif;
	letter-spacing: 3px;
	font-size: 15px;
	cursor: pointer;
}

.send-btn:hover {
	border: 2px solid var(--crimson);
	background-color: var(--light-orange);
    color: var(--crimson);
}

/** = FOOTER =========================================== **/

footer {
	background-color: var(--crimson);
	color: var(--white);
	font-family: 'Poppins-Regular', sans-serif;
	font-weight: bold;
	
	padding: 0 20px;
	display: flex;
}

.left-footer {
	flex: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-left: 100px;
	font-size: 18px;
}

.right-footer {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	margin-right: 65px;
}

.right-footer img {
	height: 40px;
	border-radius: 25%;
	margin: 10px 15px;
}

.center-footer {
	flex: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	height: 50px;
}

/** = MEDIA QUERY =========================================== **/
/*== LAPTOP (1025px - 1440px) =====*/
@media (min-width: 1025px) and (max-width: 1440px) {
    header {
        padding: 0 50px;
    }

    nav {
        max-width: 1200px;
        margin: 0 auto;
    }
	
    .hero img {
        width: 60%;
    }
	
	.hero-content {
		display: flex;
		justify-content: center;
		margin: 0 auto;
    }

    .badge {
        top: -5%;
        right: 15%;
    }

    .badge img {
        width: 170px; 
    }

    .badge-content {
        font-size: 22px;
    }

    .introduction {
        padding: 30px 150px; 
    }

    .about-text {
        width: 60%;
    }
}

/*== TABLET (<= 1024px) =====*/
@media (max-width: 1024px) {
    nav {
        padding: 10px 20px;
    }

    nav img {
        width: 80px; 
        height: auto;
    }

    nav a {
        font-size: 16px;
        padding: 8px 15px;
    }
	
    .hero {
        height: auto; 
        margin: 20px auto;
        padding: 0 20px;
    }

    .hero img {
        width: 100%;
    }

    .badge {
		top: -2%;
		right: -2%;
	}

    .badge img {
        width: 150px; 
    }

    .badge-content {
        font-size: 20px; 
    }
    
    .typing span {
        font-size: 18px;
    }

    .introduction {
        padding: 20px 80px;
    }

    .education {
        padding: 20px 50px;
    }
	
	/*------------------------------------------*/

    .about-me {
        text-align: center;
		margin: 20px auto;
		gap: 15px;
		width: 90%;
    }

    .about-text {
        width: 90%;
    }
	
	.about-text h1 {
		font-size: 24px;
	}
	
	.about-title h2 {
		font-size: 20px;
	}
	
	.about-text p, .about-title p {
		font-size: 14px;
	}
	
	.view-btn {
		font-size: 14px;
		width: 65%;
	}

    .certificates-row {
        flex-wrap: wrap;
    }
	
	.soft-skills h3, .technical-skills h3 {
		font-size: 18px;
		text-align: center;
	}
	
	.soft-skills ul, .technical-skills ul {
		font-size: 14px;
		margin-left: 10px;
	}
	
	/* -----------------------------------------*/
	
	.projects-title, .demo-reel-title {
		padding: 20px;
		text-align: center;
		font-size: 12px;
	}
	
	.graphic-design h2, .branding h2, .video-editing h2 {
		font-size: 18px;
	}
	
	.graphic-design p, .branding p, .video-editing p {
		font-size: 12px;
	}
	
	/* ---------------------------------------------- */

    .contact {
        flex-direction: row;
        padding: 10px;
		gap: 15px;
    }
		
	.contact h2 {
		padding: 10px;
		font-size: 18px;
	}
	
	.contact p {
		font-size: 12px;
		padding: 10px;
	}
	
	.social-links p {
		margin-bottom: 10px;;
	}
	
	.social {
		padding-left: 15px;
		margin-bottom: 10px;
	}
	
	.social a {
		font-size: 10px;
	}
	
	.resume h2, .social-links h2, .right-title h2{
		padding-bottom: 0;
	}
		
	.resume-btn {
		font-size: 14px;
		width: 60%;
		margin: 0 auto 10px auto;
	}
	
	.send-btn {
		font-size: 14px;
		width: 80%;
		margin: 0 auto;
	}
}

/*== MOBILE (<= 600px) =====*/

@media (max-width: 600px) {
    nav {
        flex-direction: row; 
        justify-content: center;
        gap: 5px;
        padding: 5px 5px;
    }

    nav img {
        width: 40px; 
    }

    .left-nav, .right-nav {
        flex-direction: row;
        gap: 3px;
    }

    nav a {
        font-size: 12px;
        padding: 5px 8px;
    }

    .hero img {
        width: 100%;
    }

    .badge {
		top: -8%;
		right: -8%;
	}

    .badge img {
        width: 100px; 
    }

    .badge-content {
        font-size: 12px; 
    }

    .typing {
        height: 30px; 
        min-width: 100px;
    }

    .typing span {
        font-size: 12px; 
    }

    .introduction, .education {
        padding: 15px 20px;
		font-size: 10px;
    }
	
	.introduction p, .education p {
		font-size: 12px;
    }
	
	.intro-btn {
		font-size: 14px;
	}

    .education-row::before {
        display: none; 
    }

	.education-row {
		margin: 10px 0;
		padding: 0;
	}

    .education-column {
        flex-direction: column; 
        align-items: center;
        text-align: center;
    }

    .logo {
        position: static; 
        transform: none; 
        margin-bottom: 15px; 
    }

    .logo img {
        width: 100px; 
		height: 100px; 
    }

    .content {
        width: 90%; 
    }
	
	.content h3 {
		font-size: 14px;
	}
	/*---------------------*/

    .about-photo img {
        width: 70%;
    }
	
	.about-me {
		margin: 10px auto;
		gap: 10px;
		display: flex;
		flex-direction: column;
	}

    .about-text {
        width: 85%;
		margin-top: 0;
    }
	
	.about h1, .about h2, .about h3 {
		font-size: 22px;
	}
	
	.about p {
		font-size: 14px;
	}
	
	.view-btn {
		font-size: 14px;
		width: 65%;
	}
	
	.about-title {
		padding: 20px;
	}
	
	.certificates-row img {
		width: 95%;
	}
	
	.certificates-row h3, .certificates-row span {
		font-size: 14px;
	}
	
	.soft-skills h3, .technical-skills h3 {
		font-size: 18px;
		text-align: center;
	}
	
	.soft-skills ul, .technical-skills ul {
		font-size: 14px;
		margin-left: 10px;
	}
	
	/* -------------------------------------------*/

    .works {
        flex-direction: column;
        align-items: center;
    }
	
	.projects-title, .demo-reel-title {
		padding: 20px;
		text-align: center;
		font-size: 12px;
	}

    .graphic-design, .branding, .video-editing {
        width: 90%;
    }

    .demo-reel video {
        width: 90%;
    }
		
	.project1, .project2, .project3 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;                     
	}

	.banner {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 100%;
	}

	.banner img {
		width: 100%; 
		border-radius: 10px;
		border: 1.5px solid var(--crimson);
	}

	.poster {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 100%; 
	}

	.poster img {
		width: 100%;
		height: auto;
		border-radius: 10px;
		border: 1.5px solid var(--crimson);
	}

	.logo-school {
		display: flex;
		flex-direction: column;
		gap: 5px;
		width: 100%;
	}

	.logo-school img {
		width: 100%; 
		border-radius: 10px;
		border: 1.5px solid var(--crimson);
	}

	.mock-up {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 100%; 
	}

	.mock-up img {
		width: 100%;
		height: auto;
		border-radius: 10px;
		border: 1.5px solid var(--crimson);
	}

	.project3 video {
		width: 100%;
		border-radius: 10px;
		border: 1.5px solid var(--crimson);
		
		display: flex;
		align-items: center;
	}

	.vid1 {
		width: 100%;
		margin: auto 0;
	}
	
	.graphic-design h2, .branding h2, .video-editing h2 {
		font-size: 18px;
	}
	
	.graphic-design p, .branding p, .video-editing p {
		font-size: 12px;
	}

	/* --------------------------------------- */
		
	.contact {
		flex-direction: column;
		align-items: center;
		padding: 10px;
		margin: 0 auto;
		gap: 0;
	}
	
	.left-content {
		width: 80%;
	}
	
	.contact h2 {
		padding: 10px;
		font-size: 18px;
	}
	
	.contact p {
		font-size: 12px;
		padding: 10px;
	}
	
	.social-links p {
		margin-bottom: 10px;;
	}
	
	.social {
		padding-left: 15px;
		margin-bottom: 10px;
	}
	
	.social a {
		font-size: 10px;
		overflow-wrap: break-word; 
		text-align: left;
	}
	
	.resume h2, .social-links h2, .right-title h2{
		padding-bottom: 0;
	}
	
	
	.resume-btn {
		font-size: 14px;
		width: 60%;
		margin: 10px auto;
	}
	
	.send-btn {
		font-size: 14px;
		width: 80%;
		margin: 0 auto;
	}

	/* ---------------------------------*/

    footer {
        flex-direction: column;
        text-align: center;
		justify-content: center;
    }

    .left-footer, .right-footer{
        margin: 10px auto 0 auto;
		font-size: 16px;
    }
	
	.right-footer img {
		width: 30px;
		height: 30px;
		margin: 0 10px 10px 10px;
	}
	
	.center-footer {
		margin: 10px 0;
		font-size: 16px;
	}
}