update css for dart sass compatibility

css/reveal.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 /**
  * reveal.js
  * http://revealjs.com
@@ -247,11 +249,11 @@ $controlsArrowAngleActive: 36deg;
 
 @mixin controlsArrowTransform( $angle ) {
 	&:before {
-		transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( $angle );
+		transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( $angle );
 	}
 
 	&:after {
-		transform: translateX(($controlArrowSize - $controlArrowLength)/2) translateY(($controlArrowSize - $controlArrowThickness)/2) rotate( -$angle );
+		transform: translateX(($controlArrowSize - $controlArrowLength)*0.5) translateY(($controlArrowSize - $controlArrowThickness)*0.5) rotate( -$angle );
 	}
 }
 
@@ -300,11 +302,11 @@ $controlsArrowAngleActive: 36deg;
 		left: 0;
 		width: $controlArrowLength;
 		height: $controlArrowThickness;
-		border-radius: $controlArrowThickness/2;
+		border-radius: $controlArrowThickness*0.5;
 		background-color: currentColor;
 
 		transition: all 0.15s ease, background-color 0.8s ease;
-		transform-origin: floor(($controlArrowThickness/2)*10)/10 50%;
+		transform-origin: math.div(floor(($controlArrowThickness*0.5)*10), 10) 50%;
 		will-change: transform;
 	}
 
@@ -326,7 +328,7 @@ $controlsArrowAngleActive: 36deg;
 
 	.navigate-left {
 		right: $controlArrowSize + $controlArrowSpacing*2;
-		bottom: $controlArrowSpacing + $controlArrowSize/2;
+		bottom: $controlArrowSpacing + $controlArrowSize*0.5;
 		transform: translateX( -10px );
 
 		&.highlight {
@@ -336,7 +338,7 @@ $controlsArrowAngleActive: 36deg;
 
 	.navigate-right {
 		right: 0;
-		bottom: $controlArrowSpacing + $controlArrowSize/2;
+		bottom: $controlArrowSpacing + $controlArrowSize*0.5;
 		transform: translateX( 10px );
 
 		.controls-arrow {
@@ -349,7 +351,7 @@ $controlsArrowAngleActive: 36deg;
 	}
 
 	.navigate-up {
-		right: $controlArrowSpacing + $controlArrowSize/2;
+		right: $controlArrowSpacing + $controlArrowSize*0.5;
 		bottom: $controlArrowSpacing*2 + $controlArrowSize;
 		transform: translateY( -10px );
 
@@ -359,7 +361,7 @@ $controlsArrowAngleActive: 36deg;
 	}
 
 	.navigate-down {
-		right: $controlArrowSpacing + $controlArrowSize/2;
+		right: $controlArrowSpacing + $controlArrowSize*0.5;
 		bottom: -$controlArrowSpacing;
 		padding-bottom: $controlArrowSpacing;
 		transform: translateY( 10px );
@@ -515,25 +517,25 @@ $controlsArrowAngleActive: 36deg;
 		.navigate-left {
 			top: 50%;
 			left: $spacing;
-			margin-top: -$controlArrowSize/2;
+			margin-top: -$controlArrowSize*0.5;
 		}
 
 		.navigate-right {
 			top: 50%;
 			right: $spacing;
-			margin-top: -$controlArrowSize/2;
+			margin-top: -$controlArrowSize*0.5;
 		}
 
 		.navigate-up {
 			top: $spacing;
 			left: 50%;
-			margin-left: -$controlArrowSize/2;
+			margin-left: -$controlArrowSize*0.5;
 		}
 
 		.navigate-down {
 			bottom: $spacing - $controlArrowSpacing + 0.3em;
 			left: 50%;
-			margin-left: -$controlArrowSize/2;
+			margin-left: -$controlArrowSize*0.5;
 		}
 	}
 
@@ -1701,7 +1703,7 @@ $notesWidthPercent: 25%;
 .reveal .speaker-notes {
 	display: none;
 	position: absolute;
-	width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
+	width: math.div($notesWidthPercent, (1 - math.div($notesWidthPercent,100))) * 1%;
 	height: 100%;
 	top: 0;
 	left: 100%;
@@ -1764,7 +1766,6 @@ $notesWidthPercent: 25%;
 		top: 100%;
 		left: 0;
 		width: 100%;
-		height: (30/0.7)*1%;
 		height: 30vh;
 		border: 0;
 	}
@@ -1778,7 +1779,6 @@ $notesWidthPercent: 25%;
 
 	.reveal.show-notes .speaker-notes {
 		top: 100%;
-		height: (40/0.6)*1%;
 		height: 40vh;
 	}