@font-face {
	font-display: swap;
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400;
	src: url('../font/ibm-plex-sans-v22-latin-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 700;
	src: url('../font/ibm-plex-sans-v22-latin-700.woff2') format('woff2'); 
}

/* Reused variables for color and border style. */
:root {
	--border-color: rgb(255, 255, 255);
	--border-style: 2px groove var(--border-color);
}

/* Remove margin and set out background. */
body {
	margin: 0;
	background-image: url("../img/bg.webp");
}

/* Set all font to IBM Plex Sans. */
* {
	font-family: 'IBM Plex Sans';
}

/* Sets our main div width, gives some padding, centers horizontally,
   and displays flex and children in centered column.
   Also reduces the intensity of the bg pattern with a semi-transparent bg color. */
div.main {
	width: 960px;
	margin: 3em auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 0.70em 1em;
	border: var(--border-style);
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.63);
}

/* Select the h1 title, sets margin, and its font properties */
body div h1.title {
	font-weight: 700;
	font-variant: small-caps;
	margin-bottom: 0.125em;
	margin-top: 0.125em;
}

/* Sets margin for our form return button and hides it by default */
div.main input#clear-text {
	margin: 0 0.5em;
	display: none;
}

/* Gives the form tag a border, padding, and set width. */
div.main form {
	border: var(--border-style);
	border-radius: 3px;
	padding: 0.5em 1em;
	width: 97%;
}

/* Noun/Verb/Adjective header text, sets it centered and small cap styling. */
form div h4 {
	text-align: center;
	font-variant: small-caps;
}

/* Sets the div containing the input sections to be flex with a minor gap. */
form div div.fields {
	display: flex;
	column-gap: 1em;
	justify-content: center;
}

/* Sets inputs into flex column mode so the label text is above the input. */
div.fields input {
	display: flex;
	flex-direction: column;
}


/* Makes the button containing div use flex display with column padding. */
form div#buttons {
	margin-top: 1em;
	width: 100%;
	display: flex;
	column-gap: 0.25em;
	justify-content: space-around;
}

/* Styling for form buttons, makes them larger. */
input#random, input#submit, input#reset, input#clear-text {
	font-size: 14pt;
	padding: 0.25em;
	margin-bottom: 1em;
}

/* Makes the submit button larger than the rest. */
div#buttons input#submit {
	width: 50%;
}

/* Main text container, not displayed by default. */
div#text-container {
	display: none;
	margin-top: 1em;
	border: var(--border-style);
	border-radius: 3px;
	padding: 0.5em 1em;
	width: 97%;
	height: 0;
}

/* Used to display the text block after generated in JS. */
div#text-container.shown {
	display: block;
	height: max-content;
}

/* Styles the madlib text, using a custom font.
   balance text wrap is commented out because I couldn't decide what I liked better. */
p.text {
	/*! text-wrap: balance; */ 
	text-align: justify;
	font-family: 'IBM Plex Sans';
	font-weight: 400;
}

/* Used to create the dotted unerline between paragraph sections. */
p.text::after {
	content: '';
	position: relative;
	max-width: 100%;
	height: 1px;
	display: block;
	text-align: center;
	border-top: 1px dotted black;
	margin: 0 auto;
	margin-top: 1em;
}

/* Forces the first letter in any of the P tags to be uppercase,
   Purely so we don't have to do it in the JavaScript instead. */
p.text::first-letter {
	text-transform: uppercase;
}