/*
==================
🎨 COLORS USED. 🎨
==================
Background Color: #add8e6;
Text Colors: 
	#2b2b2b, 
	#ffffff;
Primary Color: #58007e;
Secondary Color: #94c2ef;
Tertiary Color: #42c470;
Quaternary Color: #0568ca;
=================
ℹ️ FONTS USED. ℹ️
=================
Primary Font: 'Courier New', Courier, monospace;
Secondary Font: 'Roboto', sans-serif;
*/
:root {
	--primary-color: #58007e;
	--secondary-color: #94c2ef;
	--tertiary-color: #42c470;
	--quaternary-color: #0568ca;
	--background-color: #add8e6;
	--light-text-color: #ffffff;
	--dark-text-color: #2b2b2b;
	--primary-font: 'Courier New', Courier, monospace;
	--secondary-font: "Roboto", sans-serif;
}

* {
	box-sizing: border-box;
}

body {
	background-color: var(--background-color);
	color: var(--dark-text-color);
	font-family: var(--secondary-font);
	line-height: 1.6;
	margin: 0 auto;
}

h1 {
	font-size: 3em;
	font-weight: 700;
	text-align: center;
}

h2 {
	font-size: 24px;
	font-weight: 700;
}

h3 {
	font-size: 18px;
	font-weight: 700;
}

section {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
}

.about-page:nth-child(n) {
	margin-top: 10px;
	margin-bottom: 10px;
}

.text-input {
	font-family: var(--primary-font);
	font-size: 1.5em;
	font-weight: bold;
	padding: 10px 20px;
	border: 3px solid var(--tertiary-color);
	border-radius: 5px;
	caret-color: var(--primary-color);
	color: var(--primary-color);
}

input[type="submit"] {
	max-width: 50%;
	margin: 0 auto;
}

textarea {
	resize: vertical;
}

.regular_text {
	font-size: 2em;
}

.small_text {
	font-size: 1em;
}

button,
.button__primary,
.button__secondary {
	font-family: var(--primary-font);
	font-size: 1.25em;
	font-weight: bold;
	color: var(--light-text-color);
	border: none;
	display: inline-block;
	text-decoration: none;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 10px;
	transition-duration: 0.4s;
	transition-property: background-color;
}

.button__primary {
	background-color: var(--primary-color);
}

.button__secondary {
	background-color: var(--quaternary-color);
}

button:hover,
button:focus,
.button__primary:hover,
.button__primary:focus,
.button__secondary:hover,
.button__secondary:focus {
	background-color: var(--tertiary-color);
	cursor: pointer;
}

.button_group {
	margin-top: 20px;
	margin-bottom: 50px;
}

.default__link {
	color: var(--primary-color);
	font-family: var(--primary-font);
	font-size: 1em;
	font-weight: bold;
	margin: 10px;
}

.default__link:hover,
.default__link:focus {
	text-decoration: none;
}

.default__link:visited {
	color: var(--primary-color);
}

.default__link:active {
	color: var(--primary-color);
}

.navigation-list__item--active {
	text-decoration: none;
}

.profile__portrait {
	float: left;
	width: 250px;
	margin-right: 40px;
	border-radius: 50%;
	border: 10px solid var(--tertiary-color);
}

.interests {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
}

.interests__item {
	margin: auto 20px auto 20px;
}

.social-media__item {
	text-decoration: none;
	margin: 10px;
}

.experience {
	margin: 0 auto;
	border-collapse: collapse;
	width: 100%;
}

.experience th {
	color: var(--light-text-color);
	background-color: var(--primary-color);
}

.experience th:nth-child(1) {
	border-radius: 10px 0 0 0;
}

.experience th:nth-child(3) {
	border-radius: 0 10px 0 0;
}

.experience tr:nth-child(even) {
	background-color: var(--secondary-color);
}

.experience tr:hover {
	background-color: var(--tertiary-color);
}

.credit-line {
	margin-top: 0;
}

.description {
	margin: 0 10px 0 10px;
}

.heading__index {
	font-family: var(--primary-font);
	font-weight: bold;
	font-size: 3em;
	color: var(--tertiary-color);
}

#hello_world {
	background-color: var(--dark-text-color);
	padding: 1%;
	border-radius: 10px;
	white-space: nowrap;
}

#code_text {
	font-family: var(--primary-font);
	font-weight: bold;
	background-color: var(--dark-text-color);
	color: var(--tertiary-color);
	border-radius: 10px;
	padding: 0.5%;
}

.page-footer {
	clear: both;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.page-header {
	display: flex;
	width: 100%;
	padding: 20px;
}

.page-header__item {
	flex: 0 1 200px;
}

.page-header__item:last-child {
	flex-grow: 1;
	text-align: right;
}

.navigation-list {
	list-style-type: none;
}

@supports (display: grid) {
	.project-list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 20px;
		margin: 0;
	}

	.project-list__item {
		background-color: var(--secondary-color);
		width: auto;
		min-height: auto;
		margin: 0;
	}
}

.project-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
}

.project-list__item {
	border: 5px solid var(--tertiary-color);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 100%;
	background-color: var(--secondary-color);
}

.project-list__item__title {
	margin: 0;
	color: var(--light-text-color);
	background-color: var(--primary-color);
	border-radius: 5px 5px 0 0;
}

#contact-form {
	display: flex;
	flex-direction: column;
	margin: 5vh auto;
}

.text-input {
	background-color: var(--secondary-color);
	margin-bottom: 2vh;
}

@media all and (max-width: 677px) {
	.profile__portrait {
		float: none;
		margin: 0 auto;
	}

	.button_group {
		margin-bottom: 10px;
	}
}

@media all and (max-width: 500px) {
	.project-list {
		margin: 0 20px;
		grid-template-columns: 1fr;
	}
}

@media all and (min-width: 500px) and (max-width: 750px) {
	.project-list {
		margin: 0 10px;
		grid-template-columns: 1fr 1fr;
	}
}

@media all and (max-width: 750px) {
	.project-list {
		grid-gap: 10px;
	}

	.project-list__item:last-child {
		grid-column: auto / auto;
		grid-row: auto / auto;
	}

	h1 {
		font-size: 22px;
	}


}

@keyframes flicker {
	from {
		visibility: initial;
	}

	to {
		visibility: hidden;
	}
}

@keyframes path22 {
	from {
		transform: translate(430%, 0);
	}

	to {
		transform: translate(-500%, 0);
	}
}

@keyframes path24 {
	from {
		transform: translate(190%, 0);
	}

	to {
		transform: translate(-700%, 0);
	}
}

@keyframes path26 {
	from {
		transform: translate(820%, 0);
	}

	to {
		transform: translate(-50%, 0);
	}
}

@keyframes path28 {
	from {
		transform: translate(625%, 0);
	}

	to {
		transform: translate(-215%, 0);
	}
}

@keyframes path30 {
	from {
		transform: translate(400%, 0);
	}

	to {
		transform: translate(-440%, 0);
	}
}

@keyframes path32 {
	from {
		transform: translate(40%, 0);
	}

	to {
		transform: translate(-800%, 0);
	}
}

#path22 {
	animation-duration: 65s;
	animation-name: path22;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
}

#path24 {
	animation-duration: 42s;
	animation-name: path24;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
}

#path26 {
	animation-duration: 33s;
	animation-name: path26;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
}

#path28 {
	animation-duration: 24s;
	animation-name: path28;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
}

#path30 {
	animation-duration: 19s;
	animation-name: path30;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
}

#path32 {
	animation-duration: 16s;
	animation-name: path32;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: linear;
}

#cli_prompt {
	animation-duration: 1s;
	animation-name: flicker;
	animation-iteration-count: infinite;
	animation-direction: normal;
	animation-timing-function: steps(2, start);
}