[Task] #61, cut design update

httpdocs/css/base.css

@@ -123,6 +123,7 @@ Neutral: #131211
 	--bg: color-mix(in oklch, var(--neutral) 20%, white);
 	--text: color-mix(in oklch, var(--neutral) 20%, black);
 	--textOnColor: var(--neutral);
+  --semiBg: #ffffffbb;
 
   /* dark theme, initial state (prefers mq) by react */
   &[data-mui-color-scheme="dark"] {
@@ -133,6 +134,7 @@ Neutral: #131211
 
 		--bg: color-mix(in oklch, var(--neutral) 20%, black);
 		--text: color-mix(in oklch, var(--neutral) 20%, white);
+    --semiBg: #00000077;
 	}
 }
 
@@ -151,6 +153,11 @@ Neutral: #131211
   position:absolute;
   width:1px
 }
+.cut {
+  --cut: 2em;
+  clip-path: polygon(0% var(--cut), var(--cut) 0%, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%);
+}
+
 
 @media screen and
   (prefers-reduced-motion: reduce), 

src/client/css/login.css

@@ -31,6 +31,14 @@
 	animation: move-it 10s linear infinite;
 
 
+	.wrapper {
+		max-width: 50em;
+		padding: 2.5em;
+		margin: 2.5em;
+		background: var(--semiBg);
+		--cut: 3em;
+		.cut { --cut: 1.1em } /* reset for child elements */
+	}
 
 	.headline {
 		margin-inline: auto;
@@ -43,7 +51,7 @@
 	form {
 		display: flex;
 		flex-flow: nowrap column;
-		gap: 1.5em;
+		gap: 2em;
 		margin-bottom: 10vh;
 	}
 
@@ -78,13 +86,16 @@
 
 	.submit {
 		align-self: end;
+		font-size: 1.325rem;
+		min-width: 9em;
+		min-height: 3.5em;
+		border-radius: 0;
 
 		[data-mui-color-scheme="light"] &:not([disabled]) {
 			color: var(--main);
 			background-color: color-mix(in oklch, var(--neutral) 90%, transparent);
 		}
 
-
 	}