structure.txt

/* CSS Rule */
.css-selector {
  Layout Properties (position, float, clear, display)
  Box Model Properties (width, height, margin, padding)
  Visual Properties (color, background, border, box-shadow)
  Typography Properties (font-size, font-family, text-align, text-transform)
  Misc Properties (cursor, overflow, z-index)
}

Layout-level patterns—repeating layout ideas and the overall grid
Element-level patterns—headings, text sizes, fonts, spacing, icons, button sizes
Color palette
Structural ideas—the logical organization of sections, independent from the layout
Everything else—ideas that are only present in one component
update to file structure
git checkout -b readme-update



 <div class="switch">
  <input name="switch" id="one" type="radio" checked/>
  <label for="one" class="switch__label">One</label>
  <input name="switch" id="two" type="radio" />
  <label for="two" class="switch__label">Two</label>
  <input name="switch" id="three" type="radio" />
  <label for="three" class="switch__label" >Three</label>
  <div class="switch__indicator" /></div>
</div>




// Just for styling

body{
  background: #333;  
  color: #999;
  position: absolute;
  top:50%;
  left:50%;
  margin-left: -9rem;
  margin-top:-3rem;
}


first thing to do is create a branch
always from main as starter point
git checkout -b branch-name
make the changes
commit
and push
git push origin branch-name

## Colors

### Theme 1
#### Backgrounds
- Very dark desaturated blue (main background): hsl(222, 26%, 31%)
- Very dark desaturated blue (toggle background, keypad background): hsl(223, 31%, 20%)
- Very dark desaturated blue (screen background): hsl(224, 36%, 15%)

#### Keys
- Desaturated dark blue (key background): hsl(225, 21%, 49%)
- Desaturated dark blue (key shadow): hsl(224, 28%, 35%)

- Red (key background, toggle): hsl(6, 63%, 50%)
- Dark red (key shadow): hsl(6, 70%, 34%)

- Light grayish orange (key background): hsl(30, 25%, 89%)
- Grayish orange (key shadow): hsl(28, 16%, 65%)

#### Text
- Very dark grayish blue: hsl(221, 14%, 31%)
- White: hsl(0, 0, 100%)

### Theme 2
#### Backgrounds
- Light gray (main background): hsl(0, 0%, 90%)
- Grayish red (toggle background, keypad background): hsl(0, 5%, 81%)
- Very light gray (screen background): hsl(0, 0%, 93%)

#### Keys
- Dark moderate cyan (key background): hsl(185, 42%, 37%)
- Very dark cyan (key shadow): hsl(185, 58%, 25%)
- Orange (key background, toggle): hsl(25, 98%, 40%)
- Dark orange (key shadow): hsl(25, 99%, 27%)
- Light grayish yellow (key background): hsl(45, 7%, 89%)
- Dark grayish orange (key shadow): hsl(35, 11%, 61%)

#### Text
- Very dark grayish yellow: hsl(60, 10%, 19%)
- White (text): hsl(0, 0, 100%)

### Theme 3
#### Backgrounds
- Very dark violet (main background): hsl(268, 75%, 9%)
- Very dark violet (toggle background, keypad background, screen background): hsl(268, 71%, 12%)

#### Keys
- Dark violet (key background): hsl(281, 89%, 26%)
- Vivid magenta (key shadow): hsl(285, 91%, 52%)
- Pure cyan (key background, toggle): hsl(176, 100%, 44%)
- Soft cyan (key shadow): hsl(177, 92%, 70%)
- Very dark violet (key background): hsl(268, 47%, 21%)
- Dark magenta (key shadow): hsl(290, 70%, 36%)

#### Text

- Light yellow: hsl(52, 100%, 62%)
- Very dark blue: hsl(198, 20%, 13%)
- White (text): hsl(0, 0, 100%)

## Typography

### Body Copy

- Font size (numbers): 32px

### Font

- Family: [Spartan](https://fonts.google.com/specimen/Spartan)
- Weights: 700