diff --git a/.history/magic/style_20230922122918.css b/.history/magic/style_20230922122918.css
new file mode 100644
index 0000000..ec58cf4
--- /dev/null
+++ b/.history/magic/style_20230922122918.css
@@ -0,0 +1,106 @@
+html {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+}
+
+body {
+	background: linear-gradient(60deg, darkolivegreen, darkseagreen);
+	color: white;
+	font-family: "Fredoka";
+	width: 100%;
+	margin: 0;
+	overflow: hidden;
+	padding: 0;
+}
+
+canvas {
+	width: 100vw;
+	height: 100vh;
+	position: absolute;
+	z-index: -10;
+	isolation: isoltate;
+}
+
+h1 {
+	margin: auto;
+	margin-top: 20px;
+	width: fit-content;
+	font-size: 50px;
+}
+ol, li {
+	margin: auto;
+	width: fit-content;
+	font-size: 24px;
+}
+
+.icon-row {
+	display: flex;
+}
+
+.icon {
+	display: grid;
+	place-content: center;
+	text-align: center;
+	margin: 10px;
+}
+
+.block {
+	display: block;
+	width: 200px;
+	margin: auto;
+	margin-top: 20px;
+	border: none;
+	background-color: seagreen;
+	padding: 14px 28px;
+	font-size: 24px;
+	cursor: pointer;
+	text-align: center;
+	transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out,
+		font-size 0.5s ease-in-out;
+	color: white;
+	border-radius: 10px;
+	font-family: "Fredoka";
+}
+
+.block:hover {
+	width: 300px;
+	background-color: mediumseagreen;
+	font-size: 28px;
+}
+
+.block-small {
+	display: block;
+	width: 192px;
+	margin: auto;
+	border: none;
+	background-color: seagreen;
+	padding: 14px 28px;
+	font-size: 24px;
+	cursor: pointer;
+	text-align: center;
+	transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out,
+		font-size 0.5s ease-in-out;
+	color: white;
+	border-radius: 10px;
+	font-family: "Fredoka";
+}
+
+.block-small:hover {
+	width: 256px;
+	background-color: mediumseagreen;
+}
+
+
+#icon-rows {
+	margin: 5%;
+}
+
+#reveal-modal {
+	margin: auto;
+	display: block;
+}
+
+#answer {
+	margin: auto;
+}
diff --git a/.history/magic/style_20230922122920.css b/.history/magic/style_20230922122920.css
new file mode 100644
index 0000000..5c4d0a7
--- /dev/null
+++ b/.history/magic/style_20230922122920.css
@@ -0,0 +1,106 @@
+html {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+}
+
+body {
+	background: linear-gradient(60deg, darkolivegreen, darkseagreen);
+	color: white;
+	font-family: "Fredoka";
+	width: 100%;
+	margin: 0;
+	overflow: hidden;
+	padding: 0;
+}
+
+canvas {
+	width: 100vw;
+	height: 100vh;
+	position: absolute;
+	z-index: -10;
+	isolation: isolate;
+}
+
+h1 {
+	margin: auto;
+	margin-top: 20px;
+	width: fit-content;
+	font-size: 50px;
+}
+ol, li {
+	margin: auto;
+	width: fit-content;
+	font-size: 24px;
+}
+
+.icon-row {
+	display: flex;
+}
+
+.icon {
+	display: grid;
+	place-content: center;
+	text-align: center;
+	margin: 10px;
+}
+
+.block {
+	display: block;
+	width: 200px;
+	margin: auto;
+	margin-top: 20px;
+	border: none;
+	background-color: seagreen;
+	padding: 14px 28px;
+	font-size: 24px;
+	cursor: pointer;
+	text-align: center;
+	transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out,
+		font-size 0.5s ease-in-out;
+	color: white;
+	border-radius: 10px;
+	font-family: "Fredoka";
+}
+
+.block:hover {
+	width: 300px;
+	background-color: mediumseagreen;
+	font-size: 28px;
+}
+
+.block-small {
+	display: block;
+	width: 192px;
+	margin: auto;
+	border: none;
+	background-color: seagreen;
+	padding: 14px 28px;
+	font-size: 24px;
+	cursor: pointer;
+	text-align: center;
+	transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out,
+		font-size 0.5s ease-in-out;
+	color: white;
+	border-radius: 10px;
+	font-family: "Fredoka";
+}
+
+.block-small:hover {
+	width: 256px;
+	background-color: mediumseagreen;
+}
+
+
+#icon-rows {
+	margin: 5%;
+}
+
+#reveal-modal {
+	margin: auto;
+	display: block;
+}
+
+#answer {
+	margin: auto;
+}
diff --git a/magic/style.css b/magic/style.css
index c6e3808..5c4d0a7 100644
--- a/magic/style.css
+++ b/magic/style.css
@@ -19,6 +19,7 @@ canvas {
 	height: 100vh;
 	position: absolute;
 	z-index: -10;
+	isolation: isolate;
 }
 
 h1 {