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

h3{
	font-size: 14pt;
}h2{
	font-size: 24pt;
}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;
}

@font-face {
  font-family: TypewriterCAPS;
  src: url("/assets/fonts/La_Machine_Company.ttf");
}@font-face {
  font-family: TypewriterFADED;
  src: url("/assets/fonts/1942.ttf");
}@font-face {
  font-family: Digital_Cursive;
  src: url("/assets/fonts/PhospheneFont-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;
}




/*------  ≪ °❈° ≫≪ °❈° ≫  -----*/
/*--------- H  O  M  E ---------*/


/*---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: move;
	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;*/
}


/*------  ≪ °❈° ≫≪ °❈° ≫  -----*/
/*-------- W  O  R  K S --------*/
.text {
	text-transform: uppercase;
	display: flex;
	margin-top: 100px;
    margin-bottom: 80px;
	padding-left: 15px;
}.text span {
	font-size: 34pt;
	width: 50px;
	font-family: TypewriterCAPS;
	text-align: center;
	box-shadow: 5px 7px 6px 0px rgba(0,0,0,0.3);
}

.mobile-title{
	margin-bottom: 10px;
	margin-top: 30px;
	padding-left: 0px;
}.title-container{
	display: none;
	width:fit-content;
	margin-left: auto;
	margin-right: auto;
}

.text span:nth-child(odd) {
	color: rgba(137, 94, 175, 0.52);
	background-color: #dad7fa;
	animation: foldodd 3s;
	animation-iteration-count: infinite;
}.text span:nth-child(even) {
	color: rgba(170, 130, 95, 0.52);
	background-color: antiquewhite;
	animation: foldeven 3s;
	animation-iteration-count: infinite;
}#works-body a{
	text-shadow:none;
}#works-body nav a{
	color: #000000;
}#works-body nav a:hover{
	-webkit-filter: none;
}#works-main{
	padding-top: 50px;
}
/*------  ≪ °❈° ≫≪ °❈° ≫  -----*/
/*---------- W  E  B -----------*/
#web-body{
	background: none;
	background-color: #c6bdb1;
	background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url(/assets/random/flower.png);
}

#sword{
	position: absolute;
	width: 350px;
	top:10px;
	right:10px;
}

h2{
	padding: 0px;
	margin: 0px;
	color: #ccfff5;
	text-shadow: 2px 2px 2px black;
}

#bespoke-title{
	animation:shake 8s linear infinite;
	max-width:700px;
	min-width: 300px;
	margin-top: 50px;
}#bespoke-title img{
    width: 100%;
}

#web-main{
	padding-left: 15px;
}
#web-main a{
	font-family: serif;
	font-size: 12pt;
	color: #000000;
	transition: 0.5s;
}#web-main a:hover{
	color: #ff22bb;
	filter: blur(1px);
}



/* ≪ °❈° ≫≪≫≪ °❈° ≫ */
table{
	margin-bottom: 100px;
	width:100%;
	max-width:500px;
	background-image: url(/assets/web/papirs.jpg);
	background-size: cover;
	border-collapse: collapse;
	border: outset thick #efdce3;
	box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.3);
}td, th{
	border: dashed 1.5px #af859d;
	padding: 8px;
}

/*------------------------------*/
/*------  ≪ °❈° ≫≪ °❈° ≫  -----*/
/*------------------------------*/
/*-- 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));
}


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