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
108
109
110
111
112
113
114
115
116
117
|
@font-face {
font-family: Ubuntu;
src: url(ubuntu.ttf);
}
@font-face {
font-family: Ubuntu-Bold;
src: url(ubuntu-bold.ttf);
}
:root {
--hfont: 'Ubuntu-Bold', 'Ubuntu', Century Gothic, CenturyGothic, AppleGothic, sans-serif;
--stdfont: 'Ubuntu', Century Gothic, CenturyGothic, AppleGothic, sans-serif;
}
html, body {
min-height: 100%;
margin:0;
padding:0;
}
body {
overflow-x: clip;
color: gainsboro;
font-family: var(--stdfont);
background-color: black;
background-image: url('bg_default.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
overflow-wrap: break-word;
display: flex;
flex-direction: row-reverse;
}
a {
color: gainsboro;
}
p {
text-shadow: 0 0 5px black;
}
#main {
flex: 50%;
padding: 1rem;
box-shadow: 0 0 45px 90px rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, #000000 100%);
background: linear-gradient(90deg, rgba(0, 0, 0, 0.7) 0%, #000 100%);
}
#secondary {
flex: 50%;
display: flex;
justify-content: center;
align-items: center;
}
#displaycontent {
box-shadow: 4px 4px 8px 2px black;
font-size: 0;
}
#header {
font-family: var(--hfont);
font-size: 3.5em;
color: transparent;
-webkit-text-stroke-width: 2px;
margin: 0;
}
#subheader {
margin-left: -5px;
font-size: 0.6em;
color: white;
-webkit-text-stroke-width: 0;
text-shadow: 0 0 9px white;
z-index: 1;
animation-name: subheaderappear;
animation-duration: 0.5s;
}
@keyframes subheaderappear {
from {color: #19191900; text-shadow: 0 0 0 black;}
to {color: white; text-shadow: 0 0 9px white;}
}
nav a {
text-decoration: none;
display: inline;
font-family: var(--hfont);
font-size: 1.4em;
padding: 5px;
}
@media(max-width: 80vh) {
body {
flex-direction: column;
}
#main {
padding: 1rem;
background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, #000000 100%);
background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 0%, #000 100%);
}
}
.bandcamp-color { color: #629aa9; transition-duration: 0.2s; }
.bandcamp-color:hover { color: #86c3d4 ; text-shadow: 0 0 7px #629aa9 ; }
.youtube-color { color: #ff0000; transition-duration: 0.2s; }
.youtube-color:hover { color: #ff5252 ; text-shadow: 0 0 7px #ff0000 ; }
.itchio-color { color: #fa5c5c; transition-duration: 0.2s; }
.itchio-color:hover { color: #ff8181 ; text-shadow: 0 0 7px #fa5c5c ; }
.patreon-color { color: #FF424D; transition-duration: 0.2s; }
.patreon-color:hover { color: #ff656c ; text-shadow: 0 0 7px #FF424D ; }
.white-color { color: gainsboro; transition-duration: 0.2s; }
.white-color:hover { color: white; text-shadow: 0 0 7px white;}
#headerblue { -webkit-text-stroke-color: blue; text-shadow: 0 0 15px blue; animation: hblue; animation-duration: 10s; animation-iteration-count: infinite;}
@keyframes hblue {
0%, 100% {-webkit-text-stroke-color: rgb(0, 0, 200); text-shadow: 0 0 15px rgb(0, 0, 200);}
15% {-webkit-text-stroke-color: blue; text-shadow: 0 0 15px blue;}
}
#headergreen { -webkit-text-stroke-color: #5ff508; text-shadow: 0 0 15px #5ff508; }
#headeryellow { -webkit-text-stroke-color: gold; text-shadow: 0 0 15px gold; animation: hyellow; animation-duration: 16.7ms; animation-iteration-count: infinite;}
@keyframes hyellow {
from {text-shadow: 0 0 15px rgba(219, 186, 0, 0.87);}
to {text-shadow: 0 0 15px gold;}
}
|
