Import style as a style object

src/app/[...file]/page.tsx

@@ -2,18 +2,7 @@ import type { Metadata, ResolvingMetadata } from 'next';
 import Image from 'next/image';
 
 import Content from './content';
-import {
+import * as style from './page.css';
-	root,
-	center,
-	title_group,
-	title_text_group,
-	supertitle,
-	title,
-	download_button,
-	download_button_image,
-	download_text_section,
-	download_text,
-} from './page.css';
 import download_image from './download.png';
 
 type SearchParams = { [key: string]: string | string[] | undefined };
@@ -45,25 +34,25 @@ export default async function Page({
 	params, searchParams
 }: Props) {
 	const path = get_path(params.file);
-	const root_url = `https://${get_root(searchParams)}/`;
+	const root = `https://${get_root(searchParams)}/`;
 
 	return (
-		<div className={root}>
+		<div className={style.root}>
-			<div className={center}>
+			<div className={style.center}>
-				<div className={title_group}>
+				<div className={style.title_group}>
-					<div className={title_text_group}>
+					<div className={style.title_text_group}>
-		 				<p className={supertitle}>{root_url}</p>
+		 				<p className={style.supertitle}>{root}</p>
-						<p className={title}>{path}</p>
+						<p className={style.title}>{path}</p>
 					</div>
-					<button className={download_button}>
+					<button className={style.download_button}>
 						<Image
-							className={download_button_image}
+							className={style.download_button_image}
 							src={download_image}
 							alt="Download Button"
 						/>
 					</button>
 				</div>
-				<Content src={`${root_url}${path}`} />
+				<Content src={`${root}${path}`} />
 			</div>
 		</div>
 	);