@font-face {
	font-family: Techno;
	src: url(TechnoCharm.otf) format('opentype');
}

@font-face {
	font-family: mysterious;
	src: url(TheLastShurikenRegular.ttf) format('truetype');
}

@font-face {
	font-family: conthrax;
	src: url(conthrax.otf) format('opentype');
}

html {
	font-size: 1.2em;
}

body {
	padding:0;
	margin:0;

	background-image: url(./img/bg1.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: right 10px top;

	height: 100vh;
	width: 100vw;

	overflow-x: hidden;
}

hr {
	border-top : 3px solid #ffff31;

}

/* unvisited link */
a:link {
  color: yellow;
  text-decoration: none;
}

/* visited link */
a:visited {
  color: yellow;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: yellow;
  text-decoration: none;
}

/* selected link */
a:active {
  color: yellow;
  text-decoration: none;
} 

#titulo {
	padding: 0.5em;
	text-align: center;
	font-family: Techno;
	color: yellow;
	/**text-shadow: 0px 0px .2em rgba(0, 0, 0, 0.8);**/
	text-shadow: 
		0 0 5px #000, 
		0 0 10px #c89f3f, 
		0 0 15px #31302d, 
		0 0 20px #938e4f, 
		0 0 40px #c6aa3c, 
		0 0 60px #f8ff10, 
		0 0 98px #ffd700;
	font-size: calc(4vw + 4vh);
	animation: blink 12s infinite;
	-webkit-animation: blink 12s infinite;
	animation-timing-function: linear;
}

@-webkit-keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
	text-shadow: 	0 0 5px #ffa500,
	  		0 0 15px #ffa500,
			0 0 20px #ffa500,
			0 0 40px #ffa500,
			0 0 60px #ff0000,
			0 0 10px #ff8d00,
			0 0 98px #ff0000;
	color: #fff6a9;
  }
}

@keyframes blink {
  20%,
  24%,
  55% {
    color: #111;
    text-shadow: none;
  }
  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
	text-shadow: 	0 0 5px #ffa500,
	  		0 0 15px #ffa500,
			0 0 20px #ffa500,
			0 0 40px #ffa500,
			0 0 60px #ff0000,
			0 0 10px #ff8d00,
			0 0 98px #ff0000;
	color: #fff6a9;
  }
}


#titulo2 {
	text-align: center;
	color: yellow;
	border: 2px solid yellow;
	border-radius: .7em;
	display: block;
	width: max-content;
	padding: .5em 1.1em .5em 1.1em;
	margin-left: auto;
	margin-right: auto;
	font-weight: bold;
	background-color: rgba(0,0,0,0.9);
	text-transform: uppercase;
}


.subtitulo {
	font-family: Techno;
	font-size: 3em;

	text-align: center;
	color: yellow;

	padding: 1em;
	margin-top: 1em;

	text-shadow: 0 0 5px #000;
	animation: blink 12s infinite;
}

.main-div {
	height: 100vh;
	overflow: auto;
}


#platosmenu-container {
	margin: 2em;
}

#platosmenu-container img{
	max-width: 250px;
}

.platos {
	border-left: 2px solid yellow;
	padding-left: 1em;
}

.platos > div {
	font-weight: bold;
	color: rgba(255,255,0, 0.65);
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 100%;

	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 10px;
	padding: 1em;
}

.spacer {
	display: block;
	height: 1.7em;
}

#chopsticks {
	position:relative;
	top: 0;
	left: 50%;

	margin-bottom: -5em;
	margin-top: -5em;
}

@-webkit-keyframes animateOutline {
  0% {
    outline-width: 1px;
    outline-offset: 0;
    outline-color: rgba(255, 255, 0, 0);
  }

  20% {
    outline-color: rgba(255, 255, 0, 0.65);
  }

  /* The animation finishes at 50% */
  50% {
    outline-width: 7px;
    outline-offset: 0px;
    outline-color: rgba(255, 255, 0, 0);
  }

}

@keyframes animateOutline {
  0% {
    outline-width: 1px;
    outline-offset: 0;
    outline-color: rgba(255, 255, 0, 0);
  }

  20% {
    outline-color: rgba(255, 255, 0, 0.65);
  }

/* The animation finishes at 50% */
  50% {
    outline-width: 5px;
    outline-offset: 0px;
    outline-color: rgba(255, 255, 0, 0);
  }

}

.description-container {
}

.description-text {
	background-color: rgba(0,0,0,0.8);
	color: white;

	margin-left: 10%;
	margin-right: 10%;

	border-radius: 10px;

	margin-bottom: .85em;
	padding: 1.5em;
	font-size: 1.1em;
	line-height: 1.6em;

	outline-width: 1px;
	outline-offset: 0;
	outline-color: rgba(255, 255, 0, 0.55);
	outline-style: solid;
	animation: animateOutline 5s ease infinite;
	animation-iteration-count: 2;
}

.description-text-hidden {
	display: none;
}

.description-container2 {
	margin: 10% 5% 10% 5%;
	margin-top: 1em;
}

.scrolllink {
	text-align: center;
	font-size: 4em;
	font-weight: bold;
	color:yellow;
	display: block;

	margin-bottom: 7%;
	animation: blink 12s infinite;
	-webkit-animation: blink 12s infinite;
}
.scrollink:hover {
	background: rgba(255,255,49, 0.3);
}

.sponsorlogo-container{
	height: 100%;

}


.sponsorlogo {
	max-width: 300px;
	max-height: 300px;
	width: 300px;
	height: 300px;


	display: block;
	margin: auto;
	border: 2px solid yellow;
}

.ticketslink {
	font-size: 1.5em;
}

.bi-link {
	animation: blink 9s infinite;
	-webkit-animation: blink 9s infinite;
}



.botonesContainer {
	text-transform: uppercase;
	margin: 1.5em;
}
.botonesContainer > div {
	display: block;
}
.enlacePortada:hover {
	background: rgba(255,255,49, 0.3);
}
.enlacePortada {
	display:block;
	font-size: 1.6em;
	padding: .3em;

	border: 2px solid yellow;
	border-radius: 10px;

	width: 350px;
	margin: 0 auto;

	outline-width: 1px;
	outline-offset: 0;
	outline-color: rgba(255, 255, 0, 0.55);
	outline-style: solid;

	animation: blink 17s infinite, animateOutline 5s infinite;
	-webkit-animation: blink 17s infinite, animateOutline 5s infinite;
}






#footer {
	font-size: 1.6em;

	color: yellow;
	text-align: center;

	text-transform: uppercase;
	text-shadow: 0 0 3px #000;

	height: 3em;

	background-color: rgba(0,0,0, 0.2);
}
#footer > div {

}
#rss-container {
	display: flex;
	padding-top: 1em;
}




/* https://www.svgviewer.dev/s/41889/chopsticks */