html{
	cursor: url("img/cursor/normal.png"), default;
	
}
            
	a{
		cursor: url("img/cursor/select.png"), default;
	}
	

body { 
	 font-size: 16px;

}

img {
    transition: all .3s;
}

img:hover {
	-webkit-filter: brightness(120%);
    transition: all .3s;
}
 
 
body{
background-color: #000;
background-repeat: no-repeat;
background-size: 100%;
background-attachment: fixed;
color: #fff;

	  text-shadow:
    -2px -2px 0 #000,
    -2px 0px 0 #000,
    -2px 2px 0 #000,
    0px -2px 0 #000,
    0px -0px 0 #000,
    0px 2px 0 #000,
    2px -2px 0 #000,
    2px 0px 0 #000,
    2px 2px 0 #000,
    2px 3px 0 #000,
    3px 2px 0 #000,
    3px 3px 0 #000;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;

font-family: 'Karla', sans-serif;
}



#main{
background-color: #fff;
max-width: 700px;
padding: 15px;
text-align: justify;
font-size: 19px;
line-height: 1.3;

border: 25px solid transparent;
background: url("bg.png") repeat 0 0;
border-image: url("border_alt.png") 12 round;
}

 
#all{
margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 90vh;
  width: 500px;
}

 

 
::-webkit-scrollbar{
width: 7px; 
}
 
::-webkit-scrollbar-track{
background-color: #494949;
}
 
::-webkit-scrollbar-thumb{
background-color: #FFF;
}
 

a{
color: #E5ACC7;
}
a:hover{
font-weight: bold;
color: #97AEED;
}
a:active{
font-weight: bold;
}


.center {
   text-align: center;
}


.boxes{
	transition: all 0.5s;
}


.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  transition: all 0.3s;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  transition: all 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
  transform : translateY(-3px);
  transition: all .3s;
}

	
.move-up:hover{
	-webkit-filter: brightness(150%);
    transition: all .3s;
    transform : translateY(-3px);
}

.move-right:hover{
	-webkit-filter: brightness(150%);
    transition: all .3s;
    transform: translateX(2.5px);
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}


.credits {
font-size: 11px;
}

#blogpost {
   padding: 2px;
   margin-top: 6px;
   padding: 8px;
	background-image:url("media/images/blogs/imageback.png");
background-size: cover;
height: 100px; 
width: 730px;
   text-align: left;
}

.blogIMG {
height: 80px; 
width: 80px;
padding-right: 7px;
}

.blogtitle {
font-size: 20px;
}


.blogdate {
color: #9199AD;
}

.blogsubtitle {	
font-size: 20px;
text-align: center;
}

.inblogtitle {	
font-size: 24px;
text-align: center;
}

.inblogdate {	
font-size: 14px;
text-align: center;
color: #9199AD;
}
	
#blogtext {
font-family: 'MS UI Gothic';
font-size: 18px;
text-align: left;
}

.subtext {
font-style: italic;
font-size: 13px;
}

.smalltext {
font-size: 13px;
}

.smalltext2 {
font-size: 10px;
}

.subtext2 {
font-style: italic;
font-size: 8px;
color: #9199AD;
}

summary {
  outline: 2px solid #f590f0;
  color: #f590f0;
  margin: 5px;
  outline-offset: 5px;
  cursor: url("img/cursor/cur_select.png"), default;
  background: #010D25;
}

details > p {
  outline: 2px solid #f590f0;
  color: #f590f0;
  margin: 8px;
  outline-offset: 1.5px;
	font-family: 'MS UI Gothic';
background: #010D25;
}

.contentstable {
	position: sticky;
	top: 0;
}





.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 8px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-family: 'Karla', sans-serif;
  
  	  text-shadow:
    -2px -2px 0 #000,
    -2px 0px 0 #000,
    -2px 2px 0 #000,
    0px -2px 0 #000,
    0px -0px 0 #000,
    0px 2px 0 #000,
    2px -2px 0 #000,
    2px 0px 0 #000,
    2px 2px 0 #000,
    2px 3px 0 #000,
    3px 2px 0 #000,
    3px 3px 0 #000;
	
	border: 5px solid transparent;
background: url("bg.png") repeat 0 0;
  border: 2px solid #fff;
}

.active, .collapsible:hover {
  background-color: #262626;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #000;
  border: 2px solid #fff;
  	

}

.collapsible:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}



div.gallery {
  margin: 6px;
  border: 1px solid #fff;
  float: left;
  width: 260px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}


#particles-js {
  width: 100%;
  height: 100%;
}

/** Text Gradient Example */ 
.text-gradient {
 color: #FFF533; 
 background-image: linear-gradient(180deg, #FFF533 , #FFFFFF 33%, #9B5AD1 67%, #2E2E2E 100%); 
 background-clip: text; 
 -webkit-background-clip: text; 
 -webkit-text-fill-color: transparent; 
}





@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  /* make things invisible upon start */
  -webkit-animation: fadeIn ease-in 1;
  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

.fade-in.one {
  -webkit-animation-delay: 0.15s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.15s;
}

.fade-in.two {
  -webkit-animation-delay: 0.15s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.25s;
}