<style>
 #bitch{position:absolute; left: 0px; top: 0px; right: 0px; bottom: 0px;}

@font-face {
  font-family: "Skywalker";
  src: url('https://dl.dropboxusercontent.com/s/lnjs9z8olojzmpv/Skywalker_alt.ttf?dl=0');
  format("truetype");
}
::-webkit-scrollbar {
 display:none}

::-webkit-scrollbar-thumb:vertical {
 height: 0px;
 background-color: #000;
 border:3px solid #313136;}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
 height: 0px;
 display: block;
 background-color: #313136;}

::-webkit-scrollbar-track-piece {
 background-color: #313136;}

::selection {
color: #ccc;
background: #000;}

a {
color: #6cc2ec;
font-weight: bold;
text-decoration: none;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}

a:hover {
text-decoration: line-through;
text-shadow: 4px 0px 8px #000, 0px 4px 8px #000, -4px 0px 8px #000, 0px -4px 8px #000;
}

b {
color: #fa8484;
font-family: 'Gallow Tree';
text-transform: uppercase;
font-size:18px;
letter-spacing: 0;
font-weight:1;
}

h1 {
 background: url(https://i.imgur.com/cCqp22b.gif);
 background-position: center;
 background-size: cover;
 margin-top: -1px;
 line-height: 1.3vw;
 font-size: 25px;
 font-family: 'Cinzel';
 text-align: center;
 border: 3px solid #111;
 color: #5c87cc;
}

.particle {
 width: 5px;
 height: 5px;
 border-radius: 50%;
 box-shadow: 0px 0px 15px #fff;
 background: #fff;
 opacity: .5;
 z-index: 10;
}

@-webkit-keyframes particle-glow {
 0% {
 opacity: 1;
 }
 25% {
 opacity: .5;
 }
 50% {
 opacity: 0;
 }
 75% {
 opacity: .5;
 }
 75% {
 opacity: 1;
 }
 100% {
 opacity: .5;
 }
}

@keyframes particle-glow {
 0% {
 opacity: 1;
 }
 25% {
 opacity: .5;
 }
 50% {
 opacity: 0;
 }
 75% {
 opacity: .5;
 }
 75% {
 opacity: 1;
 }
 100% {
 opacity: .5;
 }
}

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

@-webkit-keyframes particle-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 particle-fall {
 0% {
 top: -10%
 }
 100% {
 top: 100%
 }
}

@keyframes particle-shake {
 0% {
 transform: translateX(0px)
 }
 50% {
 transform: translateX(80px)
 }
 100% {
 transform: translateX(0px)
 }
}

.particle {
 position: fixed;
 top: -10%;
 z-index: 9999;
 -webkit-animation-name: particle-fall, particle-shake, particle-glow;
 -webkit-animation-duration: 10s, 3s, 4s;
 -webkit-animation-timing-function: linear, ease-in-out;
 -webkit-animation-iteration-count: infinite, infinite;
 -webkit-animation-play-state: running, running;
 animation-name: particle-fall, particle-shake, particle-glow;
 animation-duration: 10s, 3s, 4s;
 animation-timing-function: linear, ease-in-out;
 animation-iteration-count: infinite, infinite;
 animation-play-state: running, running
}

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

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

.particle:nth-of-type(2) {
 left: 9.3%;
 -webkit-animation-delay: 6.6s, 5.9s;
 animation-delay: 6.6s, 5.9s
}

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

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

.particle:nth-of-type(5) {
 left: 33.2%;
 -webkit-animation-delay: 6.7s, 6.3s;
 animation-delay: 6.7s, 6.3s
}

.particle:nth-of-type(6) {
 left: 41.5%;
 -webkit-animation-delay: 9s, 8.9s;
 animation-delay: 9s, 8.9s
}

.particle:nth-of-type(7) {
 left: 49.8%;
 -webkit-animation-delay: 2.8s, 2.7s;
 animation-delay: 2.8s, 2.7s
}

.particle:nth-of-type(8) {
 left: 58.1%;
 -webkit-animation-delay: 10.2s, 9.90s;
 animation-delay: 10.2s, 9.90s
}

.particle:nth-of-type(9) {
 left: 66.3%;
 -webkit-animation-delay: 3.5s, 1.5s;
 animation-delay: 3.5s, 1.5s
}
.particle:nth-of-type(10) {
 left: 74.5%;
 -webkit-animation-delay: 4.7s, .5s;
 animation-delay: 4.7s, .5s
}
.particle:nth-of-type(11) {
 left: 84%;
 -webkit-animation-delay: 8.4s, 3.5s;
 animation-delay: 8.4s, 3.5s
}
.particle:nth-of-type(12) {
 left: 90%;
 -webkit-animation-delay: 5.8s, 5.7s;
 animation-delay: 5.8s, 5.7s
}

body{
 overflow: hidden;
 background-repeat: repeat;
 background-attachment: fixed;
 background: linear-gradient(#c779c7, #fa8484);
}

.box {
 position: absolute;
 bottom: 0px;
 right: 0px;
 width: 600px;
 height: 300px;
 background-color: #212121;
 z-index: 2;
}

.boxborder {
 position: absolute;
 bottom: 10px;
 right: 0px;
 width: 600px;
 height: 300px;
 background-color: black;
 z-index: 1;
 opacity: 0.5;
}

.cerule {
 position:absolute;
 bottom:-111px;
 right:400px;
 height:700px;
 width: 800px;
 background-image: url('http://i.picpar.com/bH2d.png');
 transform: scaleX(-1);
 background-size: cover;
 z-index: 3;
}

.icon{
 position: absolute;
 bottom: 5px;
 right: 390px;
 height: 180px;
 width: 80px;
 background-image: url('http://i.picpar.com/f2Jd.png');
 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 background-attachment: absolute;
 background-size: cover;
 background-position: -50px;
 z-index: 3;
 filter: grayscale(100%);
  transition: 1s ease-in-out;
}

.icon2{
 position: absolute;
 bottom: 95px;
 right: 435px;
 height: 180px;
 width: 80px;
 background-image: url('http://i.picpar.com/C2Jd.png');
 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 background-attachment: absolute;
 background-size: cover;
 background-position: 0px;
 z-index: 3;
 filter: grayscale(100%);
 transition: 1s ease-in-out;
}

.icon3{
 position: absolute;
 bottom: 5px;
 right: 480px;
 height:180px;
 width: 80px;
 background-image: url('http://i.picpar.com/D2Jd.png');
 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
 background-attachment: absolute;
 background-size: cover;
 background-position: 0px;
 z-index: 3;
 filter: grayscale(100%);
 transition: 1s ease-in-out;
}

.icon:hover {
 filter: grayscale(0%);
}

.icon2:hover {
 filter: grayscale(0%);
}

.icon3:hover {
 filter: grayscale(0%);
}

.text{
 position: absolute;
 bottom: 20px;
 right: 30px;
 height: 250px;
 width: 330px;
 color: white;
 font-family: Copperplate, "Copperplate Gothic Light";
 font-size: 12px;
 color: #fff;
 padding: 0px;
 opacity: 0;
 z-index: 5;
 transition: 1s ease-in;
}

.text:target {
 opacity: 1;
 z-index: 5;
 }

.title {
 position: absolute;
 bottom: 230px;
 right: -5px;
 font-family: 'Skywalker';
 letter-spacing: 10px;
 font-size: 100px;
 padding: 40px;
 filter: drop-shadow(0px 00px 10px #fff);
 background: -webkit-linear-gradient(right, #eee, #79e9ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 5;
}

</style>

<link href="https://www.themonster.xyz/styles/fancy-fonts.css" rel="stylesheet">

<div id="bitch" oncontextmenu="return false;"></div>

<div class="particles">
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
<div class="particle"></div>
</div>



<div class="title">Cerule</div>

<div class="box"></div>
<div class="boxborder"></div>
<div class="cerule"></div>

<div class="icon"></div>
<div class="icon2"></div>
<div class="icon3"></div>

<a class='icon' href='#1'></a>
<a class='icon2' href='#2'></a>
<a class='icon3' href='#3'></a>

<div class='text' div id='1'>
test
</div></div>