@font-face {
    font-family: brittany;
    src: url(../fonts/brittany.ttf);
}
@font-face {
	font-family: aciern;
    src: url(../fonts/aciern.ttf);
}
:root
{
	--white: #FFFFFF;
	--bgheader: url("../img/pinkwaves.svg");
}
*{
	box-sizing: border-box; /* hace que la caja tenga un tamaño determinado y no crezca,solo se hagan margenes internos */
	/*font-family: Source Sans Pro, sans-serif;*/
}

body
{
	/*color: var(--white);*/
	background-image: url("../img/background.jpg");
	/*background-repeat: no-repeat;*/
	background-size: 100% auto;
}
.crystals
{
	/*color: var(--white);*/
	background-image: url("../img/crystals.gif");
	/*background-repeat: no-repeat;*/
	background-size: 20% auto;
	width: auto;
	height: 22vh;
}
.maincontainer
{
	
	margin-top: 0px;/*este valor deplaza todo el main hacia abajo o arriba(anteriormente le di 80px para bajarlo y quedara la barra flotante bien colocada)*/
	/*padding-top:40px;*/
	z-index: 10;
}
.img-degrade
{
	width: 100%;
	height: 20vh;
}
.circle
{
	display: flex;
	width: 20%;
	height: 100%;
	margin: 0px auto 5% auto;
	padding: 0px;
}
.container-buttons
{
	display: block;
	width: 60%;
	margin: 0px auto;
	padding: 0px
}
.glossy-button 
{
	display: inline-block;
	position: relative;
	/*background-color: #8673A1;*/
	background-image: linear-gradient( /* chrome */
	hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%, 0) 50%,
	hsla(0, 0%, 0%, 0.3) 50%, hsla(0, 0%, 100%, 0.2)
	);
	font-size: 3rem;
	font-weight: bold;
	color: var(--white);
	padding: 1%;
	text-shadow: 0 0 15px hsla(0, 0%, 100%, 1), /* bloom */
	0 2px 4px hsla(0, 0%, 0%, 0.7); /* drop shadow */
	border-radius: 30px;
	box-shadow:
	inset 0 -5px 20px hsla(0, 0%, 0%, 0.4), /* top light */
	inset 0 5px 20px hsla(0, 0%, 100%, 0.4), /* bottom shadow */
	/* multiple light sources yall */
	-8px 8px 5px hsla(0, 0%, 0%, 0.15), /* drop shadow 1 */
	5px 18px 10px hsla(0, 0%, 0%, 0.2); /* drop shadow 2 */
	cursor: pointer;
	margin: 5% 0px;
	transition: transform 0.1s, box-shadow 0.1s;
	text-align: center;
	text-decoration: none;	
	width: 100%;
}
/* highlight */
.glossy-button:before
{
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  right: 20px;
  top: 5px;
  height: 40%;
  border-radius: 25px;
  background: linear-gradient(
    hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0) );
}

.glossy-button:hover
{
  transform: scale(1.05);
  box-shadow:
    inset 0 -5px 20px hsla(0, 0%, 0%, 0.4), /* top light */
    inset 0 5px 20px hsla(0, 0%, 100%, 0.4), /* bottom shadow */
    /* multiple light sources yall */
    -12px 12px 5px hsla(0, 0%, 0%, 0.15), /* drop shadow 1 */
    10px 25px 10px hsla(0, 0%, 0%, 0.2); /* drop shadow 2 */
  background-color: rgba(134, 115, 161, .7);
  transition: 0.1s;
}

.btnbrkline
	{
		display: none;
	}

/*#one:hover ~ #two 
{
	/*display: block;
	animation-name: example;
	animation-iteration-count: infinite;
	animation-duration: 2s;
}

@keyframes example {
  0%   {transform: scale(1);}
  100% {transform: scale(2);}
}*/


.emojiblock
{
	display: inline-block;
}

/*.shake
{
	animation-name: shaker;
	animation-iteration-count: infinite;
	animation-duration: 0.2s;
}

@keyframes shaker {
  0%   {transform: rotate(0deg);}
  40%   {transform: rotate(20deg);}
  100%   {transform: rotate(-20deg);}
}*/

.shake
{
	animation-name: shaker;
	animation-iteration-count: infinite;
	animation-duration: 0.2s;
}

@keyframes shaker {
  0%   {transform: rotate(0deg);}
  40%   {transform: rotate(20deg);}
  100%   {transform: rotate(-20deg);}
}

.shake2
{
	animation-name: shakel;
	animation-iteration-count: infinite;
	animation-duration: 0.2s;
}

@keyframes shakel {
  0%   {transform: rotate(0deg);}
  40%   {transform: rotate(-20deg);}
  100%   {transform: rotate(20deg);}
}




/*RESPONSIVE*/
@media only screen and (max-width: 768px)
{
	.crystals
	{
		height: 5vh;
	}	
	.img-degrade
	{
		height: 5vh;
	}
	.circle
	{
		display: none;
	}
	.container-buttons
	{
		width: 90%;
	}	
	.glossy-button 
	{
		font-size: 1.9rem;
		margin: 10% 0px;
	}	
	.btnbrkline
	{
		display: inline;
	}
}