@@ -1,56 +1,141 @@
1+html {
2+ font-size: 62.5%;
3+}
4+
15body {
2− color: black;
3− font-size: 16px;
4− margin: 0px auto 0px auto;
5− width: 600px;
6+ font-size: 1.6rem;
7+ color: #000;
68}
79
810header {
9− border-bottom: 2px solid black;
10− margin-bottom: 30px;
11− padding: 12px 0px 12px 0px;
11+ border-bottom: 0.2rem solid #000;
1212}
1313
1414nav {
15− text-align: right;
15+ text-align: right;
1616}
1717
1818nav a {
19− color: black;
20− font-size: 18px;
21− font-weight: bold;
22− margin-left: 12px;
23− text-decoration: none;
24− text-transform: uppercase;
19+ font-size: 1.8rem;
20+ font-weight: bold;
21+ color: black;
22+ text-decoration: none;
23+ text-transform: uppercase;
2524}
2625
2726footer {
28− border-top: solid 2px black;
29− color: #555;
30− font-size: 12px;
31− margin-top: 30px;
32− padding: 12px 0px 12px 0px;
33− text-align: right;
27+ margin-top: 3rem;
28+ padding: 1.2rem 0;
29+ border-top: 0.2rem solid #000;
30+ font-size: 1.2rem;
31+ color: #555;
3432}
3533
3634h1 {
37− font-size: 24px;
35+ font-size: 2.4rem;
3836}
3937
4038h2 {
41− font-size: 20px;
39+ font-size: 2rem;
4240}
4341
4442article .header {
45− color: #555;
46− font-size: 14px;
47− font-style: italic;
43+ font-size: 1.4rem;
44+ font-style: italic;
45+ color: #555;
4846}
4947
5048.logo a {
51− color: black;
49+ font-weight: bold;
50+ color: #000;
51+ text-decoration: none;
52+}
53+
54+@media (max-width: 319px) {
55+ body {
56+ width: 90%;
57+ margin: 0;
58+ padding: 0 5%;
59+ }
60+ header {
61+ margin: 4.2rem 0;
62+ }
63+ nav {
64+ margin: 0 auto 3rem;
65+ text-align: center;
66+ }
67+ footer {
68+ text-align: center;
69+ }
70+ .logo {
71+ text-align: center;
72+ margin: 1rem auto 3rem;
73+ }
74+ .logo a {
75+ font-size: 2.4rem;
76+ }
77+ nav a {
78+ display: block;
79+ line-height: 1.6;
80+ }
81+}
82+
83+@media (min-width: 320px) {
84+ body {
85+ width: 90%;
86+ margin: 0;
87+ padding: 0 5%;
88+ }
89+ header {
90+ margin: 4.2rem 0;
91+ }
92+ nav {
93+ margin: 0 auto 3rem;
94+ text-align: center;
95+ }
96+ footer {
97+ text-align: center;
98+ }
99+ .logo {
100+ text-align: center;
101+ margin: 1rem auto 3rem;
102+ }
103+ .logo a {
104+ font-size: 2.4rem;
105+ }
106+ nav a {
107+ display: inline;
108+ margin: 0 0.6rem;
109+ }
110+}
111+
112+@media (min-width: 640px) {
113+ body {
114+ width: 60rem;
115+ margin: 0 auto;
116+ padding: 0;
117+ }
118+ header {
119+ margin: 0 0 3rem;
120+ padding: 1.2rem 0;
121+ }
122+ nav {
123+ margin: 0;
124+ text-align: right;
125+ }
126+ nav a {
127+ margin: 0 0 0 1.2rem;
128+ display: inline;
129+ }
130+ footer {
131+ text-align: right;
132+ }
133+ .logo {
134+ margin: 0;
135+ text-align: left;
136+ }
137+ .logo a {
52138 float: left;
53− font-size: 18px;
54− font-weight: bold;
55− text-decoration: none;
139+ font-size: 1.8rem;
140+ }
56141}