/* colors var */
:root {
	--primary-color: #00ff66;
	--dark-primary-color: #00ee55;
	--blinking-color: var(--primary-color);
	--background-color: rgb(10, 10, 10);
	--background-color-light: rgb(20, 20, 20);
	--text-select-color: #00ff66;
	--logo-filter: invert(79%) sepia(41%) saturate(5681%) hue-rotate(93deg) brightness(112%) contrast(104%);
}
:root.light {
	--primary-color: rgb(250, 250, 250);
	--dark-primary-color: rgb(240, 240, 240);
	--blinking-color: var(--primary-color);
	--background-color: rgb(1, 36, 86);
	--background-color-light: rgb(11, 46, 96);
	--text-select-color: rgb(254, 219, 169);
	--logo-filter: brightness(0) saturate(100%) invert(100%) sepia(1%)
		saturate(7462%) hue-rotate(208deg) brightness(112%) contrast(89%) !important;
}

@font-face {
	font-family: 'IBM';
	src: url('../assets/WebPlus_IBM_MDA.woff');
}

* {
	font-family: "IBM", sans-serif;
	color: var(--primary-color);
	box-sizing: border-box;
}

/* scrollbar with no backround and green track */
::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: var(--background-color-light);
}
::-webkit-scrollbar-thumb {
	background: var(--primary-color);
}

::selection {
	background: var(--text-select-color);
	color: var(--background-color-light);
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 0;
	margin: 0;
	background-color: var(--background-color);
	/* color: var(--primary-color); */
}

main {
	padding: 50px;
	flex-grow: 1;
}

.separator {
	display: flex;
	align-items: center;
}

.separator-no-text {
	border: none;
	border-bottom: 2px dashed var(--primary-color);
	margin-bottom: 50px;
}

p {
	font-size: 1.2rem;
	line-height: 1.5;
	margin-bottom: 50px;
}

.blinking {
	animation: blinkingText 2s infinite;
}

::selection {
	color: #000;
}

.outlined-button {
	border-radius: 10px;
	border: 1px solid var(--primary-color);
	background-color: transparent;
	padding: 10px;
	cursor: pointer;
	transition: background-color 0.5s, color 0.5s;
}

.outlined-button:hover {
	background-color: var(--primary-color);
	color: var(--background-color);
}

.social-links-list a {
	text-decoration: none;
}

.social-logo {
	aspect-ratio: 1/1;
	filter: var(--logo-filter);
}

.md-visible {
	display: none;
}

@keyframes blinkingText {
	0% {
		color: var(--blinking-color);
	}

	49% {
		color: var(--blinking-color);
	}

	60% {
		color: transparent;
	}

	99% {
		color: transparent;
	}

	100% {
		color: var(--blinking-color);
	}
}

@media all and (max-width: 1000px) {
	.md-visible {
		display: block;
	}

	h1 {
		font-size: 3rem !important;
	}

	h2 {
		font-size: 2.5rem !important;
	}
}

@media (orientation: portrait) and (pointer:none),
(pointer:coarse) {
	h1 {
		font-size: 4rem !important;
		text-align: center;
	}

	h2 {
		font-size: 3rem !important;
	}

	h3 {
		font-size: 3.5rem !important;
	}
}

@media all and (max-width: 600px) {

	img {
		width: 400px;
	}

	.separator {
		text-align: center;
	}

	.separator::after, .separator::before {
		content: '';
		flex: 1;
		border-bottom: 2px dashed var(--primary-color);
	}

	.separator::before {
		margin-right: 0.5rem;
	}
	.separator::after {
		margin-left: 0.5rem;
	}
}