body {
  margin: 0; padding:0;
  background: linear-gradient(to bottom, #f9f9f9, #f9f9f9, #f9f9f9); 
  background-attachment: fixed; 
  margin: 0px;
  color: #333;
  font-family: helvetica neue, arial; 
  font-size: 12px; 
  line-height: 16px;
  text-align: justify;
  text-transform: lowercase;
  scrollbar-width: thin;
  scrollbar-color:black transparent;
}

a { color: #bbc3d6; text-decoration: none; box-shadow: inset 0 -3px 0 #; transition-duration: 1s; z-index: -1; }
a:hover { text-decoration: none; box-shadow: inset 0 -7px 0 #; transition-duration: 1s; z-index: -1; }

*::-webkit-scrollbar {
  width: 4px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,.2);
}

b {color:#333; text-transform:lowercase; text-shadow: 0px 0px 1rgba(183, 0, 0,.4); letter-spacing:1px;}


#container{
  margin-top: 80px;
  margin-left:auto;
  margin-right:auto;
  width: 550px;
}

.blurb{
background: rgba(255, 255, 255, 0.5); 
box-shadow: 0px 0px 1px #ccc; 
color: #333333;
font-family: sen, calibri, sans-serif;
font-size: 12px; 
line-height: 16px;
text-align: justify;
text-transform: lowercase;
padding: 10px;
width: 600px;
border-radius: 5px;
}

    
.subtitle {
font-size: 6px;
font-weight: 500;
letter-spacing: 1px;
line-height: 13px;
text-transform: uppercase;
display: block;
width:215px;
text-align: left;
background:linear-gradient(225deg, #E4EBF5, #f6f9fc); 
color:#222; 
padding: 2px 5px 2px 5px;
text-shadow: 1px 1px rgba(189,189,189,.25)
}    


#navi{position: fixed; top: 80px; right: 50%; padding: 0 5px; margin-right: 275px;}

.rules {color: #222;overflow: hidden; display: inline-block; background:linear-gradient(225deg, #E4EBF5, #f6f9fc); margin-right: 10px; width: 150px; padding: 3px 0px 2px 0px; border: 1px solid #FFF; box-shadow: 1px 1px rgba(189,189,189,.35); text-align: center; text-transform: uppercase; font-size: 6px; line-height: 13px; letter-spacing: 1px; text-shadow: 1px 1px rgba(189,189,189,.25); outline: 1px solid rgba(189,189,189,.25); outline-offset: -3px; -webkit-transition: all 0.8s ease-in;}
.rules:hover {background:linear-gradient(225deg, #fff, #fff); border: 1px solid #FFF; transform: rotate(1.4deg); } 

.takens {color: #222;overflow: hidden; display: inline-block; background:linear-gradient(225deg, #E4EBF5, #f6f9fc); margin-right: 10px; width: 150px; padding: 3px 0px 2px 0px; border: 1px solid #FFF; box-shadow: 1px 1px rgba(189,189,189,.35); text-align: center; text-transform: uppercase; font-size: 6px; line-height: 13px; letter-spacing: 1px; text-shadow: 1px 1px rgba(189,189,189,.25); outline: 1px solid rgba(189,189,189,.25); outline-offset: -3px; -webkit-transition: all 0.8s ease-in;}
.takens:hover {background:linear-gradient(225deg, #fff, #fff); border: 1px solid #FFF; transform: rotate(1.4deg); } 

.members {color: #222;overflow: hidden; display: inline-block; background:linear-gradient(225deg, #E4EBF5, #f6f9fc); margin-right: 10px; width: 150px; padding: 3px 0px 2px 0px; border: 1px solid #FFF; box-shadow: 1px 1px rgba(189,189,189,.35); text-align: center; text-transform: uppercase; font-size: 6px; line-height: 13px; letter-spacing: 1px; text-shadow: 1px 1px rgba(189,189,189,.25); outline: 1px solid rgba(189,189,189,.25); outline-offset: -3px; -webkit-transition: all 0.8s ease-in;}
.members:hover {background:linear-gradient(225deg, #fff, #fff); border: 1px solid #FFF; transform: rotate(1.4deg); } 

.etc {color: #222;overflow: hidden; display: inline-block; background:linear-gradient(225deg, #E4EBF5, #f6f9fc); margin-right: 10px; width: 150px; padding: 3px 0px 2px 0px; border: 1px solid #FFF; box-shadow: 1px 1px rgba(189,189,189,.35); text-align: center; text-transform: uppercase; font-size: 6px; line-height: 13px; letter-spacing: 1px; text-shadow: 1px 1px rgba(189,189,189,.25); outline: 1px solid rgba(189,189,189,.25); outline-offset: -3px; -webkit-transition: all 0.8s ease-in;}
.etc:hover {background:linear-gradient(225deg, #fff, #fff); border: 1px solid #FFF; transform: rotate(1.4deg); } 

  
  .link a{
    	font-size:7px; 
    	text-transform:uppercase;
    	letter-spacing:1px;
		  text-decoration:none;
    	color:rgb(0,0,0,.4);
    	transition: all .5s;
    }
  
	.icon {height:50px; width:50px; border-radius:5px; transition: all .5s}
  .link a img.icon:hover{filter:saturate(0%); transform:scale(.9,.9)}
  
  
#commname {position: fixed; visibility: visible;  z-index: 0; top: 0%; margin-top: -20px; right: 70%; padding: 0 5px;}
  
  h1 {
font-family: Oleo Script, sans-serif;
  text-align: center;
  font-size: 58px;
  position: relative;
  font-weight: 900;
  line-height: 1;
  color: transparent;
}
h1:focus {
  outline: none;
}

h1::before,
h1::after {
  content: attr(data-heading);
  position: absolute;
  top: 0;
  left: 0;
}

h1::before {
  color: #bbc3d6;
  -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 40%, 0 60%);
  clip-path: polygon(0% 100%, 100% 100%, 100% 40%, 0 60%);
}

h1::after {
  color: white;
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 36%, 0 56%);
  clip-path: polygon(0 0, 100% 0%, 100% 36%, 0 56%);
  -webkit-animation: slide 5s infinite;
  animation: slide 5s infinite;
}

@-webkit-keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translate(-20px, 2%);
  }
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translate(-20px, 2%);
  }
}