yugen.work/assets/css/main.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 */