Updated styles.css with detailed comments

styles.css

@@ -1,69 +1,120 @@
+/* 
+  Sets padding for elements with class `.eczjsme4`.
+  Padding is 4rem vertically and 1rem horizontally.
+*/
 .eczjsme4 {
     padding: 4rem 1rem;
 }
 
+/* 
+  Ensures elements with class `.css-w770g5` take the full width of their container.
+*/
 .css-w770g5 {
     width: 100%;
 }
 
+/* 
+  Ensures elements with class `.css-b3z5c9` take the full width of their container.
+*/
 .css-b3z5c9 {
     width: 100%;
 }
 
+/* 
+  Ensures buttons within elements with class `.stButton` take the full width of their container.
+*/
 .stButton>button {
     width: 100%;
 }
 
+/* 
+  Ensures download buttons within elements with class `.stDownloadButton` take the full width of their container.
+*/
 .stDownloadButton>button {
     width: 100%;
 }
 
-/*DELETE BUTTON*/
+/* DELETE BUTTON */
+/* 
+  Styles the primary button with a specific `data-testid` attribute.
+  Sets border and background color for normal state.
+*/
 button[data-testid="baseButton-primary"] {
     border-color: #505050;
     background-color: #1E1E1E;
 }
 
+/* 
+  Styles the primary button when hovered.
+  Changes the border color, background color, and text color.
+*/
 button[data-testid="baseButton-primary"]:hover {
     border-color: #FC625F;
     background-color: #1E1E1E;
     color: #FC625F;
 }
 
-.e1f1d6gn4 .ef3psqc11{
+/* 
+  Sets transparent border and background color for elements with nested classes `.e1f1d6gn4` and `.ef3psqc11`.
+*/
+.e1f1d6gn4 .ef3psqc11 {
     border-color: transparent;
     background-color: transparent;
 }
 
-.e1f1d6gn4{
+/* 
+  Styles `.e1f1d6gn4` elements.
+  Aligns child items to the baseline, sets gap, border-radius, and padding.
+*/
+.e1f1d6gn4 {
     align-items: baseline;
     gap: 0;
     border-radius: 5px;
     padding: 0px 5px !important;
 }
 
-.e1f1d6gn4:hover{
+/* 
+  Styles `.e1f1d6gn4` elements when hovered.
+  Changes the background color and sets the cursor to pointer.
+*/
+.e1f1d6gn4:hover {
     background-color: #151515 !important;
     cursor: pointer;
 }
 
-.e1f1d6gn4 button[data-testid="baseButton-primary"]{
+/* 
+  Styles the primary button within `.e1f1d6gn4` for normal state.
+  Justifies content to the start and sets transparent border and background.
+*/
+.e1f1d6gn4 button[data-testid="baseButton-primary"] {
     justify-content: flex-start !important;
     border-color: transparent;
     background-color: transparent;
 }
 
-.e1f1d6gn4 button[data-testid="baseButton-primary"]:hover{
+/* 
+  Styles the primary button within `.e1f1d6gn4` when hovered.
+  Maintains transparent border and background, sets color, and justifies content to the start.
+*/
+.e1f1d6gn4 button[data-testid="baseButton-primary"]:hover {
     justify-content: flex-start !important;
     border-color: transparent;
     background-color: transparent;
     color: #68FFD5;
 }
 
-div[data-testid="stHorizontalBlock"]{
-    margin-bottom: -12px
+/* 
+  Adjusts margin-bottom for elements with `data-testid="stHorizontalBlock"`.
+  Reduces spacing between elements.
+*/
+div[data-testid="stHorizontalBlock"] {
+    margin-bottom: -12px;
 }
 
-.e1f1d6gn4 button[data-testid="baseButton-primary"]:active{
+/* 
+  Styles the primary button within `.e1f1d6gn4` when active.
+  Changes the text color.
+*/
+.e1f1d6gn4 button[data-testid="baseButton-primary"]:active {
     color: #68FFD5;
-}
+}