1@import url("https://fonts.googleapis.com/css?family=Lato:700|Open+Sans:400,600,700|Source+Code+Pro");
2
3:root {
4 --color-shadow: rgba(0,0,0,0.15);
5 --color-accent: rgb(105,95,223);
6 --color-light: rgb(243, 246, 247);
7 --color-medium: rgb(210, 210, 210);
8 --color-dark: rgb(44, 61, 81);
9}
10
11html {
12 position: relative;
13 height: 100%;
14}
15
16body {
17 position: relative;
18 height: 100%;
19 color: var(--color-dark);
20 font-family: Open Sans, sans-serif;
21 margin: 0;
22 padding: 0;
23}
24
25body > div {
26 display: flex;
27 flex-direction: column;
28 position: relative;
29 height: 100%;
30}
31
32body > div > div {
33 display: flex;
34 flex-direction: column;
35 position: relative;
36 height: 100%;
37}
38
39main {
40 position: relative;
41 display: flex;
42 flex-direction: column;
43 flex-grow: 1;
44 flex-shrink: 0;
45}
46
47* {
48 box-sizing: border-box;
49}
50
51h1,
52h2,
53h3,
54h4 {
55 font-family: Lato, sans-serif;
56}
57
58h1 {
59 font-size: 2em;
60 font-weight: 500;
61 margin: 0 0 16px;
62}
63
64h2 {
65 font-size: 1.5em;
66 font-weight: 500;
67 margin: 0;
68}
69
70h3 {
71 font-size: 1.2em;
72 font-weight: 500;
73 margin: 0;
74}
75
76h4 {
77 font-size: 1.2em;
78 font-weight: 400;
79 margin: 0;
80}
81
82p {
83 font-size: 1em;
84 font-weight: 400;
85 line-height: 1.5em;
86 margin: 0 0 32px;
87}
88
89code {
90 font-size: 1em;
91 line-height: 1.5em;
92 font-family: Source Code Pro, monospace;
93}
94
95pre {
96 background-color: #f9f9f9;
97 border-radius: 4px;
98 padding: 16px;
99 margin: 32px 0;
100}
101
102span {
103 font-weight: 400;
104 line-height: 1.5em;
105 margin: 0;
106}
107
108label {
109 font-size: 12px;
110 font-weight: 500;
111 letter-spacing: 1px;
112 text-transform: uppercase;
113 margin: 0;
114}
115
116a {
117 text-decoration: none;
118 color: var(--color-dark);
119}
120
121a:hover {
122 cursor: pointer;
123 opacity: 0.7;
124}
125
126button {
127 font-size: 14px;
128 font-weight: 500;
129 display: block;
130 width: 100%;
131 border: none;
132 background-color: transparent;
133 margin: 0;
134 padding: 0;
135}
136
137button:hover {
138 cursor: pointer;
139 opacity: 0.7;
140}
141
142input[type='submit']:hover {
143 cursor: pointer;
144 opacity: 0.7;
145}
146
147input,
148textarea {
149 font-size: 1em;
150 font-weight: 400;
151 line-height: 1.5em;
152 margin: 0;
153 background-color: transparent;
154 -webkit-appearance: none;
155 -moz-appearance: none;
156 appearance: none;
157 box-sizing: border-box;
158 font-family: Open Sans, sans-serif;
159}
160
161.spacer {
162 flex: 1;
163}
164
165.section-inner {
166 display: flex;
167 flex-direction: column;
168 width: 100%;
169 align-items: stretch;
170 max-width: 1300px;
171 padding: 75px 100px 75px 100px;
172 margin: 0px auto;
173}
174
175.section-inner > h2 {
176 margin-bottom: 50px;
177}
178
179@media (max-width: 850px) {
180 section .section-inner {
181 padding: 8.8% 10% 8.8% 10%;
182 flex-direction: column;
183 }
184
185 .section-inner > h2 {
186 margin-top: 8%;
187 margin-bottom: 5%;
188 }
189}