*{box-sizing:border-box}


.home-actions{

	position:fixed;

	top:20px;

	right:20px;

	display:flex;

	flex-direction:column;

	gap:12px;

	z-index:1000;

}



.home-button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:60px;

    height:60px;

    border-radius:50%;

    text-decoration:none;

    font-size:18px;

    font-weight:500;

    box-shadow:
    0 5px 15px rgba(0,0,0,.35);

    transition:.25s;

}



.home-button span{

	font-size:24px;

}



.home-button:hover{

	transform:translateY(-5px);

	box-shadow:
	0 10px 25px rgba(0,0,0,.5);

}



/* botão de apoio com destaque */

/*.home-button:last-child{

	border:1px solid #bb86fc;

}



.home-button:last-child:hover{

	background:#bb86fc;

	color:#000;

}*/








.button-container {
	display: flex;
	justify-content: center;
	margin: 24px 0;
}



.material-symbols-rounded {
	font-size: 20px;
}



body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font:16px/1.4 Arial,sans-serif;
}

main{
	max-width:1500px;
	margin:auto;
	padding:40px 32px 60px;
}

#logo{
	font-family:"Permanent Marker",cursive;
	font-size:72px;
	text-align:center;
	margin:40px 0 24px;
	letter-spacing:2px;
}

#search{
	display:block;
	width:min(760px,95%);
	margin:0 auto 30px;
	padding:18px 24px;
	border:1px solid var(--border);
	border-radius:999px;
	font-size:18px;
	outline:none;
	box-shadow:var(--shadow);
	transition:.2s;
	/*background:var(--surface);*/
}
#search:focus{
	border-color:var(--primary);
	box-shadow:0 2px 10px rgba(26,115,232,.25);
}

.toolbar{
	display:flex;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
	gap:16px;
	margin:24px 0;
}

.toolbar select{
	padding:10px 14px;
	border:1px solid var(--border);
	border-radius:10px;
	/*background:#fff;*/
	font-size:15px;
	cursor:pointer;
}

.grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
	gap:22px;
}

.card{
	cursor:pointer;
	transition:.2s;
	text-align:center;
}

.card:hover{
	transform:translateY(-6px);
}

.card img{
	width:100%;
	aspect-ratio:2/3;
	object-fit:cover;
	border-radius:12px;
	box-shadow:var(--shadow);
	transition:.2s;
	background:#eee;
}

.card:hover img{
	box-shadow:var(--shadow-hover);
}

.card div{
	margin-top:10px;
	font-weight:600;
	font-size:15px;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}

.pagination{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
	margin:42px 0 10px;
}

.pagination button{
	min-width:42px;
	height:42px;
	border-radius:10px;
	cursor:pointer;
	font-size:15px;
	transition:.2s;
}

/*.pagination button:hover{
	opacity:0.5;
}*/

.pagination .active{
	background:var(--primary);
	color:#fff;
	border-color:var(--primary);
	opacity:0.5;
}

#count{
	text-align:center;
	color:var(--muted);
	margin-top:12px;
}

@media (max-width:900px){
	h1{font-size:52px}
	.grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

@media (max-width:600px){
	main{padding:20px 16px 40px}
	h1{font-size:42px}
	.toolbar{flex-direction:column;align-items:stretch}
	#search{font-size:16px;padding:14px 18px}
	.grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}
}


input,
button,
select,
textarea{
	background:var(--surface);
	color:var(--text);

	border:1px solid var(--border);

	font:inherit;

	/*border-radius:10px;*/

	transition:.2s;
}

/*input,
select,
textarea{
	padding:12px 16px;
}*/

button{
	/*padding:12px;*/

	cursor:pointer;

	background:var(--primary);
	color:#000;

	border:none;

	font-weight:600;
}

button:hover{
	opacity:.85;
}

input::placeholder,
textarea::placeholder{
	color:var(--text-secondary);
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible{
	outline:none;
	border-color:var(--primary);
	box-shadow:
		0 0 0 3px rgba(187,134,252,.25);
}



/*a{
    color:var(--primary);
    text-decoration:none;

    transition:.2s;
}

a:hover{
    color:var(--primary-hover);
    text-decoration:underline;
}

a:visited{
    color:var(--primary);
}

a:active{
    opacity:.8;
}*/