Simplify dynamic styles

index.html

@@ -7,10 +7,7 @@
 		<link rel="icon" href="./assets/icon.svg" />
 		<link rel="stylesheet" href="./styles/main.css" />
 		<script src="./script.js" type="module"></script>
-
 		<link rel="preload" href="./assets/check.svg" as="image" />
-		<style id="dynamic-styles"></style>
-
 		<link
 			rel="stylesheet"
 			href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/monolith.min.css"

script.js

@@ -12,7 +12,6 @@ const clearColor = "#778899";
 
 const mainContainer = document.querySelector("main");
 const imagesBar = document.querySelector("#images-bar");
-const dynamicStyles = document.querySelector("#dynamic-styles");
 const exportContainer = document.querySelector("#export-container");
 const exportedImage = document.querySelector("#exported-image");
 const blackout = document.querySelector("#blackout");
@@ -227,13 +226,7 @@ function addContainerDrag(container) {
 }
 
 function dynamicStyle(checkbox) {
-	const importText = `@import "./styles/${checkbox.id}.css";`;
-
-	if (checkbox.checked) {
-		dynamicStyles.innerHTML += importText;
-	} else {
-		dynamicStyles.innerHTML = dynamicStyles.innerHTML.replace(importText, "");
-	}
+	document.body.classList.toggle(checkbox.id, checkbox.checked);
 }
 
 async function exportImage() {

styles/square-img.css → styles/dynamic-styles.css

@@ -1,4 +1,4 @@
-.tier-element {
+body.square-img .tier-element {
 	background-position: center;
 	background-size: cover;
 	width: 80px;

styles/main.css

@@ -1,5 +1,6 @@
 @import "./blackout.css";
 @import "./buttons.css";
+@import "./dynamic-styles.css";
 @import "./export.css";
 @import "./pickr.css";
 @import "./tier-label.css";