:root { --accent: #4ea8a8; --errorBorder: #b4547b; --errorRgb: rgba (180,84,123,0.5); }

* { box-sizing: border-box; line-height: 125%; margin : 0; padding: 0; }

html { height: 100%; }

body { background-color: yellow; }

body, input { font-size: 16px; }

div#container { background-color: rgba(255,255,255,0.25); border: 2px solid white; border-radius: 10px; left: 50%; padding 25px: position: fixed; top: 50%; transform: translate (-50%, -50%); }

div#container h1 { padding: 0 30px; text-align: center; }

input { border-radius: 5px; margin-top: 25px; padding: 5px; width: 100%; }

input[type="text"], input[type="password"] { background-color: rgba(255,255,255,0.5); border: 2px solid rgba (255, 255, 255,0); }

input.error, input:invalid {background-color: var(--errorRgb, red); border-color: var(--errorBorder, red); box-shador: none; }

input[type="button"] { background-color: var(--accent); border: none; color: white; }

input[type="button"]:disabled { background-color: var(--errorBorder, red); cursor:not-allowed; }