css/main.css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

@charset "utf-8";

html, body{
	font:400 105% sans-serif;
	background-color:#0B000F;
	color:#FFEEAA;
	margin:0;
	height:100%
}

h1{
	font-size:125%;
	color:#AF0000;
	padding-left:1.6%
}
h2{
	font-size:125%;
	color:#A00000;
	padding-left:1.2%
}
h3{
	font-size:110%;
	color:#884488;
	padding-left:.3%
}

a{
	font-size:110%;
	color:#77AA77;
	text-decoration:none
}

a:hover{color:#FFFFFF}

img{margin-left:4%}

.main{
	min-height:100%;
	position:relative
}

.head{
	font:400 120% sans;
	color:#999000;
	padding:40pt 5%
}

.body{padding: 0pt 5% 60pt 5%}

.foot{
	font-size: 70%;
	position:absolute;
	text-align:center;
	bottom:0;
	width:100%;
	padding-top:9pt;
	padding-bottom:9pt
}

.sh{
	font:400 77% mono;
	padding-left:3%
}

@media(prefers-color-scheme:light){
	html, body{
		background-color:#EAECEF;
		color:#553311
	}

	h1{color:#773322}
	h2{color:#884433}
	h3{color:#7755AA}

	a{color:#335577}
	a:hover{color:#000000}
}

@media all and (min-width:600px){
	.body{padding: 0pt 5% 60pt 5%}
	.head{padding:40pt 5%}
}

@media all and (min-width:800px){
	.body{padding: 0pt 10% 60pt 10%}
	.head{padding:40pt 10%}
}

@media all and (min-width:1000px){
	.body{padding: 0pt 15% 60pt 15%}
	.head{padding:40pt 15%}
}

@media all and (min-width:1200px){
	.body{padding: 0pt 20% 60pt 20%}
	.head{padding:40pt 20%}
}

@media all and (min-width:1400px){
	.body{padding: 0pt 25% 60pt 25%}
	.head{padding:40pt 25%}
}

@media all and (min-width:1600px){
	.body{padding: 0pt 30% 60pt 30%}
	.head{padding:40pt 30%}
}