@import "meyer-reset.css";
@import "setup.css";

:root {
	font-size: 1rem;
	color: #181818;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "ibm-plex-mono", sans-serif;
	font-size: 20px;

	background-color: whitesmoke;
	background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5.28' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' opacity='30%' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");

	overflow-x: hidden;

	@font-face {
	  font-family: "ibm-plex-mono", sans-serif;
	  font-weight: normal;
	  font-style: normal;
	  font-display: fallback;
	}
}

nav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;

	nav-logo, nav-text {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 1rem;
	}

	nav-text a {
		border: 1px solid var(--primary-text);
		background-color: transparent;
		color: var(--primary-text);

		font-size: 1rem;

		padding: .25rem .5rem;

		transition: 300ms ease-in-out;

		&:hover {
			background-color: var(--primary-text);
			color: var(--alt-text);
		}

		@media (width >= 600px){
			font-size: revert;
		}
	}

	span {
		font-size: 1rem;

		@media (width >= 600px){
			font-size: revert;
		}
	}
}

nav picture {
	width: 80%;
	max-width: 50px;
}

location {
	display: flex;
	gap: .5rem;

	svg {
		max-width: 22px;
	}
}

#page-header {
	margin-top: 1rem;
	margin-bottom: 1rem;

	inner-column {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

#skills {

	inner-column {
		padding: 0;
	}
}

#xxl-footer {

	inner-column {
		padding: 1rem 0;
	}
}

/* Typography */

.loud-voice {
	font-size: clamp(20px, 2rem, 3.5rem);
	font-weight: 700;

	text-wrap: balance;

	@media (width >= 600px){
	font-size: 3rem;
	font-weight: 700;
	}
}

.attention-voice {
	font-size: 1.5rem;
	font-weight: 600;
	line-height: .7;

	@media (width >= 600px){
	font-size: 2rem;
	font-weight: 600;
	line-height: .9;
	}
}

.elevated-voice {
	font-size: 1.5rem;
}

.speaking-voice {
	font-size: 1rem;
}

.calm-voice {
	font-size: .875rem;
}

footer {
	
	hr {
		border: 1px solid lightgray;
	}

	xxl-footer {
		display: grid;
		grid-template-columns: 1fr;
		gap: 3rem;

		width: 100%;

		footer-link-box {
			display: grid;
			grid-template-columns: 1fr;
			gap: 1rem;

			@media (width >= 600px) {
				grid-template-columns: repeat(2, 1fr);
			}

			@media (width >= 900px) {
				grid-template-columns: repeat(4, 1fr);
			}

			a:hover {
				text-decoration: underline;
			}

			logo {
				display: block;
				font-weight: 600;
			}

			links {
				display: grid;
				grid-template-columns: 1fr;
				gap: 1rem;
			}

			social-links {
				display: block;
				
				a + a {
					margin-top: 1rem;
				}
			}

			contact-info {
				display: block;
				grid-template-columns: 1fr;
				text-wrap: wrap;
				gap: 1rem;

				address {
					display: flex;
					flex-direction: column;
					gap: 1rem;

					a {
						display: flex;
						flex-direction: row;
						gap: .5rem;
					}

					svg {
						max-width: 22px;
						margin: 0;
						padding: 0;
					}
				}
			}
		}

		footer-splash {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			width: 100%;

			span {
				font-size: clamp(20px, 10vw, 140px);
			}
		}
	}
}