CSS for review for todo-mvp

[SheilaRT]

Note: The pull request button is ghosted and non-functional to me on this repo, so I've opened this as an issue.

I've assumed that the bracketed Go code was not supposed to display as-is in the HTML, with perhaps, the exception of the todo.name as a placeholder for entered list items in the end project. Currently, it shows as plain text, but I'm simply ignoring it.

CSS:

/* base color and/or pattern, choose light or dark colors for better contrast, midtones will be difficult to read */
:root{--base:#EEE;}

/* font chosen for legibility (optional if default font use is preferred) */
@font-face{font-family:Overpass;font-style:normal;font-weight:400;src:local('Overpass Regular'),local('Overpass-Regular'),url(https://fonts.gstatic.com/s/overpass/v4/qFdH35WCmI96Ajtm81GrU9vyww.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face {font-family:Overpass;font-style:normal;font-weight:400;src:local('Overpass Regular'),local('Overpass-Regular'),url(https://fonts.gstatic.com/s/overpass/v4/qFdH35WCmI96Ajtm81GlU9s.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* html and color assigned background (--base), filtered to calculate a fully inverted color for contrast; also fallback font specified for browsers without @font-face support  */
html{background:var(--base);filter:invert(100%);}
body{font-family:Overpass,sans-serif;color:var(--base);}

/* headers and the user input form are centered and headers are given extra space above and below to open up the design a bit */
h1,h2{text-align:center;margin:2em auto;}
section.new-todo form{width:auto;margin:auto;text-align:center;}

/* basic border design for all input buttons */
input{border-radius:3px;border:thin solid var(--base);}

/* text input, underlined for sighted users, with default outline and targeting still available for accessibility */
input#new-item{background:transparent;border:0;border-bottom:thin solid var(--base);}

/* submit buttons, color coded for sighted users, consider adding alt="" and title="" to the HTML for screen-reader support */
input#add-new-item{background:#CCC;color:#333;}
input.uncomplete{background:#333;color:#CCC;}
input.delete{background:#030;color:#CFC;}
input.complete{background:#300;color:#FCC;}

/* removes bullet points for list items, creates a 'card' for each listed task and associated buttons, allowing them to flow as needed  */
ul{display:flex;flex-flow:row wrap-reverse;justify-content:space-around;align-items:baseline;align-content:stretch;}
li{border-radius:6px;padding:1.5em;list-style:none;}

/* separate list item border styles based on whether the item has been completed */
li.todo done{border:1px solid var(--base);}
li.todo{border:3px double var(--base);}

/* audio hint for completed items for users with screen-readers; sighted users will see struck text, instead */
s::before{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px;content:"Completed ";} /* based on CSS from https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/ */
s{text-decoration:line-through;} /* restating the standard default behavior in order to correct non-standard browser behavior */

/* responsive card sizing based on device viewport size, regardless of resolution */
@media (min-width: 19in) {li{flex:0 0 12.5vw;}} /* modern desktop monitors */
@media (min-width: 5in) and (max-width: 18.99in) {li{flex:0 0 33.3vw;}} /* most tablets and very small desktop monitors */
@media (max-width: 4.99in) {li{flex:0 0 75vw;}} /* mobile and very small tablets */ 

The value for '--base' can be any color, a linear or radial gradient, data: (base64 encoded SVG), or image URL. Experimentation with changing the value is encouraged.

Screenshot with current HTML and with background color set to #EEE or light gray:

---