@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400..500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,700&display=swap');

:root {
	--c-bright-orange: hsl(31, 77%, 52%);
	--c-dark-cyan: hsl(184, 100%, 22%);
	--c-very-dark-cyan: hsl(179, 100%, 13%);
	--c-transparent-white: hsla(0, 0%, 100%, 0.75);
	--c-off-white: hsl(0, 0%, 95%);
	
	/* Slight deviation from spec, but creates very nice numbers for responsive design.*/
	--font-size-normal: 1rem;
	--font-size-heading: 2.5rem;

	--border-radius-softbox: 8px;

	/* Default values in case a style does not override */
	--fg: var(--c-transparent-white);
	--fg-bright: var(--c-off-white);
	--bg: none;
}

/* Defaults to inherit on body */
body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: var(--font-size-normal);
}

/* Layout */
main {
	min-width: 100vw;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.card-box {
	display: flex;
	flex: 0 1 57em;
	
	/* Select for the individual cards */
	& > * {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: start;
		height: 31.25em;
		padding: 2em;
		& >:last-child {
			margin-top: auto;
		}
	}
}

img.icon {
	height: var(--font-size-heading);
	object-fit: contain;
}

/* Styling */
.orange {
	--bg: var(--c-bright-orange);
}

.cyan {
	--bg: var(--c-dark-cyan);
}

.dark-cyan {
	--bg: var(--c-very-dark-cyan);
}

.card {
	color: var(--fg);
	background: var(--bg);
	
	/* We could set border-radius on parent and clip with overflow auto, but
	that can hinder future efforts if we want the sizing to be responsive. */
	&:first-child {
		border-top-left-radius: var(--border-radius-softbox);
		border-bottom-left-radius: var(--border-radius-softbox);
	}
	&:last-child {
		border-top-right-radius: var(--border-radius-softbox);
		border-bottom-right-radius: var(--border-radius-softbox);
	}
	
	& h1 {
		font-size: var(--font-size-heading);
		font-family: "Big Shoulders", sans-serif;
		font-optical-sizing: auto;
		font-weight: 700;
		font-style: normal;
		text-transform: uppercase;
		color: var(--fg-bright);
	}
	
	& p {
		font-family: "Lexend Deca", sans-serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
	}
}

button.round {
	height: var(--font-size-heading);
	color: var(--bg);
	background: var(--fg-bright);
	border: 0.15em solid var(--fg-bright);
	/* This calculates the button border radius to half its height.
	We could also set a very high absolute value, as it is implicitly
	capped at half height. */
	border-radius: calc(var(--font-size-heading)*0.5);
	padding: 0 1.5em;
	font-family: "Lexend Deca", sans-serif;
	font-weight: 500;
	
	&:focus-visible {
		outline: 0.2em dashed var(--fg-bright);
		outline-offset: 0.2em;
	}
	
	&:hover {
		background: var(--fg);
	}
	
	&:active {
		color:var(--fg-bright);
		background: var(--bg);
	}
}

@media (width < 600px) {
	.card-box {
		flex-direction: column;
		justify-content: start;
		
		& > * {
			height: auto;
			& > * {
				margin: 0;
			}
			& > h1, button {
				margin-top: 0.5em;
			}
			& >:last-child {
				margin-top: var(--font-size-heading);
			}
		}
	}
	
	.card {
		&:first-child {
			border-top-left-radius: var(--border-radius-softbox);
			border-top-right-radius: var(--border-radius-softbox);
			border-bottom-left-radius: 0;
		}
		&:last-child {
			border-top-right-radius: 0;
			border-bottom-left-radius: var(--border-radius-softbox);
			border-bottom-right-radius: var(--border-radius-softbox);
		}
	}
}