.electrolize-regular {
	  font-family: "Electrolize", sans-serif;
	  font-weight: 400;
	  font-style: normal;
	}

body {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	/*background-image: url('../fondo.jpg')!important;*/
	background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
	background-color: #000;
	transition: background 1s ease-in-out;
}

.contenedor{
	padding:20px;
	min-height: 260px; /* Establece una altura mínima para evitar que se reduzca demasiado */
    box-sizing: border-box; /* Asegura que el padding se incluya en la altura total */
	border:1px solid rgba(255,255,255,0.4);
	background: rgba(0,0,0,0.4);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius:6px;
	box-shadow:0 20px 20px -5px rgba(0,0,0,0.6);
	
    display: flex; /* Agrega display flex para centrar verticalmente */
    flex-direction: column; /* Asegura que los elementos estén en una columna */
    align-items: center; /* Centra los elementos horizontalmente */
    justify-content: center; /* Centra los elementos verticalmente */
	transition: all .3s ease-out; /* Agrega una transición suave a todas las propiedades */
}
.contenedor:hover{
	background: rgba(0,0,0,0.3);
	border: 1px solid rgba(255,255,255,0.6);
	box-shadow:0 5px 15px 5px rgba(0,0,0,0.4);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

#logo {
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: 0 auto;
	margin-top:-25%;
	transition: all .3s ease-out;
}

#titulo {
	color: #fff;
	font-size: 32px;
	font-family: "Electrolize", sans-serif;
	text-shadow:0 5px 5px rgba(0,0,0,0.8);
	transition: all .3s ease-out;
}
#contador {
	font-size: 18px;
	margin-top:10%;
	color: #ffffff;
	text-align:center;
	transition: all 1.0s ease-out;
	text-shadow:0 4px 3px rgba(0,0,0,0.8);
	transition: all .3s ease-out;
	font-family: "Electrolize", sans-serif;
	font-size:18px;
}
#mensaje {
	font-size: 18px;
	display: none;
	margin-top:10%;
	color: #FF0000;
	text-align:center;
	transition: all 1.0s ease-out;
	text-shadow:0 4px 3px rgba(0,0,0,0.8);
	transition: all .3s ease-out;
	font-family: "Electrolize", sans-serif;
	font-size:18px;
}

#social {
	margin-top:10px;
	font-family: "Electrolize", sans-serif;
	font-size:16px;
	text-shadow:0 2px 3px rgba(0,0,0,1);
	text-align:center;
	color: #43edf8;
}
.transicionV{
    opacity: 1;
    height: auto;
    transition: opacity .5s ease, height .5s ease;
}
.transicionN {
    opacity: 0;
    height: 0;
    overflow: hidden;
}
/* Conjunto botones bajo la ventana del logo */
.botones {
    max-width: 320px; /* Ajusta el valor según tus necesidades */
    margin: auto; /* Centra el contenedor en la página */
}

.botones ul {
	/*border: 1px solid red;*/
    list-style: none;
    padding: 0;
    margin: 0;
	display: flex;
	text-align: center;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea */
}

.botones li{
    text-align: center;
	text-decoration:none;
    padding: 2.5px 5px 10px 5px;
	width:46.3%;	
}

a {text-decoration:none;}

li a {
	display: block;
	font-family: "Electrolize", sans-serif;
	font-size:14px;
	color:#ffffff;
	cursor: pointer; /* Cambia el cursor al pasar sobre los elementos */
	/*background:#0088cc;*/
	padding:10px;
}
li a:hover {
	padding:10px;
	font-family: "Electrolize", sans-serif;
	font-size:14px; 
	color:#ffffff;
	text-shadow: 0px 3px 4px #000000;
}

.starcitizen,.discord,.telegram,.twitch {
	transition: all .3s ease-out;
	box-shadow:0 8px 10px -5px rgba(0,0,0,0.8);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}
.starcitizen:hover,.discord:hover,.telegram:hover,.twitch:hover {
	box-shadow:0 4px 5px -4px rgba(0,0,0,0.8);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size:14.5px;
}

.starcitizen {
	background: url(https://cdn.robertsspaceindustries.com/static/images/content-page/horizontal-lined-bg.png) repeat;
	border:1px solid #1b4268;
	color:#0788b9;
}
.starcitizen:hover{
	border:1px solid #43edf8;
	color:#43edf8;
	text-shadow:0 1px 2px #43edf8;
}
.discord {
	background: rgba(30,32,37,0.6);
	border: 1px solid rgba(163,163,172,0.8);
	color:rgb(163,163,172);
}
.discord:hover {
	background: rgba(41,43,50,0.6);
	border: 1px solid rgba(88,101,242,0.8);
	color: rgb(255,255,255);
	text-shadow: 0 1px 2px rgba(88,101,242,1);
}
.telegram {
	background: rgba(73,149,190,0.4);
	border: 1px solid rgba(108,193,227,0.8);
	color:rgb(230,233,239);
}
.telegram:hover {
	background: rgba(0,136,204,0.6);
	border: 1px solid rgba(108,193,227,0.8);
	color:rgb(230,233,239);
	text-shadow: 0 1px 2px rgba(255,255,255,1);
}
.twitch {
	background: rgba(36,39,44,0.6);
	border: 1px solid rgba(71,79,84,0.8);
	color:rgb(145, 71, 254);
}
.twitch:hover {
	background: rgba(71,79,84,0.4);
	border: 1px solid rgba(145, 71, 254,0.8);
	color:rgb(255,255,255);
	text-shadow: 0 1px 2px rgba(0,231,1,1);
}