2023-01-10 04:57:46 +00:00
|
|
|
@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 ; }
|
2024-08-08 07:13:36 +00:00
|
|
|
.kofi-color { color: #FF5E5B; transition-duration: 0.2s; }
|
|
|
|
.kofi-color:hover { color: #ff8684 ; text-shadow: 0 0 7px #FF5E5B ; }
|
2023-01-10 04:57:46 +00:00
|
|
|
.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;}
|
|
|
|
}
|