@charset "UTF-8";
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@font-face {
  font-family: "ronde";
  src: url("../css/fonts/Ronde-B_square.otf") format("opentype"); }
@font-face {
  font-family: "gkktt";
  src: url("../css/fonts/gkktt.ttf") format("opentype"); }
body {
  height: 100%;
  padding:0px;
  margin:0px;
  background-image: url("../src/resource/WebBG2.png"); }

#preload {
  position: relative;
  background: #000;
  width: 800px;
  height: 640px; }

@keyframes box {
  from {
    top: calc(50% + 32px);
    height: 0px; }
  to {
    top: 50%;
    top: calc(50%);
    height: 64px; } }
@keyframes text1 {
  from {
    opacity: 0;
    left: 24px; }
  to {
    opacity: 1;
    left: 40px; } }
@keyframes text2 {
  from {
    opacity: 0;
    left: 24px; }
  to {
    opacity: 1;
    left: 44px; } }
.preload-box {
  position: absolute;
  background: #fff;
  left: 16px;
  width: 16px;
  animation: box 1.3s cubic-bezier(1, 0, 0, 1) 0.2s forwards; }

.preload-text {
  position: absolute;
  font-family: "gkktt";
  color: #fff;
  opacity: 0;
  top: 50%;
  translate: 0%, -50%;
  z-index: 2;
  font-size: 60px;
  animation: text1 0.5s ease 0.3s forwards; }

.preload-text-under {
  position: absolute;
  font-family: "gkktt";
  color: #fff;
  opacity: 0;
  left: 44px;
  top: 58%;
  translate: 0%, -50%;
  z-index: 2;
  font-size: 16px;
  animation: text2 0.5s ease 0.5s forwards; }

.twitter {
  padding: 5px;
  background-color: #37a;
  font-size: 12px;
  width: 100px;
  border-radius: 10px;
  box-shadow: 0px 0px 4px #220033;
  transition: all 100ms 0s ease;
  color: #ccc; }

@keyframes sizeScale {
  10% {
    position: relative;
    left: 5px;
    wifth: 90px; } }
.fa-twitter {
  font-family: "Rounded Mplus 1c"; }

.loading:before {
  size: 30px;
  content: "(✿╹◡╹)Loading..."; }

a:visited {
  color: #fae585; }

a:link {
  color: #fae585; }

a:hover {
  color: #fa2585; }

a {
  text-decoration: none; }

h2 {
  font-size: 40px;
  text-align: center;
  color: #3a85a5;
  font-family: "gkktt"; }

h3 {
  position: relative;
  left: 40px;
  color: #3a85a5;
  font-family: "ronde"; }

h3#sign::before {
  position: absolute;
  left: -40px;
  content: "";
  width: 32px;
  height: 32px;
  background: url("../src/resource/sign.png") top left no-repeat; }

/*
h3#icon::before{
  position: absolute;
  left:-40px;
  content: "";
  background: url("../src/resource/icon.png") top left no-repeat;
}
*/
.textbox {
  font-family: "ronde";
  font-size: 20px;
  margin: 20px;
  padding: 20px;
  background: #211040;
  border: dashed 1px #3a85a5;
  /*background-image: url("../src/resource/WebBG.png");*/
  border-radius: 10px;
  color: #bfbaad; }

.text {
  position: relative;
  top: 0px;
  left: 0px; }

.textR {
  position: relative;
  top: 0px;
  left: 0px; }

.name {
  position: relative;
  left: 0px; }

.bio {
  position: relative;
  top: 0px;
  left: 0px; }

/*# sourceMappingURL=style.css.map */