@import './normalize.css';

.dark {
	--background: #1b1c1c;
	--foreground: whitesmoke;
	--accent-two: #afed91;
	--accent-one: #225775;
	--emoji: '🌑';
	--emoji-translate: 0;
}

.light {
	--background: whitesmoke;
	--foreground: black;
	--accent-two: #c384bd;
	--accent-one: #ed9791;
	--emoji: '🌕';
	--emoji-translate: calc(90vw - 100%);
}

	body {
		--transition-time: 750ms;
		font-family: 'Roboto Serif', serif;
		font-weight: 100;
		background-color: var(--background);
		color: var(--foreground);
		transition: background-color var(--transition-time) ease-in-out;
	}

	.title {
		font-weight: 100;
		font-style: italic;
		font-size: 4rem;
		margin: .5rem 0;
		letter-spacing: 4px;

		text-decoration: underline;
		text-decoration-color: var(--accent-one);
		text-decoration-skip-ink: none;
		text-decoration-thickness: 3px;
		transition: letter-spacing 1s ease;
		cursor: default;
	}

	/* .title:hover {
		text-decoration-style: dotted;
		letter-spacing: 10px;
	} */


	.name-header {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.divider-one {
		height: 1rem;
		background-color: var(--accent-one);
	}

	.divider-two {
		height: 0.5rem;
		background-color: var(--accent-two);	
	}
	
	.main {
		height: 100vh;
		display: flex;
		flex-direction: column;
		margin: 0 5vw;
		justify-content: space-between;
	}

	.salutations {
		margin: 1rem 0;
		font-size: 1.5rem;
		flex: 2;
	}

	.theme-label {
		position: relative;
		height: 4rem;
		margin: 1rem 0;
		cursor: pointer;
	}

	.theme-label input {
		width: 0;
		visibility: hidden;
	}

	.theme-label span {
		font-size: 4rem;
		position: absolute;
		transform: translate(var(--emoji-translate));
		transition: transform var(--transition-time) ease;
	}

	.theme-label span::after {
		content: var(--emoji);
	}

	.footer {
		height: 4rem;
	}