* {
	color: #ccc;
	font-family: monospace;

	font-weight: 700;

	transition: all 0.25s ease;

	h1 {
		font-size: 2em;
	}

	hr {
		border: none;
		border-top: 1px solid #ccc;
		margin: 2em 0;
		box-shadow: 0 0 1em #ccc5;
	}

	.icon {
		width: 0;
		height: 1em;
		opacity: 0;
	}

	.icon_big {
		width: 2em;
		height: 2em;
		margin-right: 0.4em;
	}
}

html {
	background-color: #101010;
	body {
		padding: 20vh;
		margin: 0;

		min-height: 100vh;

		background-color: #000000;
		background-attachment: fixed;

		transition: background 0.5s linear;

		@media (max-width: 768px) {
			padding: 5vh;
		}

		main {
			div #image {
				width: 5%;
				height: 5%;
				padding-right: 1em;

				@media (max-width: 768px) {
					width: 20%;
					height: 20%;
				}
			}

			p {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				span {
					margin: 0;
					padding: 0.2em 0em 0.2em 0.5em;
					display: inline-flex;
					align-items: center;
					justify-content: flex-start;

					width: fit-content;

					border: 1px solid transparent;
					border-radius: 0.2em;

					cursor: pointer;

					overflow: hidden;

					gap: 0;

					&:hover {
						padding: 0.2em 0.2em 0.2em 0.5em;
						border: 1px solid white;
						background-color: #333;

						box-shadow: #fff5 0 0 1em;

						gap: 0.5em;

						.icon {
							width: 1em;
							opacity: 1;
							margin-right: 0.2em;
						}
					}
				}
			}

			a {
				text-decoration: none;
				button {
					margin: 0;
					padding: 0.5em;

					display: inline-flex;
					align-items: center;
					justify-content: flex-start;

					width: fit-content;

					border: 1px solid transparent;
					border-radius: 0.2em;
					box-shadow: #fff0 0 0 1em;

					background-color: #333;

					cursor: pointer;

					&:hover {
						border: 1px solid white;
						background-color: #333;

						box-shadow: #fff5 0 0 1em;
					}
				}
			}

			.project {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				justify-content: space-between;

				a {
					padding: 1em;
					margin: 1em;
					border-radius: 0.5em;
					border: solid 1px #ccc;

					.static {
						padding: 0.2em 0.5em;
						display: inline-flex;
						align-items: center;
						justify-content: flex-start;

						.icon {
							width: 1em;
							height: 1em;
							opacity: 1;
							margin-right: 0.5em;
						}
					}

					&:hover {
						border: 1px solid white;
						transform: scale(1.01);
						box-shadow: #fff5 0 0 1em;
					}
				}

				@media (max-width: 768px) {
					flex-direction: column;
				}
			}
		}
	}
}