/*

green 1 = #00aea1
green 2 = #00e7ae
green 3 = #00d4c4

*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap');
.open-sans-<uniquifier> {
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: <weight>;
	font-style: normal;
	font-variation-settings:
	"wdth" 100;
}

@media screen and (max-width: 440px) {
	body{
		background-color: #0D1117;
		color: #C9D1D9;
		font-family: Open Sans;
	}

	/*--------------- NAV --------------*/
	nav{
		margin-top: 0px;
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative; /* needed for absolute center */
		padding: 0px 10px;
		box-sizing: border-box;
		
	}

	.nav-logo{
		width: auto;
		height: 100%;
	}

	.nav-logo img{
		margin-top: 10px;
		height: 40px;
		transition: height 0.2s;
	}

	.nav-logo img:hover{
		cursor: default;
		height: 55px;
		transition: height 0.2s;
	}

	.nav-middle{
		width: 200px;
		height: 50px; /* shorter height for a tile feel */
		position: absolute;
		left: 10%;
		top: 10%;
		transform: translate(-10%, -10%);
		line-height: 50px; /* vertically centers text */
		text-align: center;
		/* Smooth hover effect */
		transition: all 0.3s ease-in-out;
		font-size: 25px; /* slightly smaller, sleeker */
		font-weight: 600;
		font-style: normal; /* remove italic for clean look */
		letter-spacing: 2px; /* tighter than 10px */
		font-family: 'Open Sans', sans-serif;
		color: #00aea1;
	}

	.nav-middle h1{
		margin: 0; /* Remove default margins to fit into parent's flow */
	  	padding: 0;
	  	font-size: inherit; /* slightly smaller, sleeker */
		font-weight: inherit;
		font-style: inherit; /* remove italic for clean look */
		letter-spacing: inherit; /* tighter than 10px */
		font-family: inherit;
		color: inherit;
	}

	.nav-right{
		width: 150px;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.nav-right a{
		text-decoration: none;
		color: #C9D1D9;
		font-family: 'Open Sans', sans-serif;
		font-weight: 200;
		letter-spacing: 3px;
		font-size: 12px;
		transition: all 0.3s;
	}

	.nav-right a:hover{
		color: #00aea1;
		transition: all 0.3s;
		letter-spacing: 4px;
	}

	/*--------------- Main --------------*/
	.main {
		margin: 0px auto;
		width: 300px;
		height: auto;
	}

	.main-type{
		margin: 0 auto;
		margin-top: 25vh;
		display: inline-block;
		overflow: hidden;
		white-space: pre-wrap;   /* allows line breaks */
		word-break: break-word;
		max-width: 300px;        /* match .main width */
		line-height: 40px;
		animation: blink 0.8s infinite;
		font-family: 'Open Sans', sans-serif;
		font-weight: 300;
		letter-spacing: 2px;
		font-size: 24px;
	}

	

	.highlight{
		color: #00aea1;
		font-weight: 600;
	}



	/*--------------- Main --------------*/
	footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 14px;
		letter-spacing: 1.5px;
		font-family: Open Sans;
		font-weight: 200;
	}
}

@media screen and (min-width: 441px) {
	body{
		background-color: #0D1117;
		color: #C9D1D9;
		font-family: Open Sans;
	}

	/*--------------- NAV --------------*/
	nav{
		margin-top: 20px;
		width: 100%;
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative; /* needed for absolute center */
		padding: 0px 50px;
		box-sizing: border-box;
		
	}

	.nav-logo{
		width: 200px;
		height: 100%;
	}

	.nav-logo img{
		margin-top: 10px;
		height: 50px;
		transition: height 0.2s;
	}

	.nav-logo img:hover{
		cursor: default;
		height: 55px;
		transition: height 0.2s;
	}

	.nav-middle {
		width: 500px;
		height: 50px; /* shorter height for a tile feel */
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		line-height: 50px; /* vertically centers text */
		text-align: center;
		font-size: 35px; /* slightly smaller, sleeker */
		font-weight: 600;
		font-style: normal; /* remove italic for clean look */
		letter-spacing: 4px; /* tighter than 10px */
		font-family: 'Open Sans', sans-serif;
		color: #00aea1;
		/* Smooth hover effect */
		transition: all 0.3s ease-in-out;
	}

	.nav-middle h1{
		margin: 0; /* Remove default margins to fit into parent's flow */
	  	padding: 0;
	  	font-size: inherit; /* slightly smaller, sleeker */
		font-weight: inherit;
		font-style: inherit; /* remove italic for clean look */
		letter-spacing: inherit; /* tighter than 10px */
		font-family: inherit;
		color: inherit;
	}

	.nav-middle:hover {
		letter-spacing: 6px;
		cursor: default;
	}

	.nav-right{
		width: 250px;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.nav-right a{
		text-decoration: none;
		color: #C9D1D9;
		font-family: 'Open Sans', sans-serif;
		font-weight: 200;
		letter-spacing: 3px;
		font-size: 15px;
		transition: all 0.3s;
	}

	.nav-right a:hover{
		color: #00aea1;
		transition: all 0.3s;
		letter-spacing: 4px;
	}

	/*--------------- Main --------------*/
	.main {
		margin: 0 auto;
		width: 1450px;
		height: auto;
	}

	.main-type{
		margin: 0px auto;
		margin-top: 40vh;
		overflow: hidden;
		white-space: nowrap;
		border-right: 2px solid #00e7ae;
		width: 0;
		height: 40px;
		line-height: 40px;
		animation: typing 3s steps(50, end) forwards,
		blink 0.8s infinite;
		font-family: Open Sans;
		font-weight: 300;
		letter-spacing: 2px;
		font-size: 24px;

	}

	@keyframes typing {  /* renamed to match animation */
		from { width: 0; }
		to   { width: 100%; }
	}

	@keyframes blink {
		50% { border-color: transparent; }
	}

	.highlight{
		color: #00aea1;
		font-weight: 600;
	}



	/*--------------- Main --------------*/
	footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
		font-size: 14px;
		letter-spacing: 1.5px;
		font-family: Open Sans;
		font-weight: 200;
	}
}