171 lines
2.3 KiB
CSS
171 lines
2.3 KiB
CSS
:root {
|
|
--theme-color:#6b6e4c;
|
|
--theme-color-lighter:#bbb584;
|
|
--theme-color-variation:#ede622
|
|
}
|
|
|
|
* {
|
|
margin:0;
|
|
padding:0;
|
|
box-sizing:border-box
|
|
}
|
|
|
|
body {
|
|
background-color:#000;
|
|
font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
|
|
font-size:1em;
|
|
color:#fff
|
|
}
|
|
|
|
a {
|
|
transition:.2s;
|
|
color:#d3d3d3;
|
|
text-decoration:none
|
|
}
|
|
|
|
a:hover {
|
|
color:var(--theme-color-lighter)
|
|
}
|
|
|
|
header {
|
|
display:flex;
|
|
border-bottom:thick solid rgba(255,255,255,.1);
|
|
width:100%;
|
|
box-shadow:2px 7px 5px rgba(0,0,0,.3),0 -4px 10px rgba(0,0,0,.3);
|
|
background-color:rgba(0,0,0,.15)
|
|
}
|
|
|
|
header div {
|
|
padding:1rem
|
|
}
|
|
|
|
main {
|
|
margin-bottom:2em
|
|
}
|
|
|
|
h1,h2,h3 {
|
|
text-shadow:2px 7px 5px rgba(0,0,0,.3),0 -4px 10px rgba(0,0,0,.3)
|
|
}
|
|
|
|
main p {
|
|
font-size:x-large;
|
|
margin-bottom:1em
|
|
}
|
|
|
|
main h1,main h2 {
|
|
margin-bottom: .6em
|
|
}
|
|
|
|
main h2 {
|
|
margin-top:1em
|
|
}
|
|
|
|
b {
|
|
font-weight:600
|
|
}
|
|
|
|
h2 {
|
|
font-weight:400;
|
|
color:var(--theme-color-lighter)
|
|
}
|
|
|
|
#everythingHelper {
|
|
position:relative
|
|
}
|
|
|
|
#mainHelper {
|
|
padding-top:3rem;
|
|
max-width:50vw;
|
|
margin:auto;
|
|
display:flex
|
|
}
|
|
|
|
#headerSubtitle {
|
|
color:#fff;
|
|
opacity:.6
|
|
}
|
|
|
|
#logo {
|
|
height: 2em;
|
|
margin: auto 0 auto 1em;
|
|
}
|
|
|
|
.noWrap {
|
|
text-wrap-mode: nowrap;
|
|
}
|
|
|
|
@keyframes ellipsis-loader {
|
|
0%,25% {
|
|
transform:translateX(0)
|
|
}
|
|
|
|
100% {
|
|
transform:translate(20px)
|
|
}
|
|
}
|
|
|
|
@keyframes ellipsis-loader__dot {
|
|
0% {
|
|
animation-timing-function:cubic-bezier(.23,1,.32,1);
|
|
transform:translateX(0)
|
|
}
|
|
|
|
55% {
|
|
animation-timing-function:cubic-bezier(.785,.135,.15,.86);
|
|
opacity:1;
|
|
transform:translateX(98px)
|
|
}
|
|
|
|
100%,75% {
|
|
transform:translateX(212px)
|
|
}
|
|
|
|
90% {
|
|
opacity:.2
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity:1
|
|
}
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
to {
|
|
opacity:0
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:1280px) {
|
|
body {
|
|
font-size:2vh
|
|
}
|
|
|
|
header {
|
|
padding-top:1.4rem;
|
|
}
|
|
|
|
header div {
|
|
margin-right: auto;
|
|
}
|
|
|
|
main {
|
|
max-width:90vw
|
|
}
|
|
|
|
main h1 {
|
|
font-size:3vh
|
|
}
|
|
|
|
#mainHelper {
|
|
flex-direction:column;
|
|
max-width:90vw
|
|
}
|
|
|
|
#logo {
|
|
margin: auto 0 auto auto;
|
|
padding-left: 2em;
|
|
}
|
|
}
|
|
|