Some css reset or tricks in projects

1/* The css background gradient */
2background: repeating-linear-gradient(
3  var(--first-color) 0%,
4  var(--first-color) 40%,
5  var(--second-color) 40%,
6  var(--second-color) 80%
7);

  1/* Define the variables in root level can inherit to sibling */
  2:root {
  3  --building-color1: #aa80ff;
  4  --building-color2: #66cc99;
  5  --building-color3: #cc6699;
  6}
  7
  8/* resetting the box model */
  9*{
 10  box-sizing: border-box;
 11  font-family: sans-serif;
 12}
 13
 14/* or use the pseudo selector to do this */
 15*, ::before, ::after{
 16  box-sizing: inherit;
 17}
 18
 19/* 
 20pseudo select for specific class 
 21This property is for screen reader
 22*/
 23span[class~="sr-only"] {
 24  border: 0;
 25  /* clip the elements */
 26  clip: rect(1px, 1px, 1px, 1px); /* creates a 1px by 1px clipping rectangle, essentially hiding everything except for a very tiny area. */
 27  /* */
 28  clip-path: inset(50%);
 29
 30  width: 1px;
 31  height: 1px;
 32  overflow: hidden;
 33  white-space: nowrap;
 34  position: absolute;
 35  padding: 0;
 36  margin: -1px;
 37}
 38
 39/* flex box layout */
 40h1 .flex{
 41  display: flex;
 42  flex-direction: column-reverse;
 43  gap: 1rem;
 44  background: linear-gradient(
 45      orange,
 46      var(--building-color1),
 47      var(--window-color1)
 48  );
 49}
 50
 51.bb1 {
 52  width: 10%;
 53  height: 70%;
 54  display: flex;
 55  flex-direction: column;
 56  align-items: center;
 57}
 58
 59/* first element that matches the selector */
 60h1 .flex span:first-of-type{
 61  font-size: 0.7em;
 62  background-color: var(--building-color1); /*  define a css variable ===> --building-color1: #999; */
 63}
 64
 65/* last element that matches the selector */
 66h1 .flex span:last-of-type{
 67  font-size: 1.2em;
 68}
 69
 70/* flex box layout and set the flex-end; */
 71#years{
 72  display: flex;
 73  justify-content: flex-end;
 74  position: sticky;
 75  z-index: 999;
 76  top: 0;
 77  margin: 0 -2px;
 78  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
 79}
 80
 81.cat-head {
 82    border: 1px solid #000;
 83    border-radius: 46%;
 84    background: linear-gradient(to bottom, #5e5e5e 85%, #45454f 100%); /* linear-gradient(298deg, rgba(255, 122, 24, .25), #fff) */
 85}
 86
 87.cat-left-ear{
 88  position: absolute;
 89  top: -26px;
 90  left: -31px;
 91  border-top-left-radius: 90px;
 92  border-top-right-radius: 10px;
 93  border-bottom: 70px solid #5e5e5e;
 94  transform: rotate(-45deg);
 95}
 96
 97.cat-left-eye {
 98  position: absolute;
 99  top: 54px;
100  left: 39px;
101  border-radius: 60%;
102  transform: rotate(25deg);
103  width: 30px;
104  height: 40px;
105  background-color: #000;
106}
107
108.cat-mouth div {
109  width: 30px;
110  height: 50px;
111  border: 2px solid #000;
112  border-radius: 190%/190px 150px 0 0;
113  border-color: black transparent transparent transparent;
114}
115
116.cat-mouth div {
117  width: 30px;
118  height: 50px;
119  border: 2px solid #000;
120  border-radius: 190%/190px 150px 0 0;
121  border-color: black transparent transparent transparent;
122}
123
124/* media query to set different sytyle */
125@media (max-width: 1199px) and (min-width: 769px) {
126  #piano{
127    width: 675px;
128  }
129  .keys{
130    width: 633px;
131  }
132}

1<ul class="navigation">
2  <li><a href="#">Home</a></li>
3  <li><a href="#">About</a></li>
4  <li><a href="#">Products</a></li>
5  <li><a href="#">Contact</a></li>
6</ul>

 1navigation {
 2  display: flex;
 3  flex-flow: row wrap;
 4  justify-content: flex-end;
 5  
 6  list-style: none;
 7  margin: 0; 
 8  background: deepskyblue;
 9}
10
11.navigation a {
12  text-decoration: none;
13  display: block;
14  padding: 1em;
15  color: white;
16}
17
18.navigation a:hover {
19  background: #1565C0;
20}
21
22@media all and (max-width: 800px) {
23  .navigation {
24    justify-content: space-around;
25  }
26}
27
28@media all and (max-width: 600px) {
29  .navigation {
30    flex-flow: column wrap;
31    padding: 0;
32  }
33  .navigation a { 
34    text-align: center; 
35    padding: 10px;
36    border-top: 1px solid rgba(255, 255, 255,0.3); 
37    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
38  }
39  .navigation li:last-of-type a {
40    border-bottom: none;
41  }
42}

 1/*
 2
 3<pre rel="CSS" class="wp-block-csstricks-code-block  language-css" data-line="">/pre>
 4
 5*/
 6pre[rel]:not([rel=""]):before {
 7    font-family: MD Primer Bold, Rubik, Lato, Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif;
 8    font-style: normal;
 9    font-weight: 700;
10    font-size: .5rem;
11    content: attr(rel);
12    color: #fff;
13    position: absolute;
14    top: -.2rem;
15    right: .4rem;
16    padding: 0;
17    color: #ff7a18 !important;
18}