1+ : root {
2+ --font-family : Karla, sans-serif;
3+ --primary-clr : # 5f9ea0
4+ --bg-clr : # f9f9f9
5+ --border-bottom-clr : # ebebebe1
6+ --border-left-clr : # c2ccf8
7+ --white : # ffffff
8+ --box-shadow : # 0000003b
9+ }
10+ 111* ,
212* after ,
313* before {
@@ -17,21 +27,21 @@ body {
1727 align-items : center;
1828 min-height : 100vh ;
1929 overflow : hidden;
20- background-color : # 5f9ea0
21- font : 2rem Karla , sans-serif ;
30+ background-color : var ( --primary-clr ) ;
31+ font : 2rem var ( --font-family ) ;
2232}
2333
2434.items {
2535 max-width : 50rem ;
26- background-color : # ffffff
36+ background-color : var ( --white ) ;
2737 border-radius : 0.5rem ;
28- box-shadow : 1rem 1rem # 0000003b
38+ box-shadow : 1rem 1rem var ( --box-shadow ) ;
2939}
3040
3141.item {
3242 display : flex;
3343 align-items : center;
34- border-bottom : 0.1rem solid # ebebebe1
44+ border-bottom : 0.1rem solid var ( --border-bottom-clr ) ;
3545}
3646
3747.item : last-child {
@@ -47,17 +57,17 @@ input[type="checkbox"] + p {
4757 transition : background-color 0.4s ease;
4858 padding : 1.8rem ;
4959 width : 100% ;
50- border-left : 0.1rem solid # c2ccf8
60+ border-left : 0.1rem solid var ( --border-left-clr ) ;
5161}
5262
5363input : checked + p {
54- background-color : # f9f9f9
64+ background-color : var ( --bg-clr ) ;
5565 text-decoration : line-through;
5666}
5767
5868::selection {
59- color : # ffffff
60- background-color : # 5f9ea0
69+ color : var ( --white ) ;
70+ background-color : var ( --primary-clr ) ;
6171}
6272
6373@media screen and (max-width : 700px ) {
0 commit comments