::-webkit-scrollbar{width:14px; height:14px}
::-webkit-scrollbar-button:start:decrement, 
::-webkit-scrollbar-button:end:increment{height:12px; width:12px; display:block; background-image: linear-gradient(134deg, #d1c9c6 25%, #ffffff 25%, #ffffff 50%, #d1c9c6 50%, #d1c9c6 75%, #ffffff 75%, #ffffff 100%);
background-size: 55px 56px;; border:1px solid #8C8079 ;border-radius:4px;}
::-webkit-scrollbar-track-piece{background-color:#8C8079; border:3px solid white}
::-webkit-scrollbar-thumb:vertical, 
::-webkit-scrollbar-thumb:horizontal{background-image: linear-gradient(134deg, #d1c9c6 25%, #ffffff 25%, #ffffff 50%, #d1c9c6 50%, #d1c9c6 75%, #ffffff 75%, #ffffff 100%);
background-size: 15px 16px;}* {
cursor: url('https://proxy.everskies.com/a/https://i.imgur.com/Mrz9nOG.png'), auto;
}
body {
  background:black;

}
.fixed {
position:fixed; 


}
.layout {
  position:relative;
  left:60px;
  top:-4px;
  border:3px solid #b8aba5;
  width:590px;
  height:480px;
  border-radius:0px 20px 20px 0px;
background-image: linear-gradient(134deg, #d1c9c6 25%, #ffffff 25%, #ffffff 50%, #d1c9c6 50%, #d1c9c6 75%, #ffffff 75%, #ffffff 100%);
background-size: 55px 56px;
}
.commission {
border-width:7px;
border-style:solid;
border-image: url("https://proxy.everskies.com/a/https://media.discordapp.net/attachments/861694395061370904/942046636983607336/cute_lacy_border.png") 8 fill round;
height: 100px;
    width: 190px;
    padding: 10px;
    font: 16px;
    overflow: auto;
color:black;
  position:relative;
  top:-480px;
  left:29px;
  transform:rotate(-12deg);
  filter: drop-shadow(7px 7px 10px black);
  transition:2s ease;
}
.commission:hover {
 transform:rotate(0deg);
}
.container {
  border:3px solid white;
  width:550px;
  position:relative;
  top:20px;
  left:15px;
  height:440px;
  background:white;
  border-radius:20px;

}
.trapezoid {
	border-bottom: 70px solid #b8aba5;

	border-left: 0px solid transparent;
	border-right: 80px solid transparent;
	width: 180px;
  position:relative;
  left:60px;
}
a {
  color:white;
  font-family:arial black;
position:relative;
  top:50px;
  left:0px;
  font-size:27px;
text-align:left;
}
.box1 img{
width:470px;
height:290p;
  border-radius:180px;
  border:0px solid gray;
  background:transparent;
  position:relative;
  top:-346px;
  left:460px;
  transition:2s ease;
}
.box1 img:hover {
  transform:rotate(360deg);
}
.trapezoid2 {
border-bottom: 70px solid gray;

	border-left: 0px solid transparent;
	border-right: 80px solid transparent;
	width: 205px;
  position:relative;
  left:-257px;
top:626px;

transform:rotate(270deg);
transition:3s ease;

}
.intro1 {
width:240px;
height:300px;
border:3px solid #ccc5c2;
color:#8C7E7A;
overflow-y:scroll;
background:#ccc5c2;;
font-family:helvetica;
border-radius:30px;
position:absolute;
left:px;
color:white;
text-shadow:2px 2px 3px white;
}
.icon {
filter:grayscale(12%);
position:absolute;
top:21px;
left:400px;
pointer-events:none;
}
.info {
color:black;
  width:565px;background-image: linear-gradient(134deg, #d1c9c6 25%, #ffffff 25%, #ffffff 50%, #d1c9c6 50%, #d1c9c6 75%, #ffffff 75%, #ffffff 100%);
background-size: 55px 56px;
color:#b8aba5;
font-family:helvetica;
}
.info2 {
color:white;
background:#b8aba5;
color:#b8aba5;
font-family:helvetica;
  width: 130px;
height:0px;
border-radius:20px;
overflow:hidden;
opacity:93%;
position:relative;
top:110px;
left:420px;
    -webkit-animation: animateThis 3s ease-in;
    -webkit-animation-fill-mode: forwards;
color:white;
text-shadow:2px 2px 3px white;
font-size:13px;
}
@-webkit-keyframes animateThis {
    0% {
        width: 120px;
        height: 0px;
    }
    100% {
        width: 120px;;
        height: 310px;

    }
}

.line {
background:white;
position:absolute;
top:430px;
height:13px;
width:197px;
transform:rotate(-40deg);
left:660px;
pointer-events:none;
}
body {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;	
}

@-webkit-keyframes BG-MOVING {
	from {
		-webkit-transform: translateX(0);
	}
	to { 
		-webkit-transform: translateX(46px);
	}
}

@keyframes MOVE-BG {
	from {
		transform: translateX(0);
	}
	to { 
		transform: translateX(46px);
	}
}


.loading {
	height: auto;
    text-align: center;
    color: #4c3f2e;	
    position: relative;
    overflow: hidden;
	padding: 1rem;
	margin: 3%;
	font-style: italic;
border-radius:20px;
top:35px;
left:-10px;
width:500px;
height:35px;
  border:3px solid #b8aba5;
}

.bg{
    position: absolute;
    left: -46px;
    right: 0;
    top: 0px;
    bottom: 0;
    z-index: -1;
border-radius:20px;
top:0px;
  background: -webkit-repeating-linear-gradient(
    145deg,
    white 1px,
    #fff5ed 2px,
    #fff5ed 11px,
    #f8e9db 12px,
    #f8e9db 20px
  );
border-radius:20px;
  background: repeating-linear-gradient(
    -55deg,
    #d1c9c6 1px,
    #d1c9c6 2px,
    #d1c9c6 11px,
    white 12px,
    white 20px

	);
    
    -webkit-animation-name: MOVE-BG;
	-webkit-animation-duration: .6s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	
    animation-name: MOVE-BG;
	animation-duration: .8s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

}

.icon2 {
  position:relative;
    top:-93px;
left:60px;
  padding:3px;
background:White;
  transition:2s ease;
  width:47px;
border-radius:30px;
border:3px solid #b8aba5;
  animation-timing-function: ease-in-out;
  animation-name: slide1;
    animation-duration: 3s;
    animation-timing-function: ease-in
;
    animation-iteration-count: 5;
    animation-delay: 1s;    
}
.icon2:Hover {
  transform:rotate(360deg);
}
.box1 {
border:1px solid black;width:240px;
height:110px;
border:3px solid #ccc5c2;
color:white;
overflow-y:scroll;
background:#ccc5c2;;
font-family:helvetica;
border-radius:30px;
position:absolute;
left:px;
color:width:240px;
color:white;
top:320px;
  line-height: 100%;
}

.animate
{
	transition: all 1s;
	-webkit-transition: all 1s;
}

.action-button
{
	position: relative;
	padding: 4px 40px;
  margin: 2px 10px 10px 0px;
  float: left;
	border-radius: 20px;
    font-family: "Arial Black", Gadget, sans-serif;
width:35px;
height:23px;
	font-size: 12px;
	color: #FFF;
	text-decoration: none;	
  top:20px;
}

.blue
{
	background-color: #8C7E7A;
	border-bottom: 5px solid white;
	text-shadow: 0px -2px #1f1f1f;
left:0px;
top:0px;
  items-align: left;

}

.red
{
	background-color: #8C7E7A;
	border-bottom: 5px solid white;

	text-shadow: 0px -2px #1f1f1f;
left:0px;
top:0px;

}

.green
{
	background-color: #8C7E7A;
	border-bottom: 5px solid white;

	text-shadow: 0px -2px #1f1f1f;
left:-2px;
top:0px;
}

.yellow
{
	background-color: #8C7E7A;
	border-bottom: 5px solid white;

	text-shadow: 0px -2px #1f1f1f;
left:0px;
top:0px;
}

.action-button:hover 
{
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}
.yellow a {
left:-120px;
}
h1 {
  color:#82756F;
    font-family: "Arial Black", Gadget, sans-serif;
  text-shadow: 2px 2px 1px white;
font-size:31px;
line-height: 130%;
}
.navigation {
  border:3px solid #b8aba5;
  width:198px;
  height:545px;
  border-radius:20px;
position:relative;
  top:-556px;
  left:-118px;
background-image: linear-gradient(40deg, #d1c8c5 25%, #ffffff 25%, #ffffff 50%, #d1c8c5 50%, #d1c8c5 75%, #ffffff 75%, #ffffff 100%);
background-size: 84px 71px;
  transition:2s ease;
opacity:0;
pointer-events:none;
}
@keyframes spinning {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
  }
  .spin {
    animation-name: spinning;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
filter:grayscale(34%);

position:absolute;
top:120px;
left:320px;
  }

.spin {
border-radius:200px;
border:3px solid #b8aba5;
}
.spin2 {
border-radius:200px;
border:3px solid #b8aba5;
}
 .spin2 {
    animation-name: spinning;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
filter:grayscale(34%);
position:absolute;
top:230px;
left:320px;
  }
.spin3 {
border-radius:200px;
border:3px solid #b8aba5;
}
 .spin3 {
    animation-name: spinning;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
filter:grayscale(34%);

position:absolute;
top:340px;
left:320px;
  }
.header {
width:250px;
height:40px;
position:fixed;
top:159px;
left:800px;
background-color: #8C7E7A;
border-radius:16px 0px 0px 16px;
border:1px solid #FFE3EB;
animation: slide 10s;

}
.header h1 {
position:relative;
top:-8px;
color:white;
letter-spacing:1px;
text-shadow:0px 0px;
font-size:21px;
}
@keyframes slide {
50% {margin-top: -0px;
margin-left: -120px; }
}
.bookmark1 {
background: #b8aba5;
width:150px;
transform:rotate(-270deg);
position:absolute;
height:48px;
left:604px;
top:174px;
border-radius:25px 25px 0px 0px;
  transition:3s ease;
  color:white;

}
.avi:hover {
  filter: drop-shadow(4px 9px 4px #4F423D);      transform:rotate(-3deg);
}
h3{
  color:white;
  font-family:arial black;
  font-size:23px;
position:relative;
top:-20px;
text-align:center;
text-decoration:white underline;
}
.bookmark1:hover{
  left:846px;
-webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}
.polaroid h2 {
    font-size: 23px;
background-image: linear-gradient(134deg, #d1c9c6 25%, #ffffff 25%, #ffffff 50%, #d1c9c6 50%, #d1c9c6 75%, #ffffff 75%, #ffffff 100%);
background-size: 25px 26px;
  transition:1s ease;
color:#948783;
}
.polaroid {
    background-color: white;
  width: 180px;
  height: 230px;
 border:3px solid #b8aba5
 ;
  border-radius:5px;
  position:relative;
  left:20px;
  top:-56px;
color:#948783;
font-family:helvetica;
  font-size:12px;
  overflow-y:scroll;
    overflow-x:hidden;
box-shadow: -7px 3px 14px gray;
transform:rotate(630deg);
}
.bookmark2 {
 background: #b8aba5;
width:150px;
transform:rotate(-270deg);
position:absolute;
height:48px;
left:604px;
top:330px;
border-radius:25px 25px 0px 0px;
transition:3s ease;

}
.bookmark2:hover {
 left:846px;
-webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused
}
.text {
font-family:arial black;
font-size:27px;
transform:rotate(270deg);
position:absolute;
width:400px;
top:300px;
left:270px;
}  .spin7 {
position:relative;
left:-60px;
top:140px;
pointer-events:none;

  }

.spin7 {
-webkit-mask-image: url(https://proxy.everskies.com/a/https://cdn.everskies.com/render/WzM2NjE4OCw3NDg0Niw3ODMzNyw0MTg5NTgsNDI4ODkwLDM1NTQxNSw0MjY4MjgsNDI1NDc1LDU5NTQsMF0.png);
-webkit-mask-size: 190px;
-webkit-mask-repeat: no-repeat;
filter: drop-shadow(7px 7px 10px white);
pointer-events:none;

}
.shadow {
filter: drop-shadow(3px 3px 4px white);
pointer-events:none;

}
.commission2 {
border-width:7px;
border-style:solid;
border-image: url("https://proxy.everskies.com/a/https://i.imgur.com/lpVCTXb.png") 8 fill round;
height: 30px;
    width: 100px;
    padding: 10px;
    font: 16px;
    overflow: auto;
color:#b8aba5;
  position:relative;
  top:500px;
  left:349px;
  transform:rotate(-0deg);
  filter: drop-shadow(2px 2px 4px white);
  transition:2s ease;
font-family:helvetica;

}
.bookmark3 {
 background: #b8aba5;
width:150px;
transform:rotate(-270deg);
position:absolute;
height:48px;
left:600px;
top:483px;
border-radius:25px 25px 0px 0px;
transition:3s ease;
}
.bookmark3:hover {
 left:846px;
-webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused
}
.floating {  
    animation-name: floating;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 0px;
    margin-top: 0px;
font-size:35px;
font-family:arial black;
color: #82756F;
letter-spacing:1px;
position:Absolute;
top:50px;
width:2000px;
left:320px;
}
  
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }    
}
.link1 {
background: #b8aba5;
width:150px;
transform:rotate(270deg);
position:absolute;
left:-34px;
top:180px;
border-radius:25px 25px 0px 0px
}
.link1 a {
top:0px;
}
.link2 {
background: #b8aba5;
width:150px;
transform:rotate(270deg);
position:absolute;
left:-34px;
top:337px;
border-radius:25px 25px 0px 0px
}
.link2 a {
top:0px;
}
.bookmark3 .polaroid {
height:160px;
position:relative;
left:-26px;
top:-25px;
}
.link3 {
background: #b8aba5;
width:150px;
transform:rotate(270deg);
position:absolute;
left:-34px;
top:497px;
border-radius:25px 25px 0px 0px
}
.link3 a {
top:0px;
}
.sub {
font-size:36px;
animation-name: floating;
    margin-left: 0px;
    margin-top: 0px;
color:#82756F;
position:absolute;
left:400px;
top:135px;
}
.counter {
position:relative;
top:-70px;
}
.progress-bar1 {
  position:relative;
  width:200px;
  height:18px;
  border:1px solid #9B8D8A;
  border-radius:20px;
}
.progress-bar1 .progress {
  position:relative;
  width:200px; /*change this based on how much progress*/
  height:18px;
  border:0px solid black;
  border-radius:20px 20px 20px 20px;
background: rgb(155,141,138);
background: radial-gradient(circle, rgba(155,141,138,1) 4%, rgba(200,192,188,1) 36%, rgba(255,255,255,1) 100%);
}
.progress-bar2 .progress2 {
  position:relative;
  width:70px; /*change this based on how much progress*/
  height:18px;
  border:0px solid black;
  border-radius:20px 20px 20px 20px;
background: rgb(155,141,138);
background: radial-gradient(circle, rgba(155,141,138,1) 4%, rgba(200,192,188,1) 36%, rgba(255,255,255,1) 100%);
}
.progress-bar2 {
  position:relative;
  width:200px;
  height:18px;
  border:1px solid #9B8D8A;
  border-radius:20px;
}