Update CSS

styles/buttons.css

@@ -10,8 +10,8 @@
 	border: none;
 	border-radius: 3px;
 	background-color: var(--buttons-color);
+	padding-block: 7px;
 	min-width: 100px;
-	min-height: 30px;
 	color: var(--button-text);
 }
 
@@ -42,6 +42,6 @@ input[type="checkbox"] {
 }
 
 input[type="checkbox"]:checked + label::before {
-	background-image: url("/assets/check.svg");
+	background-image: url("../assets/check.svg");
 	background-color: var(--button-hover);
 }

styles/export.css

@@ -1,7 +1,9 @@
 .export-container {
+	display: flex;
 	position: fixed;
 	top: 50%;
 	left: 50%;
+	flex-direction: column;
 	transform: translate(-50%, -50%);
 	opacity: 0;
 	z-index: 2;
@@ -11,6 +13,7 @@
 	background-color: var(--white);
 	padding: 20px;
 	width: 100%;
+	max-height: calc(100dvh - 50px);
 	pointer-events: none;
 }
 
@@ -20,7 +23,6 @@
 }
 
 .exported-image-container {
-	max-height: 512px;
 	overflow-y: auto;
 }
 
@@ -37,7 +39,8 @@
 
 .export-button-container button {
 	margin: 0;
-	padding: 10px 15px;
+	border-radius: 5px;
+	padding: 10px 20px;
 }
 
 @media (width >= 786px) {

styles/main.css

@@ -39,8 +39,7 @@ body {
 
 .tier {
 	flex-grow: 1;
-	border-top: 1px solid var(--black);
-	border-bottom: 1px solid var(--black);
+	border-block: 1px solid var(--black);
 	background-color: var(--tier-bg);
 }
 

styles/square-img.css

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

styles/tier-label.css

@@ -2,7 +2,8 @@
 	display: flex;
 	position: relative;
 	align-items: center;
-	transition: background-color 300ms;
+	transition-duration: 300ms;
+	transition-property: background-color, color;
 	border: 1px solid var(--black);
 	width: 100px;
 	min-height: 80px;
@@ -13,7 +14,7 @@
 	border: 1px solid var(--white);
 }
 
-p {
+.tier-label p {
 	margin: 6px 2px;
 	width: 96px;
 	text-align: center;

styles/tier-options.css

@@ -1,8 +1,7 @@
 .tier-options {
 	display: flex;
 	align-items: center;
-	border-top: 1px solid var(--option-borders);
-	border-bottom: 1px solid var(--option-borders);
+	border-block: 1px solid var(--option-borders);
 	background-color: var(--black);
 	width: 80px;
 }