.newSpell {
	animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
	0% {
		-webkit-box-shadow: 0px 2px 30px 1px rgba(20,137,222,0.6);
		-moz-box-shadow: 0px 2px 30px 1px rgba(20,137,222,0.6);
		box-shadow: 0px 2px 30px 1px rgba(20,137,222,0.6);
		animation: pulse 2s ease-out infinite;
	}
	50% {
		-webkit-box-shadow: 0px 2px 60px 25px rgba(20,137,222,0.6);
		-moz-box-shadow: 0px 2px 60px 25px rgba(20,137,222,0.6);
		box-shadow: 0px 2px 60px 25px rgba(20,137,222,0.6);
	}
	100% {
		-webkit-box-shadow: 0px 2px 30px 1px rgba(20,137,222,0.6);
		-moz-box-shadow: 0px 2px 30px 1px rgba(20,137,222,0.6);
		box-shadow: 0px 2px 30px 1px rgba(20,137,222,0.6);
	}
}
  
  

body{
	background-image: url("https://static.wikia.nocookie.net/hearthstone_gamepedia/images/f/fb/Skin-Content-Background.jpg");
	font-size: 0.85rem;
}

#header-container{
  background-image: url("../img/clases/Skin-Wrapper-Background.webp");
  background-repeat: repeat-x;
  background-position: center bottom;
  padding-left: 33%;
}
#header{
	width: 60%;
	position: relative;
	padding: 2.5em;
	height: 11em;
	min-width: 40em;
}
  	
#searchinput {
	margin-left: 1.5em;
	margin-right: 1.5em;
	border: 1px solid #ccc;
    border-radius: 0;
    margin-bottom: 10px; 
    display: inline-block;
    width: 50%;
    height: 90%;
    font-size: 1.5em;
	font-family: 'secondaryFont';
	border-radius: 36px;
	padding-left: 1.5em;
}
#refresh-btn {
	background-color: #ead5aa;
	border:2px solid #000;
	/* border: none; */
	border-radius: 50%;
	color: #233a6e;
	cursor: pointer;
	font-size: 24px;
	height: 2.8em;
	width: 2.8em;
	outline: none;
	position: relative;
	overflow: hidden;
  }
  
  #refresh-btn i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  }
  
  #refresh-btn:hover {
	background-color: #233a6e;
	color: #ead5aa;
	border:5px solid #fff;
  }
  .mana:hover {
	/* on hover - scale to this x,y size */
	transform: scale(1.15,1.15);
	/* property values: name, duration, iteration, timing-function */
	animation: jiggle 0.5s infinite linear;
  }

  @keyframes jiggle {
	/* start at 0deg and this scale size.
		scale size is repeated here to maintain smooth scaling */
	0% {transform: rotate(0deg) scale(1.15,1.15);}
	/* midway rotate 2deg right */
	50% {transform: rotate(10deg) scale(1.15,1.15);}
	/* end rotate -2deg left */
	100% {transform: rotate(-10deg) scale(1.15,1.15)}
  }

  .title:hover, .espec:hover{
	cursor: pointer;
  }
  
  .spells:has(.title:hover) .card:not(:hover), .spells:has(.espec:hover) .card:not(:hover){
  	filter: blur(4px);
  	transition: 0.5s;
  }
  
  #refresh-btn:active {
	box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
  }
  
/* DROPDOWN MENU */
#dropdown{
	list-style-type: none;
	border-radius:60px;
	display:inline-block;
	background:#551a17;
	border:2px solid #000;
}
#dropdown:hover{
	outline:5px solid white;
	background: #7b2521;
}
#dropdown img{width: 3.8em;}
#dropdownButton span{display: none;}
.dropdown-menu{
  background:#3e3932;
  border-radius:36px;
  border:0px;
  outline:none;
  min-width: 12rem;
}
.dropdown-menu li{
	margin-left: 0.3em;
	padding: 0.3em;
  	border-radius:36px;
}
.dropdown-menu li:hover{
	cursor: pointer;
	background-color: #12110f;
}
.dropdown-menu li:hover > a{color: #fcbd2d;}
.dropdown-menu li a{color: white;}
.dropdown-menu li a:hover{text-decoration: none;}
.dropdown-menu li a span{
	margin-left: .5em;
	font-family: 'primaryFont';
}

/* SPELLS */
#resultados{
	font-family: 'secondaryFont';
	font-style: italic;
	color: #614326;
	font-weight: 600;
	font-size: 1.5em;
	padding-top: 30px;
	padding-left: 30px;
}