/* copyright © 2022, calebwebdesigner */

@media screen and (min-width: 801px) and (max-width: 1500px) {
	/*/////////////////////*/
	/*///// COMP MODE /////*/
	#game-content.name-choosing {
		gap: 160px;
	}
	#team0.name-choosing {
		grid-column: 1 / 1;
		justify-self: flex-start;
		height: 340px;
		width: 400px;
	}
	#team1.name-choosing {
		justify-self: flex-end;
		grid-column: 3 / 3;
		height: 340px;
		width: 400px;
	}
}

@media screen and (min-width: 801px) and (max-width: 1000px) {
	/*/////////////////////*/
	/*///// COMP MODE /////*/
	.team-container h2 {
		font-size: 2.5rem;
	}

	/*///////////////////*/
	/*///// ANSWERS /////*/
	#answers label {
		font-size: 1.8rem;
	}
}

@media screen and (min-width: 801px) and (max-width: 850px) {
	/*/////////////////////*/
	/*///// COMP MODE /////*/
	.team-container form input[type=text] {
		width: 90%;
	}
	.team-container form input[type=submit] {
		width: 300px;
	}
}

@media screen and (min-width: 626px) and (max-width: 700px) {
	/*/////////////////////////*/
	/*///// BODY CONTENT ///// */
	#mode button {
		width: 250px !important;
	}
}

@media screen and (min-width: 576px) and (max-width: 950px) {
	/*/////////////////////////*/
	/*///// BODY CONTENT ///// */
	#home-modal {
		margin: 0 16px;
		width: 75vw;
	}
}

@media screen and (min-width: 576px) and (max-width: 800px) {
	/*///////////////////*/
	/*///// HEADER ///// */
	#about-link {
		margin: 8px 12px 8px 12px;
		font-size: 1.75rem;
	}
	#home-link {
		font-size: 1.75rem;
	}

	/*/////////////////////////*/
	/*///// BODY CONTENT ///// */
	/* mode buttons */
	#mode button {
		width: 300px;
	}
}

@media screen and (min-width: 576px) and (max-width: 625px) {
	/*/////////////////////////*/
	/*///// BODY CONTENT ///// */
	#mode button {
		font-size: 2.5rem;
		width: 220px !important;
	}
}

@media screen and (max-width: 1000px) {
	/*///////////////////*/
	/*///// ANSWERS /////*/
	#answers span {
		max-width: 90%;
	}
}

@media screen and (max-width: 800px) {
	/*///////////////////*/
	/*///// HEADER ///// */
	#about-link {
		margin: 8px 12px 8px 12px;
	}

	#home-modal-bg {
		height: 150%; /* make height so high that when user scrolls up on slow mobile devices the url bar popping down won't reveal the elements beneath */
		align-items: flex-start;
	}
	#home-modal {
		margin-top: 20vh;
	}
	#home-modal h3 {
		font-size: 1.4rem;
	}
	#home-button-container {
		gap: 20px;
	}
	#home-button-container * {
		font-size: 1.5rem;
		min-width: 56px;
	}

	/*/////////////////////////*/
	/*///// BODY CONTENT ///// */
	div.title-text-wrapper:nth-child(1) {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		justify-content: center;
	}

	#game-question {
		padding: 0 2px;
		font-size: 2rem;
	}
	#game-content {
		grid-template-columns: auto;
		grid-template-rows: auto auto;
		align-items: center;
		justify-items: center;
		justify-content: center;
		width: 100%;
		gap: 40px;
		margin-top: 10px;
	}

	.cloud {
		height: 80px !important;
	}

	/*/////////////////////*/
	/*///// COMP MODE /////*/
	.team-container {
		min-height: 200px;
	}
	/* used to show which team's turn it is */
	.team-container.glow-text-white {
		background-color: #00bbffc0;
		box-shadow: 0 0 8px 8px #00bbffc0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 75vw;
		padding: 16px 0;
		margin-top: 8px;
		z-index: 1001;
	}
	#team0 {
		padding-left: 0;
		grid-area: 1 / 1 / span 1 / span 1;
	}
	#team1 {
		padding-right: 0;
		grid-area: 2 / 1 / span 1 / span 1;
	}
	#team0.game-started {
		grid-area: 2 / 1 / span 1 / span 3;
	}
	#team1.game-started {
		grid-area: 2 / 1 / span 1 / span 3;
	}
	/* team name (the one the users DON'T chose) */
	.team-container h2:nth-child(1) {
		font-size: 2rem;
	}
	/* team name (the one the users chose) */
	.team-container h2:nth-child(2) {
		font-size: 2rem;
		margin: 16px 0;
	}
	/* team scores */
	.team-container h2:nth-child(3) {
		font-size: 4rem;
		font-weight: 900;
		margin-top: 64px;
		display: none; /* won't be displayed until team names are chosen */
	}
	/* choose team name input form */
	.team-container form {
		gap: 0;
		/* move up into invisible h2, becomes visible when team name is chosen */
		margin-top: -68px;
	}
	.team-container form input[type=text] {
		font-size: 1.5rem;
		border-radius: 12px;
		height: 48px;
		width: 80vw;
	}

	/*////////////////////*/
	/*///// FREEPLAY /////*/
	/* left hand score */
	div.freeplay-score:nth-child(1) {
		display: none !important;
	}
	/* right hand score */
	div.freeplay-score:nth-child(5) {
		grid-area: 2 / 1 / span 1 / span 3;
		width: 10px;
		margin: 16px auto 0;
		text-align: center;
	}
	/* add in "your score" before score */
	div.freeplay-score:nth-child(5)::before {
		font-family: 'Chelsea Market', Arial, sans-serif;
		white-space: nowrap;
		content: 'YOUR SCORE:';
	}
	.freeplay-score h2 {
		font-family: 'Chelsea Market', Arial, sans-serif;
		font-size: 3rem;
	}

	/*///////////////////*/
	/*///// ANSWERS /////*/
	#answers {
		grid-column: 1 / span 3;
		padding: 0 40px;
	}
	#answers label {
		font-size: 1.75rem;
		/* reduce elements jumping around with longer answers, high enough to allow for two lines */
		min-height: 4.7rem;
		min-width: 200px; /* provide some uniformity */
	}
	/* name choosing form, and answer submit buttons */
	.team-container form input[type=submit],
	#answers input[type=submit] {
		font-size: 2.25rem;
		border-radius: 12px;
		height: 55px;
		width: 250px;
		margin: 32px auto 0;
	}

	/*/////////////////*/
	/*///// WAVES /////*/
	#waves svg {
		height: 100px;
	}

	/*///////////////////*/
	/*///// FOOTER //////*/
	footer p {
		font-size: 0.95rem;
	}
	footer .socials img {
		height: 30px;
		width: 30px;
	}
}

@media screen and (max-width: 575px) {
	/*///////////////////*/
	/*///// HEADER ///// */
	#about-link {
		font-size: 1.5rem;
	}
	#home-link {
		font-size: 1.5rem;
	}

	/*/////////////////////////*/
	/*///// BODY CONTENT ///// */
	.title-top-letter {
		font-size: 2rem;
	}
	.title-main-letter {
		font-size: 3.2rem;
	}

	#mode {
		grid-template-columns: auto;
		grid-template-rows: auto auto auto auto;
		width: 98vw;
		margin: 48px auto -48px;
	}
	#mode h2 {
		/* change font, fits better when elements are closer together */
		font-family: 'Chelsea Market', Arial, sans-serif;
		font-size: 1.9rem;
	}
	/* select a mode! text */
	#mode h2:first-of-type {
		grid-area: 1 / 1 / span 1 / span 1;
	}
	/* or text */
	#mode h2:last-of-type {
		grid-area: 3 / 1 / span 1 / span 1;
	}
	/* mode buttons */
	#mode button {
		font-size: 2rem;
		border-radius: 12px;
		height: 80px;
		width: 250px;
		margin: 16px;
	}
	#mode-comp {
		grid-area: 2 / 1 / span 1 / span 1;
	}
	#mode-free {
		grid-area: 4 / 1 / span 1 / span 1;
	}

	/*/////////////////////*/
	/*///// COMP MODE /////*/
	/* used to show which team's turn it is */
	.team-container.glow-text-white {
		width: 85vw !important;
	}
}

@media screen and (max-width: 450px) {
	/*///////////////////*/
	/*///// HEADER ///// */
	/* add spacing around h3 subheadings (only last two), is too close together on smaller devices */
	#about-text > h3:nth-child(8),
	#about-text > h3:nth-child(11) {
		margin-top: 48px;
	}
	/* increase spacing between paragraphs, gets too condensed on mobile */
	#about-text .paragraph-spacing-top {
		margin-top: 12px;
	}
	#about-popup .socials {
		margin-bottom: 80px;
	}

	/*/////////////////////////*/
	/*///// BODY CONTENT ///// */
	/* make "get" in title center aligned (and move "quizzed?" to next line), as on smaller screens "get quizzed?" moves to the left, and will start to wrap chars to next lines */
	h1.hide-on-mode-click:nth-child(1) {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* remove a few "ooo" from tooooo to prevent text wrapping to next line */
	span.title-top-letter:nth-child(n + 19) {
		display: none;
	}

	#game-question {
		font-size: 1.6rem;
	}

	/*////////////////////*/
	/*///// FREEPLAY /////*/
	/* the "your score" */
	div.freeplay-score:nth-child(5)::before {
		font-size: 0.95rem;
	}
	.freeplay-score h2,
	.team-container > h2:nth-child(3) {
		font-size: 2.3rem;
	}

	/*///////////////////*/
	/*///// ANSWERS /////*/
	#answers {
		gap: 8px;
		padding: 0;
		/* fix bug where this element would exceed viewport width if answer text is too long */
		max-width: 100vw;
	}
	#answers label {
		font-size: 1.4rem;
		line-height: 1.4rem;
		/* keep label height high enough to hold two lines without adjusting */
		min-height: 3.5rem;
		/* give answers more space */
		padding-left: 16px;
		padding-right: 16px;
	}
	/* name choosing form, and answer submit buttons */
	.team-container form input[type=submit],
	#answers input[type=submit] {
		font-size: 1.6rem;
		margin-top: 24px;
	}
}