@font-face {
	font-family: SeuratProB;
	src: url("//cdn.nook.lol/seurat.ttf") format("truetype");
	font-weight: 800;
	font-display: swap;
}

@font-face {
	font-family: FinkHeavy;
	src: url("//cdn.nook.lol/FinkHeavy.otf") format("opentype");
	font-display: swap;
}

html, body {
	height: 100%;
	margin: 0;
}

#content {
	font-size: 12pt;
	font-family: "SeuratProB", "Comic Sans MS", sans-serif;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	align-items: center;
}

h1 {
	font-size: min(60pt, 12vw);
	font-family: "FinkHeavy", Georgia, serif;
	font-weight: 500;
	margin: 30px 0 -10px 0;
	line-height: 1;
}

a { display: inline; }
h2 { margin: 0; text-align: center; font-size: 20pt; }
h3 { margin: 8px 0; }
ol { padding-inline-start: 30px; margin: 8px 0; }


/* Homepage */

.corner {
	position: absolute;
	right: 10px;
	padding: 10px;
	font-size: 14pt;
}

.donation-icon {
	width: 28px;
	vertical-align: middle;
	margin-top: -5px;
	margin-right: 3px;
}

#intro {
	text-align: center;
	font-style: italic;
	width: 650px;
}

#note {
	text-align: center;
	width: 520px;
	background-color: rgba(255, 255, 255, 0.2);
	padding: 10px;
	border-radius: 5px;
}

#instructions {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.info {
	width: 550px;
	text-align: center;
	margin: 10px;
}

.accordion {
	background-color: #F1E369;
	color: #6B6519;
	font-family: "SeuratProB", "Comic Sans MS", sans-serif;
	font-size: 14pt;
	line-height: 30pt;
	cursor: pointer;
	margin-top: 15px;
	padding-bottom: 3px;
	border-radius: 50px/30px;
	width: 350px;
	border: none;
	outline: none;
	transition: background-color 0.2s;
}

.active, .accordion:hover {
	color: #473133;
	background-color: #F3D630;
}

.panel {
	line-height: 2;
	padding: 0 18px;
	max-height: 0;
	transition: max-height 0.2s ease-out;
	overflow: hidden;
}

.active + .panel {
	max-height: 750px;
}

#outro {
	font-style: italic;
	margin-bottom: 30px;
	color: #ffc37a;
	width: 400px;
	text-align: center;
	font-size: 13pt;
}

#upload {
	width: 530px;
	margin-bottom: 25px;
}

#hashtags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	min-width: 400px;
}

#hashtags > div {
	margin: 10px 20px;
	width: 380px;
	text-align: center;
}

#locales {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#locales > div { margin: 0 10px; }

.twitter-tweet {
	min-width: 550px;
	max-height: 430px !important;
	overflow: hidden;
}

.tweet { min-height: 450px; }


/* Results */

body.results { overflow: hidden; }

body.results #content { height: 100%; }

#integrations {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
	max-width: 830px;
	flex-wrap: wrap;
}

#integrations a {
	margin: 4px 8px;
}

#integrations a:hover {
	filter: brightness(90%);
}

.villagerdb img {
	width: 150px;
	border-radius: 5px;
}

.nookexchange img { width: 150px; }

.nookmarket img { width: 150px; border-radius: 5px; }

.nookplaza img { width: 150px; }

.animalguide img { width: 150px; border-radius: 5px; }

.acnhguide img { width: 135px; border-radius: 5px; }

.travelguide img { width: 150px; }

.acnhplanner img { width: 150px; }

.ultimatecatalogue img { width: 150px; }

.inook img { width: 150px; }

#results {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	align-items: center;
}

#results > button {
	font-size: 16pt;
	font-family: "FinkHeavy";
	padding: 8px;
}

#copyall {
	width: 518px;
	border: 1px solid #767676;
	border-bottom: 0;
	outline: none;
	cursor: pointer;
	transition: all 0.1s;
}

#copyall:hover {
	background-color: #F3D630;
}

#textarea {
	width: 450px;
	height: 100%;
	background-color: #FFFBB3;
	font-size: 20pt;
	line-height: 54px;
	color: #646018;
	font-family: "SeuratProB", "Comic Sans MS", sans-serif;
	padding-left: 64px;
	background-image: url('//cdn.nook.lol/item_row.png');
	background-position: 0 3px;
	background-attachment: local;
}

#textarea::selection {
	background: #F7E439;
	margin: 0;
}

#plaintext {
	text-align: center;
}

#footer {
	margin: 16px;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 500px;
	font-size: 14pt;
}

/* FAQ */

.question {
	width: 700px;
	color: #ffc37a;
	margin-top: 20px;
}
.answer {
	max-width: 680px;
	line-height: 1.8;
	margin: 10px;
}

#email {
    unicode-bidi: bidi-override;
    direction: rtl;
}


/* Missing */

.missing {
	font-family: "SeuratProB", "Comic Sans MS", sans-serif;
	text-align: center;
}

#missing-copy {
	outline: 0;
	border: 0;
	color: #222;
	background-color: #F1E369;
	font-family: "FinkHeavy";
	font-size: 18pt;
	padding: 8px 16px;
	margin-top: 0.5em;
	border-radius: 5px;
	transition: all 0.1s;
	cursor: pointer;
	box-shadow: 0 0 3px 0px #bbb;
}

#missing-copy:hover {
	background-color: #F3D630;
}

#missing-link {
	margin-top: 1.5em;
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    vertical-align: bottom;
    font-size: 15px;
    font-family: "SeuratProB", "Comic Sans MS", sans-serif;
}

/* Missing recipes */

.missing h2 {
	margin: 1em;
}

#recipe-card-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
	grid-gap: 3em 5em;
	padding: 1em 6em;
}

#recipe-card-list li {
    list-style-type: none;
}

.missing-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.recipe-card {
	padding: .5em;

	border: .5em solid #f4f0e2;
	border-radius: .5em;
	background-color: #fff;
	color: #fff;

	background-image: url(//cdn.nook.lol/WorkBenchCardPatternT.png);
	background-size: cover;
	background-position: center;
	background-blend-mode: darken;
	box-shadow: 0 0.25em 0.5em 0 rgba(0,0,0,.25);

	border-width: .5em;
	border-radius: .5em;
	width: 160px;
	height: 240px;
}

.cooking-card {
	background-image: url(//cdn.nook.lol/KitchenCardPatternT.png);
}

.tapa-card {
	background-image: url(//cdn.nook.lol/WorkBenchCardPatternTapaT.png);
}

@media screen and (max-width: 700px) {
  #recipe-card-list {
    padding: 3em 0;
    margin: auto;
    width: 420px;
  }
}

/*.recipe-card.beige { background-color:#e5daac; color:#785737 }
.recipe-card.blue { background-color:#bad5eb; color:#3d4a8c }
.recipe-card.brick { background-color:#bc9e6e; color:#52361f }
.recipe-card.brown { background-color:#94693c; color:#d2bf9a }
.recipe-card.cream { background-color:#f7f2bb; color:#785737 }
.recipe-card.dark-gray { background-color:#6a6a6e; color:#c4c6c7 }
.recipe-card.gold { border-color:#ae9846; background-color:#d6c574; color:#655b22 }
.recipe-card.green { background-color:#95d57c; color:#2f5a26 }
.recipe-card.light-gray { background-color:#b9babe; color:#505055 }
.recipe-card.orange { background-color:#f6c568; color:#8e671c }
.recipe-card.pink { background-color:#f9b9ba; color:#c33d3e }
.recipe-card.purple { background-color:#d5b4e4; color:#8f7999 }
.recipe-card.red { background-color:#d8595a; color:#9c1a19 }
.recipe-card.silver { border-color:#787b7a; background-color:#9e9fa3; color:#e2e3e5 }
.recipe-card.white { background-color:#e8e8e6; color:#83837a }
.recipe-card.yellow { background-color:#e7da77; color:#796d22 }*/

.color-12 { background-color: #dc5c5c; }
.color-13 { background-color: #ecdd78; }
.color-14 { background-color: #97d97e; }
.color-15 { background-color: #bed7ee; }
.color-16 { background-color: #bfa06f; }
.color-17 { background-color: #bdbdc0; }
.color-40 { background-color: #ffbbbb; }
.color-41 { background-color: #eaddae; }
.color-42 { background-color: #976b40; }
.color-43 { background-color: #fcc869; }
.color-44 { background-color: #dcc0e9; }
.color-45 { background-color: #6d6d70; }
.color-46 { background-color: #edecea; }
.color-47 { background-color: #dac875; }
.color-48 { background-color: #a0a0a4; }
.color-50 { background-color: #fff7bc; }
.color-51 { background-color: #bdbdc0; }
.color-52 { background-color: #976b40; }
.color-53 { background-color: #6d6d70; }
.color-54 { background-color: #dac875; }
.color-55 { background-color: #bfa06f; }
.color-56 { background-color: #527b3d; }
.color-60 { background-color: #5cace7; }
.color-61 { background-color: #d7dcce; }
.color-62 { background-color: #81554c; }
.color-63 { background-color: #a4622b; }
.color-64 { background-color: #d0ba90; }
.color-65 { background-color: #5d6062; }
.color-66 { background-color: #b8da81; }
.color-67 { background-color: #385235; }
.color-68 { background-color: #8fd9d1; }
.color-69 { background-color: #424472; }
.color-70 { background-color: #ffe1cc; }
.color-71 { background-color: #ae4444; }
.color-72 { background-color: #f0ea99; }
.color-73 { background-color: #f9cd75; }
.color-74 { background-color: #62486a; }
.color-75 { background-color: #a79054; }
.color-76 { background-color: #b2dff4; }
.color-77 { background-color: #a09790; }

.color-39, .color-47, .color-54 { border-color: #b7a052; }
.color-48 { border-color: #7d828a; }

.recipe-img { max-width: 100%; padding: 1em 0; }
.recipe-name { text-align: center; mix-blend-mode: overlay; }

.color-13 .recipe-name,
.color-15 .recipe-name,
.color-40 .recipe-name,
.color-41 .recipe-name,
.color-43 .recipe-name,
.color-44 .recipe-name,
.color-46 .recipe-name,
.color-50 .recipe-name,
.color-61 .recipe-name,
.color-70 .recipe-name,
.color-72 .recipe-name,
.color-73 .recipe-name,
.color-76 .recipe-name { color: #666; mix-blend-mode: difference; }


/* Missing critters */
#critter-icon-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, 14em);
	grid-gap: 0;
	padding: 1em 6em;
	justify-content: center;
}

#critter-icon-list li {
    list-style-type: none;
    width: 14em;
}

.critter-icon {
    border: 1px solid #CCC28E;
    width: 12em;
    height: 11em;
    padding: 1em;
}

/* Missing reactions */
.reaction-icon {
    width: 12em;
    height: 11em;
    padding: 1em;
}

.reaction-source {
	font-size: 9pt;
}

/* Missing music */
#music-icon-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, 20em);
	grid-gap: 2em 4em;
	padding: 1em 6em;
	justify-content: center;
}

#music-icon-list li {
    list-style-type: none;
    width: 14em;
}

body.missing.music {
	background-color: rgb(79, 119, 226);
	color: white;
	text-shadow: 0 0 4px black;
}

.music-icon, .music-img { width: 20em; }
.music-name { margin-top: 0.5em; }

/* user search */
.catalog-row {
	margin: 5px;
}

/* Dark theme */
body { background-color: #49382e; color: #FFFBB4; }
code { font-size: 14pt; color: #eaff80;}
h1 { text-shadow: 2px 2px 3px black; color: #F1E369; }
em { color: #ffc37a; font-style: normal; }
a {	color: #F1E369; text-decoration: none; }
a:hover { filter: saturate(150%); }
.tweet.dark { display: block; }
.tweet.light { display: none; }

/* Light theme */
@media (prefers-color-scheme: light) {
	body { background-color: #FFFBB4; color: #736e1d; }
	body.results { background-color: #F1E369; }
	body.missing.music { background-color: rgb(101, 217, 238); }

	code { color: #006611; }
	h1 { text-shadow: 2px 2px 3px white; color: #6E661B; }
	em { color: #b34d4d;}
	a {	color: #3a9f65; }
	.missing.recipes { background-color: #E6DFC4; }
	.missing.critters { background-color: #F4ECBE; }
	.tweet.dark { display: none; }
	.tweet.light { display: block; }
	.question { color: #66483d; }
	#note { background-color: rgba(241, 227, 105, 0.8); }
	#outro { color: #a5681d; }
}