/*------  ≪ °❈° ≫≪ °❈° ≫  -----*/
/*------- G E N E R A L --------*/
*{
	box-sizing:border-box;
}

h3{
	font-size: 14pt;
}h2{
	font-size: 38pt;
	font-family: pinyon;
    line-height:2;
	padding: 0px;
	margin: 0px;
	color: #ccfff5;
	text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.33);
}h1{
	font-size: 22pt;
}a{
	text-decoration: none;
	color: black;
}

body{
	margin: 0px;
	padding: 0px;
	width:100%;
    background-image:
    linear-gradient(to bottom, rgba(193, 144, 193, 0.2) 0%, rgba(144, 102, 102, 0.3) 50%, rgba(42, 11, 11, 0.5) 120%),
    url(/assets/wallpaper.jpeg);
    background-size: cover, 200px;
}

main{
	padding: 20px; /*IF GLITCHING CHECK THIS!!!*/
}

@font-face {
  font-family: TypewriterCAPS;
  src: url("/assets/fonts/La_Machine_Company.ttf");
}@font-face {
  font-family: Pinyon;
  src: url("/assets/fonts/PinyonScript-Regular.ttf");
}


/*------  ≪ °❈° ≫≪ °❈° ≫  -----*/
/*--------N A V--B A R S--------*/
#horizontalnav{
	width:100%;
	/*margin-left: auto;
	margin-right: auto;*/
}

#horizontalnav img{
	width: 65px;
}

#horizontalnav a{
	display: inline-block;
	text-align: center;
}

.navcaption{
	line-height: 8px;
	display: block;
}

.navbar a{
	padding-right: 5px;
	padding-left: 5px;
	color: #ffebf4;
    -webkit-filter: drop-shadow(0px 0px 0px rgba(38, 12, 12, 0.8));
	-webkit-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
	text-shadow: 0px 1px 7px rgba(0, 0, 0, 0.7);
}.navbar a:hover{
	-webkit-filter: drop-shadow(0px 0px 10px rgba(38, 12, 12, 0.8));
}.navbar img:hover {
	animation: shake 2s linear infinite;
}

#web-button{
    width:fit-content;
    position: absolute;
    top:10px;
    right:5px;
    z-index: 1000;
}#web-button img{
    width: 65px;
}#web-button a{
    display: inline-block;
	text-align: center;
}

/*---draggables - basic setup----*/
/* ≪ °❈° ≫≪ °❈° ≫≪ °❈° ≫≪ °❈° ≫*/
#containment-wrapper {
	position: absolute;
	pointer-events: none; /*interact with underlaying elements*/
	top:0;
	width:100%;
	height:100%;
	padding: 10px;
	box-sizing: border-box;
    
}.ui-widget-content{
	background-color: rgba(0, 0, 0, 0) !important;
	border:none !important;
}.draggable{
	height:100px;
    width:fit-content;
	position: absolute;
	pointer-events: auto; /*regain pointer activity*/
	cursor: move;
}.draggable img{
	cursor: grab;
	height: 100%;
    background-color: rgba(0, 0, 0, 0) !important;
    -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
    will-change: filter;
}.draggable:hover {
	animation: shake 1s;
    animation-iteration-count: infinite;
    -webkit-filter: drop-shadow(2px 5px 10px rgba(0, 0, 0, 0.5));   
    filter: drop-shadow(2px 5px 10px rgba(0, 0, 0, 0.5));   
    will-change: filter;
	cursor: move;
	/*cursor: url(/assets/icons/cursor.png), auto;*/
}

/*------------------------------*/
/*------  ≪ °❈° ≫≪ °❈° ≫  -----*/
/*------------------------------*/
/*-- M E D I A  Q U E R I E S --*/
@media only screen and (max-width: 600px){
	.mobile-no{
		display: none;
	}
}

@media only screen and (max-width: 750px){
	#sword{
		display: none;
	}.title-container{
	  display: block;
	}.desktop-title{
		display: none;
	}
}

@media only screen and (max-width: 450px){
	/*make icons smaller*/
	#horizontalnav{
		font-size: 11pt;
	}.navbar a{
	    padding-right: 0px;
	    padding-left: 0px;
	}#horizontalnav img{
		width: 50px;
    }
	/* W E B*/
	td, th{
		padding: 5px;
    }
}

/*------------------------------*/
/*-----   ≪ °❈° ≫≪ °❈° ≫   ----*/
/*----- A N I M A T I O N S ----*/
@keyframes foldeven{
	0%{
	  transform: skewY(15deg);
	}
	50%{
	  transform: skewY(-15deg); 	
	}
	100%{
	  transform: skewY(15deg);
	}
}	
@keyframes foldodd{
	0%{
	  transform: skewY(-15deg);
	}
	50%{
	  transform: skewY(15deg); 	
	}
	100%{
	  transform: skewY(-15deg);
	}
}

@keyframes spin{ 
    100% {
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
}

@keyframes fold{
	0%{transform: skewY(3deg);}
	50%{transform: skewY(-3deg);}
	100%{transform: skewY(3deg);}
}

@keyframes nudge {
  0%, 100% {transform: translate(0, 0);}
  50% {transform: translate(0px, 3px);}
  80% {transform: translate(0px, -8px);}
}

@keyframes wiggle {
  0%, 7% {transform: rotateZ(0);}
  15% {transform: rotateZ(-10deg);}
  20% {transform: rotateZ(7deg);}
  25% {transform: rotateZ(-8deg);}
  30% {transform: rotateZ(6deg);}
  35% {transform: rotateZ(-4deg);}
  40%, 100% {transform: rotateZ(0);}
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.glow{
    -webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));
	-webkit-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.glow:hover{
	-webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));
}


/*------------------------------*/