@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap');

:root {
	--spacing: 2rem;

	--primary-color: rgb(0, 78, 223);
	--secondary-color: rgb(255, 255, 255);
	--tertiary-color: rgb(45, 12, 106);
	--bg-color: rgb(242, 242, 242);

	--h1-font-size: 2rem;
	--h2-font-size: 1rem;
	--s-font-size: .875rem;

	--font-weight-bold: 700;
	--font-weight-medium: 500;
	--font-weight-light: 300;

	--radius: 2rem;

	--primary-font: 'Schibsted Grotesk', sans-serif;
}

header {
	height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing);
}

@media (width > 600px) {
   	header h2 {
        max-width: 40rem;
    }
}

@keyframes fadeIn {
	0% {
		opacity: 0%;
	}

	100% {
		opacity: 30%;
	}
}

header img {
	position: absolute;
	z-index: -100;
	opacity: 30%;
	max-width: 70%;
}

header img:nth-child(1) {
	left: -10%;
	top: 65%;
	animation: fadeIn 5s forwards;
}

header img:nth-child(2) {
	top: 5%;
	left: -10%;
	animation: fadeIn 5s forwards;
}

header img:nth-child(3) {
	left: 30%;
	top: 65%;
	animation: fadeIn 5s forwards;
}

header img:nth-child(4) {
	left: 30%;
	top: 5%;
	animation: fadeIn 5s forwards;
}

@media (width > 450px) {

	header img {
	max-width: 60%;
	}

	header img:nth-child(1) {
	left: -5%;
	top: 65%;
	}

	header img:nth-child(2) {
	top: 0%;
	left: -5%;
	}

	header img:nth-child(3) {
	left: 40%;
	top: 65%;
	}

	header img:nth-child(4) {
	left: 40%;
	top: 0%;
	}

}

@media (width > 600px) {

	header img {
	max-width: 45%;
	}

	header img:nth-child(1) {
	top: 67%;
	}
}

@media (width > 850px) {

	header img {
	max-width: 38%;
	}

	header img:nth-child(2),
	header img:nth-child(4) {
	top: -5%;
	}

}

@media (width > 1000px) {

	header img {
	max-width: 25%;
	}

	header img:nth-child(1) {
	top: 42%;
	left: 38%;
	max-width: 25%;
	}

	header img:nth-child(2) {
	top: 10%;
	left: 40%;
	}

	header img:nth-child(3) {
	top: 40%;
	left: 55%;
	}

	header img:nth-child(4) {
	top: 10%;
	left: 55%;
	}

}

body {
	font-family: var(--primary-font);
    background: var(--bg-color);
    padding: var(--spacing);
    display: grid;
    gap: var(--spacing);
}

/* title styling */
.title {
	font-size: 3rem;
	font-weight: var(--font-weight-medium);
}

@media (width>600px) {
	.title {
		font-size: 5rem;
	}
}

h1 {
    font-size: var(--h1-font-size);
    letter-spacing: -0.03em;
    color: var(--primary-color);
}

h2 {
	font-size: var(--h2-font-size);
	color: var(--primary-color);
	font-weight: var(--font-weight-medium);
}


p {
	color: var(--primary-color);
	font-size: var(--s-font-size);
	font-weight: var(--font-weight-light);
}

@media (width>600px) {
	h1 {
		font-size: calc(var(--h1-font-size) * 2);
	}

	h2 {
		font-size: calc(var(--h2-font-size) * 1.5);
	}

	p {
		font-size: calc(var(--s-font-size) * 1.25);
	}
}

legend {
	font-size: calc(var(--h2-font-size)*1.4);
	color: var(--primary-color);
	margin-block: 1rem;
    text-align: center;
}

/* target the entire form */
form {
	background-color: var(--secondary-color);
	border-radius: calc(var(--spacing) / 2);
	display: grid;
	gap: var(--spacing);
	padding: calc(var(--spacing)/2);
	border: .1rem solid var(--primary-color);
	justify-items: center;
	max-width: 50rem;
}

@media (width > 600px) {
	form{
		margin: 0 auto;
	}
}

.form-divider {
    border-top: .1rem solid var(--primary-color);
    padding-top: var(--spacing);
}

select {
	color: var(--primary-color);
	font-size: var(--h2-font-size);
    border-radius: var(--radius);
    border: .1rem solid var(--primary-color);
    cursor: pointer;
	padding-block: .5rem;
	padding-inline: .5rem;
}

@media (width>600px) {
	select {
		width: 20%;
	}
}

li {
	list-style: none;
}

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

.saved-questions {
	position: absolute;
	top: var(--spacing);
  	right: var(--spacing);
}

/* base button style */
.button {
	padding-block: 0.5rem;
	padding-inline: 1rem;
	border-radius: var(--radius);
	border: 0.1rem solid var(--primary-color);
	cursor: pointer;
	font-family: var(--primary-font);
	margin-block: 2rem;
	text-align: center;
}

/* dark button */
.button-primary {
	color: var(--secondary-color);
	background-color: var(--primary-color);
	font-size: var(--h2-font-size);
}

/* light button */
.button-secondary {
	color: var(--tertiary-color);
	background-color: var(--secondary-color);
	font-size: var(--s-font-size);
}

/* specific button size and position tweaks */
.generate-button,
#next {
	max-width: 7rem;
}


#save,
.close-button,
#start-button {
	max-width: 13rem;
	margin-inline: 0.2rem;
}

#back-button {
	position: absolute;
	top: var(--spacing);
}


dialog {
	border: .1rem solid var(--primary-color);
	border-radius: var(--radius);
	padding: var(--spacing);
	background-color: var(--bg-color);
}


#convo-prompts {
	color: var(--primary-color);
	border-radius: var(--radius);
}

/* #convo-prompt text */
.result-text {
	font-size: calc(var(--h2-font-size)*1.2);
}

@media (width>600px){
	.result-text {
	font-size: calc(var(--h1-font-size)*1.3);
	max-width: 40ch;
	margin: 0 auto;
}
}

/* styling for setting fieldset */
.setting-option {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	border-radius: var(--radius);
	padding: 1rem;
}

/* form option img */
.setting-option img {
	max-width: 5rem;
}

/* form option text */
.setting-option span {
    font-size: var(--s-font-size);
}

@media (width>600px) {
	.setting-option img {
		max-width: 8rem;
	}

	.setting-option span {
    font-size: var(--h2-font-size);
}
}

.setting-option input {
	display: none;
}

 /* when one of the setting option is checked, add border */
/* :has() on MDN https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has */
.setting-option:has(input:checked) {
	background-color: var(--bg-color);
	border: .1rem solid var(--primary-color);
	border-radius: var(--radius);
}

fieldset {
	border: none;
	text-align: center;
}

.full-section {
	position: relative;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}


/* hidden & active classes to control visibility for the 3 pages */
.hidden {
    display: none;
}

.active {
    display: grid;
}


/* view saved modal */
dialog {
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: .1rem solid var(--primary-color);
    border-radius: var(--radius);
    padding: var(--spacing);
    background-color: var(--bg-color);
}

#saved-list h2 {
    margin-bottom: 0.5rem;
}

#saved-list li {
    margin-bottom: 1.5rem;
}