:root {
	--primary: #7bee5e;
	--secondary: #77ca62;
	--foreground: #e2e2e2;
	--background: #0f0f0f;
	--fg: var(--foreground);
	--bg: var(--background);
	--text: var(--foreground);
	--disabled: #4b4b4b;
}

* {
	font-family: "Ioskeley Mono", monospace;
	/* font-family: "JetBrains Mono", monospace; */
}

body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	/* font-family: "JetBrains Mono", monospace; */
	font-family: "Ioskeley Mono", monospace;
	/* overflow-x: hidden; */
}
p,a {
	font-size: 1.1rem;
	font-weight: 400;
}
a {
	text-decoration: none;
	color: var(--text);
}

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

#navbar {
	display: flex;
	flex-direction: row;
	height: 56px;
	align-items: center;
	width: 100vw;
	justify-content: center;
	/* width: fit-content; */
	padding: 0 28px;
	background: var(--bg);
	position: fixed;
	border-bottom: var(--disabled) 1px dashed;
	gap: 32px;
	border-radius: 3px;
	top: 0px;
	z-index: 3;
	left: 50%;
	transform: translateX(-50%);
	transition: 0.3s top ease-in-out; 
	/* box-shadow: #0f0f0f 0 0 26px 20px; */
}

#navbar a:hover {
	color: var(--primary);
}

button {
	height: fit-content;
	padding: 8px 18px 9px;
	background-color: var(--bg);
	color: var(--text);
	border: var(--text) 2px solid;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 1rem;
	font-family: "VCR OSD Mono",monospace;
	letter-spacing: 1px;
}

button:hover {
	border-color: var(--primary);
	border-style: solid;
	color: var(--primary);
}

#hero-section {
	padding-top: 70px;
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100vh;
}

#left-side {
	width: calc(50% - 5rem);
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: start;
	padding-left: 5rem;
	flex-direction: column;
}

#thirukkural {
	position: absolute;
	margin: 0;
	font-family: "Noto Serif Tamil", serif;
	/*font-style: italic;*/
	font-size: 1.2rem;
}

#right-side {
	position: relative;
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	stroke: white;
	padding-right: 20px;
}

section {
	width: 100%;
	min-height: 100vh;
}

#hero-title {
	font-size: 2.4rem;
	margin-bottom: 6px;
	margin-top: 22px;
	font-family: "Ioskeley Mono",monospace;
	line-height: 2.6rem;
}

#hero-title span {
	font-size: 5.6rem;
	line-height: 5rem;
	height: fit-content;
	letter-spacing: -5px;
	font-family: "Ioskeley Mono",monospace;
	text-transform: uppercase;
	
}
#hero-title span::selection {
	color: var(--background);
	background-color: var(--primary);
}

#dev-text{
	padding: 5px 0 4px;
	width: 100%;
	max-width: 615px;
	margin: 0;
	color: var(--bg);
	background: repeating-linear-gradient( -90deg, var(--primary), var(--primary) 2px, var(--bg) 2px, var(--bg) 8px );
	/* font-style: italic; */
	font-size: 1.1rem;
	font-weight: bold;
}
#dev-text span {
	padding: 5px 8px 5px;
	font-family: "Ioskeley Mono",monospace;
	text-transform: uppercase;
	background-color: var(--primary);
}

#slogan-text {
	font-weight: normal;
	margin: 0 0 28px 8px;
	color: var(--text);
	/* background: var(--text); */
	/* padding: 2px 6px; */
	font-weight: 500;
	font-family: "Baskervville",monospace;
	font-style: italic;
}

#linkedin-button {
	background: var(--text);
	color: var(--bg);
}
#linkedin-button:hover {
	background-color: var(--primary);
}

#hero-btn-grp {
	display: flex;
	flex-direction: row;
	gap: 18px;
}

@media (width<1475px) {
	#hero-title{
		font-size: 2.0rem;
		line-height: 1.8rem;
		margin-bottom: 16px;
	}
	#hero-title span {
		font-size: 4.6rem;
		line-height: 4.4rem;
	}
	#hero-img {
		width:80%;
	}
}

@media (width<1255px) {

	#hero-img {
		display: none;
		position: static;
	}

	#hero-section::after {
		position: absolute;
		top: 0;
		left: 0;
		background-repeat: no-repeat;
		background-size: contain;
		background: url("./assets/thiruvalluvar.svg");
	}

	#thirukkural {
		top: 0;
		width: calc(100% - 40px);
		font-size: 1.1rem;
		padding: 45px 20px 0 20px;
		max-width: 536px;
	}

	#right-side {
		position: absolute;
		width: 100%;
		height: fit-content;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#left-side {
		width: 100%;
		padding-left: 3rem;
	}

	#hero-title {
		max-width: 900px;
		
	}
}

@media (width<700px) {
	#hero-title {
		font-size: 1.6rem;
		line-height: 1.4rem;
	}
	#left-side {
		padding-left: 1.5rem;
	}

}

@media (height<675px) {

	#hero-img {
		height: auto;
		max-height: 90vh;
		padding-top: 0;
	}

	#right-side {
		align-items: start;
	}

	#thirukkural {
		align-self: center;
	}

}


@media (width<675px) {

	#dev-text{
		font-size: 1.0rem;
		padding: 0px 0;
		width: 90%;
	}
	#dev-text span {
		padding: 4px;
		min-height: 20px;
		display: inline-block;
	}
}

@media (width<576px) {

	#thirukkural {
		font-size: 0.9rem;
		max-width: 430px;
	}

	#navbar {
		padding: 0 22px;
	}

}

@media (width<468px) {
	#hero-title {
		font-size: 1.6rem;
		line-height: 1.9rem;
	}
	#hero-title span {
		font-size: 5.4rem;
		line-height: 5rem;
	}
}

@media (width<385px) {
	#thirukkural {
		font-size: 0.8rem;
	}
}