* {
  box-sizing: border-box;
}

body {
  font-family: 'Lexend Deca';
  height: 1100px;
  /* tamaño fijo */

  /* color: rgb(255, 255, 255); */
  color: #3e3e3e;

  /* background-color: #343838; */
  /* background-color: #30243E; */
  /* background-color: #49354e; */
  /* background-color: #7e5286; */
  /* background-color: #52b8cb; */

  background: radial-gradient(circle, #52b8cb 44%, #b0bbf7 100%);
}

/* ---------------- button ---------------- */
li {
  display: inline-block;
}
.page_wrap{
  padding: 20px;
}

.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  /* background: #EEE; */
  /* background: #62508f; */
  background: #5d7987;

  border: none;
  border-radius: 7px;
  background-image: linear-gradient(to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2));
  /* color: #222; */
  color: #EEE;
  font-family: 'Varela Round';
  font-size: 16px;
  /* text-shadow: 0 1px white; */
  cursor: pointer;
}

.button:hover {
  /* background-color: #8CF; */
  /* background-color: #62508f; */
  background-color: #724bdf;
  /* text-shadow: 0 1px hsla(0, 0%, 100%, 0.5); */
  color: #EEE;
}

.button:active,
.button.is-checked {
  /* background-color: #28F; */
  /* background-color: #442597; */
  /* background-color: #614f8d; */
  background-color: #6642c7;
}

.button.is-checked {
  color: white;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}


/* hacer botones inabilitados */
.Disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}


/* ---------------- button-group ---------------- */
.button-group {
  margin-bottom: 2px;
  /* display: inline-block; */
}

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin:0px 1px 2px 0px;
}

.button-group .button:first-child {
  border-radius: 0.5em 0 0 0.5em;
}

.button-group .button:last-child {
  border-radius: 0 0.5em 0.5em 0;
}


/* ========== cajas contenedoras de botones ========== */
#buttons-container {
  /* background-color: #d5dac8; */
  display: grid;
  grid-template-columns: 3.5fr 2fr 0.8fr;
  /* 4 columnas de 1fraction y 3 columnas de 1fr */
  /* grid-auto-rows: minmax(10px, auto); */
  grid-gap: 0.5em;
  /* espacio entre filas y columnas */
  grid-template-areas:
    /* en base a los nombres posicionar los items */
    "izq header header"
    "izq cent restart";

}

#buttons-container>div {
  /* el > es para los hijos directos de buttons-container */
  background-color: #c4d88c;
  border-radius: 15px;

  /* para darle un borde a cada item (y padding) */
  box-sizing: border-box;
  width: 100%;
  border: solid #5B6DCD 7px;
  padding: 5px;
}

/* espacio que ocupará cada item */
#bloque-botones-1 {
  grid-area: izq;
}

#bloque-botones-2 {
  grid-area: header;
}

#bloque-botones-3 {
  grid-area: cent;
}

#bloque-botones-4 {
  grid-area: restart;
  /* el boton estará centrado */
  display: grid;
  place-items: center;
}


/* justify-self: center;
  align-self: center; */




/* ---------------- isotope ---------------- */
/* borde del grid: */
/* .grid {
  border: 1px solid #333;
} */

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}


/* ---------------- .element-item ---------------- */
.element-item {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px;
  padding: 10px;
  /* background: #888; */
  color: #262524;
}

.element-item>* {
  margin: 0;
  padding: 0;
}

.element-item .name {
  position: absolute;

  left: 2px;
  top: 0px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 17px;
  font-weight: normal;
}

.element-item .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 42px;
  font-weight: bold;
  color: white;
}

.element-item .grade {
  position: absolute;
  right: 8px;
  top: 5px;
}



/* ---------------- items ---------------- */
/* ocultar todos los elementos de tipo div dentro de cada item */
.element-item div {
  position: absolute;
  display: none;
}

/* posicion de las imagenes de frame y background de los items */
.under {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -2;
}

.over {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

/* para agregar un tab entre los tooltip */
.tab {
  display: inline-block;
  margin-left: 10px;
}

/*para que el tooltip no se salga de la pantalla*/
.tooltip-inner {
  text-align: left;
  max-width: none;
}


/* ---------------- titulo ---------------- */
#titulo {
  /* texto centrado y que ocupe todo el ancho */
  text-align: center;
  width: 100%;
  margin-bottom: 1em;
}

#titulo>span {
  /* personalizar el interior del titulo  */
  height: 50px;
  padding: 15px;
  border-radius: 20px;
  width: 100px;
  /* background: #7b6cce; */
  background: #ffd472;
  font-weight: bold;
}

#github-link{
	background: #bbb;
	padding: 6px 6px;
	border: 1px solid gray;
	border-radius: 13px;
	font-size: 12px;
	color: #737373;
	display: inline-block;
	vertical-align: middle;
}


/*
.left{
	float:left;
}

.top_bar{
	line-height: normal;
	padding: 0;
	outline: 0 none;
	font-family: Verdana, Arial, Helvetica;
	
	width:100%;
	height:32px;
	margin:0 auto  10px;

	background:#333;
	border-bottom: 1px solid #222;
	box-shadow: 0px 0px 9px 1px #000;
	z-index: 1;
	top: 0;
}

.top_menu{
	min-width:300px;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	padding: 5px;
	text-align: right;
		
	display: flex;
	flex-wrap: wrap;
}


.top_menu a{
	font-size: 10pt;
	color: #ccc;
	padding: 3px 5px;
	border: 1px solid #757575;
	margin: -2px 5px;
	border-radius: 3px;
	display: inline-block;
	text-decoration: none;
	font-weight:bold;
	background-image: -webkit-gradient(
		linear,
		left top,
		left bottom,
		color-stop(0, #292827),
		color-stop(1, #8A8A8A)
	);
	background-image:-o-linear-gradient(bottom, #292827 0%, #8A8A8A 100%);
	background-image:-moz-linear-gradient(bottom, #292827 0%, #8A8A8A 100%);
	background-image:-webkit-linear-gradient(bottom, #292827 0%, #8A8A8A 100%);
	background-image:-ms-linear-gradient(bottom, #292827 0%, #8A8A8A 100%);
	background-image:linear-gradient(to bottom, #292827 0%, #8A8A8A 100%);
}


.top_menu a:last-child{
	margin-left: auto;
}


.top_menu a:hover{
	color:#fff
}

*/