/* Prevent overflow caused by padding */
*{
    box-sizing:border-box;
}

#main
{
	opacity:0;
	transform: translateX(40px);
	transition: opacity .25s ease, transform .25s ease;
}

#main.loaded
{
	opacity:1;
	transform: translateX(0);
}

#main.leaving{
	opacity:0;
	transform: translateX(-40px);
}


body{

	margin:0;

	background:var(--bg);

	color:var(--text);

	font-family:Roboto,Arial,sans-serif;



	/*prevents the browser from displaying a horizontal scrollbar*/
	overflow-x:hidden;
}

main{

	max-width:900px;

	margin:40px auto;

	padding:20px;

}

.hero h1{

	font-size:36px;

	margin-top:0;

}

.panel h2{

	margin-top:0;

}

.panel{

	background:var(--surface);

	margin-top:25px;

	padding:25px;

	border-radius:20px;

	box-shadow:
	0 8px 20px rgba(0,0,0,.4);
}

.panel p{
	font-size:17px;

	line-height:1.7;

	color:var(--text-secondary);
}







/* Responsive images */
img{
    max-width:100%;
    height:auto;
    display:block;
}

/* Responsive videos/iframes */
iframe,
video{
    max-width:100%;
}

/* Prevent long words/URLs from breaking layout */
p,
h1,
h2,
h3,
span,
a{
    overflow-wrap:break-word;
}

/* Mobile */
@media (max-width:768px){

    main{

        margin:20px auto;

        padding:15px;

    }

    .hero h1{

        font-size:28px;

    }

    .panel{

        padding:20px;

        border-radius:16px;

    }

    .panel p{

        font-size:16px;

        line-height:1.6;

    }

}

/* Small phones */
@media (max-width:480px){

    main{

        margin:10px auto;

        padding:12px;

    }

    .hero h1{

        font-size:24px;

    }

    .panel{

        padding:16px;

        border-radius:12px;

    }

    .panel p{

        font-size:15px;

    }

}








/*

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

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



h1{
	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;
}
#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;
	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 .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;

	transition:.2s;
}

button{

	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;
}*/