/* General Demo Style */



/* Tailwind CSS Font Size Variables */
:root {
	--font-xs: 0.9rem;
	--font-sm: 1rem;
	--font-base: 1.2rem;
	--font-md: 1.5rem;
	--font-lg: 2rem;
	--font-illu-xs: 1.2rem;
	--font-illu-sm: 1.5rem;
	--font-illu-base: 2rem;
	--font-illu-md: 2.5rem;
	--font-illu-lg: 3rem;

	--color-body-text: #d0d0d0;
	--color-body-background: #232323;
	--color-mode-design: #8b93ff;
	--color-mode-design-dark: #0a051ec2;
	--color-highlight-mode-design: #360eff;
	--color-mode-design-light: #b7bdff;
	--color-mode-illu: #ffda47;
	--color-meta-label: #464088;
}

@font-face {
	font-family: 'codropsicons';
	src:url('../collab/fonts/codropsicons/codropsicons.eot');
	src:url('../collab/fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../collab/fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../collab/fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../collab/fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
	font-weight: normal;
	font-style: normal;
}

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html {padding: 0; margin: 0;}

/* Main Container */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	background: var(--color-body-background);
}
.container-illustrations {
	background: var(--color-body-background);
	color: rgba(0, 0, 0, 0) !important;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: flex; }
.clearfix:after { clear: both; }

body {
	font-family: 'Caudex', serif;
	background: var(--color-body-background);
	color: var(--color-body-text);
}

a {
	color: var(--color-body-background);
	text-decoration: none;
}

a:hover,
a:active {
	 color: var(--color-mode-design);
}

/* Header Style */
.container > header {
	margin: 3 auto;
}

.container > header {
	text-align: center;
}

@media screen and (max-width: 768px) {
	.container {
		padding: 0 1em;
	}
	
	.container > header {
		padding: 1em;
	}
}

@media screen and (max-width: 480px) {
	.container {
		padding: 0 0.5em;
	}
	
	.container > header {
		padding: 0.5em;
	}
}

/* Topbar Navigation Style */

.nav-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo-container {
	flex-shrink: 0;
}

.logo-container img {
	max-height: 50px;
	width: auto;
	transition: opacity 0.3s ease;
}

.logo-container img:hover {
	opacity: 0.8;
}

.nav-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 2em;
	align-items: center;
}


/* Content Styles */
.content {
	margin: 0 auto;
}

.about-content,
.projects-content,
.contact-content {
	color: var(--color-text);
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 1em;
	margin: 0;
	font-size: var(--font-base);

}

.about-content h2,
.projects-content h2,
.contact-content h2 {
	color: #1e1e1e;
	font-size: var(--font-lg);
	margin-bottom: 1em;
	font-weight: var(--font-light);
}

.about-content h3,
.projects-content h3,
.contact-content h3 {
	color: #000000;
	font-size: var(--text-2xl);
	margin: 1.5em 0 0.5em 0;
	font-weight: var(--font-normal);
}

.about-content p,
.projects-content p,
.contact-content p {
	line-height: var(--leading-loose);
	margin-bottom: 1em;
	color: var(--color-body-text);
	font-size: var(--text-xl);
}

.project-link {
	display: inline-block;
	padding: 12px 24px;
	background: #CEE5FF;
	color: #282D46;
	text-decoration: none;
	border-radius: 99px;
	font-size: var(--text-xl);
	transition: background 0.3s ease, color 0.3s ease;
	font-weight: var(--font-normal);
}

.project-link:hover {
	background: #0092D1;
	color: #FFFFFF;
}

.about-content ul {
	padding-left: 1.5em;
}

.about-content li {
	margin-bottom: 0.5em;
	color: #555;
}

.contact-info,
.social-links,
.contact-cta {
	margin: 0;
	padding: 0;
	border-radius: 5px;
}

.contact-info a,
.social-links a {
	color: var(--color-mode-illu);
	text-decoration: none;
}

.contact-info a:hover,
.social-links a:hover {
	color: var(--color-mode-illu);
	text-decoration: underline;
}

.contact-button {
	display: flex;
	padding: 0.8em 1.5em;
	background: var(--color-mode-illu);
	color: #fff !important;
	text-decoration: none;
	border-radius: 5px;
	font-weight: var(--font-medium);
	font-size: var(--text-base);
	transition: background 0.3s ease;
}

.contact-button:hover {
	background: var(--color-mode-illu);
	text-decoration: none;
}

.container > header h1 {
	font-size: var(--text-4xl);
	line-height: var(--leading-tight);
	margin: 0;
	font-weight: var(--font-light);
}

.container > header span {
	display: flex;
	font-size: 60%;
	opacity: 0.8;
	padding: 0 0 0.6em 0.1em;
}

/* To Navigation Style */
.codrops-top {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
	width: 100%;
	font-size: 0.69em;
	line-height: 2.2;
}

.codrops-top a {
	padding: 0 1em;
	letter-spacing: 0.1em;
	color: #6b7381;
	display: flex;
}

.codrops-top a:hover {
	color: #424b5a;
	background: rgba(255,255,255,1);
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: flex;
}

.codrops-icon:before {
	font-family: 'codropsicons';
	margin: 0 4px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
	content: "\e001";
}

.codrops-icon-prev:before {
	content: "\e004";
}

/* Demo Buttons Style 

.button1 {
    display: inline-block;
    background-color: red;
    color: white;
  }

  .button2 {
    display: inline-block;
    background-color: blue;
    color: white;
  }
*/
.menu0 {
    font-family: courier new;
	font-size: var(--text-lg);
    align-content: center;
    border: none;
    background-color: white;    
}

.menu0 a {
	display: flex;
	margin: 0.3em;
	padding: 0.3em 1.1em;
	border: 2px solid #aaa;
	color: #777;
	font-weight: var(--font-medium);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.menu0 a:hover,
.menu0 a.current-demo,
.menu0 a.current-demo:hover {
	opacity: 0.6;
}
.menu1 {
    font-family: courier new;
	font-size: var(--text-lg);
    align-content: center;
    border: none;
    background-color: white;    
}

.menu1 a {
	display: flex;
	margin: 0.3em;
	padding: 0.3em 1.1em;
	border: 2px solid #00cccc;
	color: #009999;
	font-weight: var(--font-medium);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.menu1 a:hover,
.menu1 a.current-demo,
.menu1 a.current-demo:hover {
	opacity: 0.6;
}


.menu2 {
    font-family: courier new;
	font-size: var(--text-lg);
    align-content: center;
    border: none;
    background-color: white;
}

.menu2 a {
	display: flex;
	margin: 0.3em;
	padding: 0.3em 1.1em;
	border: 2px solid #ff6b4f;
	color: #ff6b4f;
	font-weight: var(--font-medium);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.menu2 a:hover,
.menu2 a.current-demo,
.menu2 a.current-demo:hover {
	opacity: 0.6;
}



.menu3 {
    font-family: courier new;
	font-size: var(--text-lg);
    align-content: center;
    border: none;
    background-color: white;
}

.menu3 a {
	display: flex;
	margin: 0.3em;
	padding: 0.3em 1.1em;
	border: 2px solid var(--color-mode-design);
	color: var(--color-mode-design);
	font-weight: var(--font-medium);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.menu3 a:hover,
.menu3 a.current-demo,
.menu3 a.current-demo:hover {
	opacity: 0.6;
}


/* BEGINNING OF BUTTON */
.button--janus {
	font-family: freight-display-pro, serif;
	font-weight: 900;
	width: 175px;
	height: 120px;
	color: #fff;
	background: none;
}

.button--janus::before {
	content: '';
	background: var(--color-body-background);
	-webkit-clip-path: path("M154.5,88.5 C131,113.5 62.5,110 30,89.5 C-2.5,69 -3.5,42 4.5,25.5 C12.5,9 33.5,-6 85,3.5 C136.5,13 178,63.5 154.5,88.5 Z");
	clip-path: path("M154.5,88.5 C131,113.5 62.5,110 30,89.5 C-2.5,69 -3.5,42 4.5,25.5 C12.5,9 33.5,-6 85,3.5 C136.5,13 178,63.5 154.5,88.5 Z");
	transition: clip-path 0.5s cubic-bezier(0.585, 2.5, 0.645, 0.55), -webkit-clip-path 0.5s cubic-bezier(0.585, 2.5, 0.645, 0.55), background 0.5s ease;
}

.button--janus:hover::before {
	background: #000;
	-webkit-clip-path: path("M143,77 C117,96 74,100.5 45.5,91.5 C17,82.5 -10.5,57 5.5,31.5 C21.5,6 79,-5.5 130.5,4 C182,13.5 169,58 143,77 Z");
	clip-path: path("M143,77 C117,96 74,100.5 45.5,91.5 C17,82.5 -10.5,57 5.5,31.5 C21.5,6 79,-5.5 130.5,4 C182,13.5 169,58 143,77 Z");
}

.button--janus::after {
	content: '';
	height: 86%;
	width: 97%;
	top: 5%;
	border-radius: 58% 42% 55% 45% / 56% 45% 55% 44%;
	border: 1px solid #000;
	transform: rotate(-20deg);
	z-index: -1;
	transition: transform 0.5s cubic-bezier(0.585, 2.5, 0.645, 0.55);
}

.button--janus:hover::after {
	transform: translate3d(0,-5px,0);
}

.button--janus span {
	display: flex;
	transition: transform 0.3s ease;
	mix-blend-mode: difference;
}

.button--janus:hover span {
	transform: translate3d(0,-10px,0);
}

/*END OF BUTTON*/

@media screen and (max-width: 25em) {

	.codrops-icon span {
		display: none;
	}

}

/* Responsive Navigation */
@media screen and (max-width: 69em) {
	.nav-links {
		gap: 1.5em;
	}
	
	.nav-links a {
		font-size: var(--text-sm);
		padding: 0.4em 0.8em;
	}
}

@media screen and (max-width: 768px) {
	.nav-container {
		flex-direction: column;
		gap: 1em;
	}
	
	.logo-container {
		order: 1;
	}
	
	.nav-links {
		order: 2;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1em;
	}
	
	.nav-links a {
		font-size: var(--text-sm);
		padding: 0.3em 0.6em;
	}
	
	.content {
		margin: 1em auto;
	}
	
	.about-content,
	.projects-content,
	.contact-content {
		padding: 0;
	}
	
	.about-content h2,
	.projects-content h2,
	.contact-content h2 {
		font-size: var(--text-2xl);
	}
}

@media screen and (max-width: 480px) {
	
	.logo-container img {
		max-height: 40px;
	}
	
	.nav-links {
		gap: 0.5em;
	}
	
	.nav-links a {
		font-size: var(--text-xs);
		padding: 0.3em 0.5em;
	}
	
	.content {
		margin: 0.5em auto;
	}
	
	.about-content,
	.projects-content,
	.contact-content {
		padding-left: 0;
	}
	
	.about-content h2,
	.projects-content h2,
	.contact-content h2 {
		font-size: var(--text-xl);
	}
	
	.about-content h3,
	.projects-content h3,
	.contact-content h3 {
		font-size: var(--text-lg);
	}
}