klooni/css/main.css (view raw)
1@font-face {
2 /* http://www.dafont.com/nilland.font */
3 font-family: Nilland;
4 src: url('../font/Nilland.ttf');
5}
6
7@font-face {
8 /* http://www.dafont.com/kirvy.font */
9 font-family: Kirvy;
10 src: url('../font/Kirvy.otf');
11}
12
13::-moz-selection {
14 background-color: #FFAA00;
15 color: #000000;
16}
17
18::selection {
19 background-color: #FFAA00;
20 color: #000000;
21}
22
23body {
24 margin: 0;
25}
26
27img {
28 vertical-align: middle;
29}
30
31img.emoji {
32 display: inline-block;
33 float: none !important;
34 margin: 0 !important;
35 width: 32px;
36 height: 32px;
37}
38
39h2, p {
40 text-shadow: 2px 2px 5px #000;
41}
42
43a {
44 text-decoration: none;
45 color: #FFAA00;
46 transition: opacity 300ms;
47}
48
49a:hover {
50 opacity: 0.8;
51}
52
53.band {
54 width: 100%;
55 height: 500px;
56 background-color: #fff;
57 position: relative;
58 text-align: center;
59}
60
61.band.header {
62 background: url('../img/header.svg') top center no-repeat;
63}
64
65.band div {
66 display: table;
67 width: 100%;
68 max-width: 1024px;
69 height: 500px;
70 color: #fff;
71 margin: 0 auto;
72}
73
74.band h2 {
75 font-family: Kirvy;
76 font-size: 24pt;
77 margin-top: 140px;
78 font-variant: small-caps;
79}
80
81.band p {
82 font-family: Nilland;
83 font-size: 16pt;
84 line-height: 200%;
85 margin-top: 40px;
86}
87
88.band img {
89 margin: 20px;
90 margin-top: 110px;
91 border-radius: 10px;
92}
93
94.band.left img {
95 float: left;
96}
97
98.band.right img {
99 float: right;
100}
101
102
103/* For mobile devices, don't show the images in two columns */
104@media (max-width:1000px) {
105 .band div {
106 height: auto;
107 }
108
109 .band.left img, .band.right img {
110 margin: 20px;
111 float: none;
112 }
113
114 .band h2 {
115 margin-top: 0;
116 }
117
118 .band p {
119 margin-top: 20px;
120 }
121}