yugen.work/assets/css/main.css
2019-12-17 20:08:45 +01:00

517 lines
No EOL
7.4 KiB
CSS

@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
body {
background-color: black;
color: white;
background-image: url("/assets/images/y.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media only screen and (max-device-width: 1366px) {
body {
background-attachment: scroll;
}
}
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.title {
font-size: 13vh;
margin: 0;
}
.subtitle {
font-size: 3vh;
bottom: 50px;
text-align: center;
cursor: -webkit-grab;
cursor: grab;
}
sub {
font-size: 1vh;
}
.center {
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
a {
text-decoration: none;
color: white;
display: inline-block;
}
svg {
margin: 0;
padding: 0;
}
body.light a {
color: black;
}
/*
#box {
position: absolute;
z-index: 999;
border: 3vh solid black;
box-sizing: border-box;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
transition: border-color 0.5s ease-in-out;
}
body.light #box {
position: absolute;
z-index: 999;
border: 3vh solid white;
box-sizing: border-box;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
transition: border-color 0.5s ease-in-out;
}
*/
.twitter:hover {
fill: #1da1f2 !important;
}
.twitter:hover ~ #box {
border-color: #1da1f2;
}
body.light a.twitter {
fill: black;
}
a.twitter {
fill: white;
}
.twitter::-moz-selection {
color: white;
background-color: #1da1f2;
}
.twitter::selection {
color: white;
background-color: #1da1f2;
}
body.light .twitter::-moz-selection {
color: black;
background-color: #37bbff;
}
body.light .twitter::selection {
color: black;
background-color: #37bbff;
}
.trello:hover {
fill: #0079bf !important;
}
.trello:hover ~ #box {
border-color: #0079bf;
}
body.light a.trello {
fill: black;
}
a.trello {
fill: white;
}
.trello::-moz-selection {
color: white;
background-color: #0079bf;
}
.trello::selection {
color: white;
background-color: #0079bf;
}
body.light .trello::-moz-selection {
color: black;
background-color: #1a93d9;
}
body.light .trello::selection {
color: black;
background-color: #1a93d9;
}
.discord:hover {
fill: #7289da !important;
}
.discord:hover ~ #box {
border-color: #7289da;
}
body.light a.discord {
fill: black;
}
a.discord {
fill: white;
}
.discord::-moz-selection {
color: white;
background-color: #7289da;
}
.discord::selection {
color: white;
background-color: #7289da;
}
body.light .discord::-moz-selection {
color: black;
background-color: #8ca3f4;
}
body.light .discord::selection {
color: black;
background-color: #8ca3f4;
}
.ko-fi:hover {
fill: #f16061 !important;
}
.ko-fi:hover ~ #box {
border-color: #f16061;
}
body.light a.ko-fi {
fill: black;
}
a.ko-fi {
fill: white;
}
.ko-fi::-moz-selection {
color: white;
background-color: #f16061;
}
.ko-fi::selection {
color: white;
background-color: #f16061;
}
body.light .ko-fi::-moz-selection {
color: black;
background-color: #ff7a7b;
}
body.light .ko-fi::selection {
color: black;
background-color: #ff7a7b;
}
.patreon:hover {
fill: #f96854 !important;
}
.patreon:hover ~ #box {
border-color: #f96854;
}
body.light a.patreon {
fill: black;
}
a.patreon {
fill: white;
}
.patreon::-moz-selection {
color: white;
background-color: #f96854;
}
.patreon::selection {
color: white;
background-color: #f96854;
}
body.light .patreon::-moz-selection {
color: black;
background-color: #ff826e;
}
body.light .patreon::selection {
color: black;
background-color: #ff826e;
}
.instagram:hover {
fill: #e4405f !important;
}
.instagram:hover ~ #box {
border-color: #e4405f;
}
body.light a.instagram {
fill: black;
}
a.instagram {
fill: white;
}
.instagram::-moz-selection {
color: white;
background-color: #e4405f;
}
.instagram::selection {
color: white;
background-color: #e4405f;
}
body.light .instagram::-moz-selection {
color: black;
background-color: #fe5a79;
}
body.light .instagram::selection {
color: black;
background-color: #fe5a79;
}
.DeviantArt:hover {
fill: #05cc47 !important;
}
.DeviantArt:hover ~ #box {
border-color: #05cc47;
}
body.light a.DeviantArt {
fill: black;
}
a.DeviantArt {
fill: white;
}
.DeviantArt::-moz-selection {
color: white;
background-color: #05cc47;
}
.DeviantArt::selection {
color: white;
background-color: #05cc47;
}
body.light .DeviantArt::-moz-selection {
color: black;
background-color: #1fe661;
}
body.light .DeviantArt::selection {
color: black;
background-color: #1fe661;
}
.RedBubble:hover {
fill: #e41321 !important;
}
.RedBubble:hover ~ #box {
border-color: #e41321;
}
body.light a.RedBubble {
fill: black;
}
a.RedBubble {
fill: white;
}
.RedBubble::-moz-selection {
color: white;
background-color: #e41321;
}
.RedBubble::selection {
color: white;
background-color: #e41321;
}
body.light .RedBubble::-moz-selection {
color: black;
background-color: #fe2d3b;
}
body.light .RedBubble::selection {
color: black;
background-color: #fe2d3b;
}
a svg {
max-width: 6ch;
}
.socials {
font-size: 2vh;
text-align: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 85vw;
-webkit-transition: fill 1s ease-in-out;
transition: fill 1s ease-in-out;
}
a {
margin: 2vh;
}
divide {
display: block;
height: 1vh;
border: 0;
border-top: 0px solid rgba(204, 204, 204, 0);
margin: 1vh 0;
padding: 1vh;
}
.tos:hover {
color: #5fff5f;
background-color: rgba(200, 119, 119, 0.459);
}
.tos:hover ~ #box {
border-color: #5fff5f;
}
.tos::-moz-selection {
color: white;
background-color: #5fff5f;
}
.tos::selection {
color: white;
background-color: #5fff5f;
}
body.light .tos::-moz-selection {
color: black;
background-color: #79ff79;
}
body.light .tos::selection {
color: black;
background-color: #79ff79;
}
.tos {
font-size: 6vh;
}
#credits {
font-size: 2.5vh;
display: table-caption;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
padding: .5vh;
color: #00000049;
z-index: 999;
cursor: pointer;
pointer-events: none;
}
#credits a {
margin: 0;
padding: 0;
color: #a0040449;
pointer-events: all;
}
#credits a:hover {
color: #d1363649;
}
section:not(#credits) {
height: 100vh;
}
body.light h1::-moz-selection {
background-color: black;
color: white;
}
body.light h1::selection {
background-color: black;
color: white;
}
h1::-moz-selection {
background-color: white;
color: black;
}
h1::selection {
background-color: white;
color: black;
}
body::-webkit-scrollbar {
width: 0;
}
body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
#twitter {
margin: 5vh;
}
/*# sourceMappingURL=main.css.map */