/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
  cursor: url('/img/cursor.png');	
}

img, iframe {
  cursor: url('/img/cursor.png'), auto;	
}

p, a, h1, h2, h3, input, label {
  cursor: url('/img/text.png'), auto;	
}

body {
  background-image: url("background.png");
  cursor: url('/img/cursor.png'), auto;	
  background-size: 100%;
  color: #bdbdbd;
  font-family: Verdana;
  animation: fadeIn 0.75s;
  text-align: center;
  overflow: scroll;
  padding-top: 10px;
  z-index: -9999999999999999999999999;
  display:inline-block;
}
    
#maingui {
  right: -46px;
  top: -390px; 
}

#body {
  /*padding-left: 350px;*/
  text-align: center;
  cursor: url('/img/move.png'), auto;	
  position:absolute;
  /*margin-left:80%;*/
  left: 50%;
  transform: translate(-50%, 0);
  word-wrap: break-word;
  white-space:normal;
  padding: 10px;
  width: 500px;
  /*width: 800px; */
  border:2px solid black;
  background-color:#580000;
  box-shadow: 11px 11px 1px 1px rgba(23,1,1,1);
}

#uithing {
  text-align: center;
  position: absolute;
  cursor: url('/img/move.png'), auto;	
  word-wrap: break-word;
  padding: 10px;
  z-index:99;
  border:2px solid black;
  background-color:#580000;
  box-shadow: 11px 11px 1px 1px rgba(23,1,1,1);
}

#drag {
  position: absolute;
}

a {
  color: yellow;
}

a:hover {
 color: red;
}

.update {
  width:300px;
  overflow:scroll;
  float: right;
  cursor: url('/img/move.png'), auto;	
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.70; }
}

.snowflake {
            color: #fff;
            font-size: 1em;
            font-family: Arial;
            text-shadow: 0 0 1px #fff;
        }

        @-webkit-keyframes snowflakes-fall {
            0% {
                top: -10%
            }

            100% {
                top: 100%
            }
        }

        @-webkit-keyframes snowflakes-shake {
            0% {
                -webkit-transform: translateX(0px);
                transform: translateX(0px)
            }

            50% {
                -webkit-transform: translateX(80px);
                transform: translateX(80px)
            }

            100% {
                -webkit-transform: translateX(0px);
                transform: translateX(0px)
            }
        }

        @keyframes snowflakes-fall {
            0% {
                top: -10%
            }

            100% {
                top: 100%
            }
        }

        @keyframes snowflakes-shake {
            0% {
                transform: translateX(0px)
            }

            50% {
                transform: translateX(80px)
            }

            100% {
                transform: translateX(0px)
            }
        }

        .snowflake {
            position: fixed;
            top: -10%;
            z-index: 9999;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor: default;
            -webkit-animation-name: snowflakes-fall, snowflakes-shake;
            -webkit-animation-duration: 10s, 3s;
            -webkit-animation-timing-function: linear, ease-in-out;
            -webkit-animation-iteration-count: infinite, infinite;
            -webkit-animation-play-state: running, running;
            animation-name: snowflakes-fall, snowflakes-shake;
            animation-duration: 10s, 3s;
            animation-timing-function: linear, ease-in-out;
            animation-iteration-count: infinite, infinite;
            animation-play-state: running, running
        }

        .snowflake:nth-of-type(0) {
            left: 1%;
            -webkit-animation-delay: 0s, 0s;
            animation-delay: 0s, 0s
        }

        .snowflake:nth-of-type(1) {
            left: 10%;
            -webkit-animation-delay: 1s, 1s;
            animation-delay: 1s, 1s
        }

        .snowflake:nth-of-type(2) {
            left: 20%;
            -webkit-animation-delay: 6s, .5s;
            animation-delay: 6s, .5s
        }

        .snowflake:nth-of-type(3) {
            left: 30%;
            -webkit-animation-delay: 4s, 2s;
            animation-delay: 4s, 2s
        }

        .snowflake:nth-of-type(4) {
            left: 40%;
            -webkit-animation-delay: 2s, 2s;
            animation-delay: 2s, 2s
        }

        .snowflake:nth-of-type(5) {
            left: 50%;
            -webkit-animation-delay: 8s, 3s;
            animation-delay: 8s, 3s
        }

        .snowflake:nth-of-type(6) {
            left: 60%;
            -webkit-animation-delay: 6s, 2s;
            animation-delay: 6s, 2s
        }

        .snowflake:nth-of-type(7) {
            left: 70%;
            -webkit-animation-delay: 2.5s, 1s;
            animation-delay: 2.5s, 1s
        }

        .snowflake:nth-of-type(8) {
            left: 80%;
            -webkit-animation-delay: 1s, 0s;
            animation-delay: 1s, 0s
        }

        .snowflake:nth-of-type(9) {
            left: 90%;
            -webkit-animation-delay: 3s, 1.5s;
            animation-delay: 3s, 1.5s
        }