/*** GENERAL ***/
html, body {height: 100%; margin: 0;}
body {text-align: center; padding: 120px 0 0 0; transition: background-color 1s; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; box-sizing: border-box;}
@font-face {font-family: 'peanuts'; src: url('/fonts/peanuts-webfont.woff2') format('woff2'), url('/fonts/peanuts-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'snoopy'; src: url('/fonts/snoopy-webfont.woff2') format('woff2'), url('/fonts/snoopy-webfont.woff') format('woff'); font-weight: normal; font-style: normal;}
h1 {font-family: "peanuts", system-ui; text-transform: uppercase;}


/*** QUOTE ***/
#quote-box {width: 100%; max-width: 600px; margin: 0 auto; box-sizing: border-box; padding: 40px;}
#character-image {max-height: 250px; width: auto; max-width: 100%;}
#quote {font-size: 40px; line-height: 50px; font-family: "peanuts", cursive; text-transform: uppercase; margin-bottom: 0;}
#new-quote-btn {background-color: #000; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; text-transform: uppercase; font-family: "snoopy", system-ui; font-size: 20px;}
#quote-author {font-family: "snoopy", sans-serif; font-size: 27px; text-transform: uppercase; margin-top: 5px;}


/*** FILTER ***/
#character-filters-wrapper {position: absolute; top: 0; left: 0; right: 0; z-index: 10; box-sizing: border-box; padding: 15px 0; display: flex; justify-content: center; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
#character-filters-wrapper::-webkit-scrollbar {display: none;}
#character-filters {display: flex; flex-wrap: nowrap; gap: 0; padding: 0}
.character-filter {border: none; background: transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #000; width: 125px; text-align: center; padding: 10px; border-radius: 12px; transition: background 0.3s;}
.character-filter:hover {background: rgba(0,0,0,0.08);}
.character-filter-image {width: auto; height: 60px; object-fit: contain; margin-bottom: 4px;}
.character-filter-label {font-family: "snoopy", system-ui; font-size: 17px; text-transform: uppercase; white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: border-color 0.3s;}
.character-filter.active .character-filter-label {border-bottom-color: #000; font-weight: bold;}
.all-icon {height: 40px; margin-bottom: 4px;}
.character-filter[data-character="all"] .character-filter-label {border-bottom: 2px solid transparent;}
.character-filter[data-character="all"].active .character-filter-label {border-bottom-color: #000;}


/*** MOBILE ***/
@media only screen and (max-width:768px) {
	#quote {font-size: 23px; line-height: 33px;}
	#quote-author {font-size: 20px;}
	#character-filters-wrapper {justify-content: flex-start;}
	#character-filters {gap: 30px; padding: 0 20px}
	.character-filter {width: auto; padding: 10px 0; border-radius: 0;}
	.character-filter:hover {background: none;}
	.character-filter-label {font-size: 15px}
	.character-filter.active .character-filter-label {font-weight: normal}
}