:root {
	--bk-yellow: #feda00;
}

main {
	/*
	background-color: var(--bk-yellow);
	background-image: url(https://d2eutd4w7jyil8.cloudfront.net/articles/2022/12-winter/features/bee-keeper/opener-background-2000x1200.png);
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	*/
	background-color: transparent;
}

footer {
	background-color: inherit;
}

.answer {
}

.background-image {
	position: fixed;
	/*
	top: 50%; left: 50%;
	margin-left: -1000px;
	margin-top: -600px;
	*/
	z-index: -1;
}

.btn-yellow {
	--bs-btn-color: black;
    --bs-btn-bg: var(--bk-yellow);
    --bs-btn-border-color: var(--bk-yellow);
    --bs-btn-hover-color: black;
    --bs-btn-hover-bg: #e6c300;
    --bs-btn-hover-border-color: #b39800;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: black;
    --bs-btn-active-bg: #e6c300;
    --bs-btn-active-border-color: #b39800;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: black;
    --bs-btn-disabled-bg: var(--bk-yellow);
    --bs-btn-disabled-border-color: var(--bk-yellow);
	--bs-btn-font-family: var(--sans-serif-text);
}

.byline {
	/* Would love to have done small-caps, but they're not rendering reliably across browsers (works in Chrome, but not Firefox) */
	text-transform: uppercase;
}

.drop-cap:first-letter {
    float: left;
    font-family: var(--serif-display);
    font-size: 4em;
    font-weight: bold;
    line-height: 1em;
    padding-right: 0.1em;
}

.form-label {
	font-family: var(--sans-serif-text);
}

.header {	
	font-weight: 800;
	min-height: 50vh;
}
	.header .display-1,
	.header .display-2 {
		font-weight: 800;
	}
	
.image-credit {
    font-family: var(--sans-serif-text);
    font-size: 0.8rem;
    margin-top: 0.5rem;
    text-transform: uppercase;
}

.instructions {
	font-size: 1.5rem;
	font-style: italic;
}
	.instructions em {
		font-weight: bold;
	}

.invalid-feedback {
	font-family: var(--sans-serif-text);
}

.meta-info {
	text-transform: uppercase;
}

.question {
	font-size: 1.2em;
	font-weight: bold;
	margin-top: 2rem;
}

.puzzle {
	padding-left: 2em;
	padding-right: 2em;
}
	.puzzle + .puzzle {
		margin-top: 2em;
	}

	.puzzle .form-control {
		font-family: var(--sans-serif-text);
		font-size: 1.5em;
		font-weight: bold;
		max-width: 100%;
		text-align: center;
		text-transform: uppercase;
	}