/* parastas lietas */

* {
	margin: 0;
	padding: 0;
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30px 10%;
	background-color: #24252a;
}

.logo {
	cursor: pointer;
}

/* index.html */



/* navigacija */

.nav__links a,
.cta,
.overlay__content a {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	color: #edf0f1;
	text-decoration: none;
}

.nav__links {
	list-style: none;
	display: flex;
}

.nav__links li {
	padding: 0px 20px;
}

.nav__links li a {
	transition: color 0.3s ease 0s;
}

.nav__links li a:hover {
	color: #0088a9;
}


/* chata sistema */

.centrs{
	margin: 10px auto;
	width: 1000px;
	text-align: center;
}

.chata_vesture{
	min-height: 400px;
	width: 500px;
	margin: 5px auto;
	padding: 5px;
	background: #f1f1f1;
	text-align: left;
	overflow: scroll;
}

.ierakstavieta{
	min-height: 25px;
	width: 500px;
	margin: 5px auto;
	padding: 5px;
}

/* speles.html */

.magija{
	text-align: center;
}

.uz_dambrete,
.uz_monetas_mesana,
.uz_tictactoe,
.uz_2048{
	display: inline-block;
	padding: 10px;
}

/* monetas mesana */

body {
	background: #FFFFFF;
}

h1{
	text-align: center;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}

#coin {
	position: relative;
	margin: 20px auto;
	width: 100px;
	height: 100px;
	cursor: pointer;
}

#coin div {
	width: 100%;
	height: 100%;
	-webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
	-webkit-box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);
     -moz-box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);
          box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);
}

.side-a {
	background-color: #FF41EB;
}

.side-b {
	background-color: #00BFB9;
}

#coin {
	transition: -webkit-transform 1s ease-in;
	-webkit-transform-style: preserve-3d;
}
#coin div {
	position: absolute;
	-webkit-backface-visibility: hidden;
}
.side-a {
	z-index: 100;
}
.side-b {
	-webkit-transform: rotateY(-180deg);

}

#coin.heads {
	-webkit-animation: flipHeads 3s ease-out forwards;
	-moz-animation: flipHeads 3s ease-out forwards;
     -o-animation: flipHeads 3s ease-out forwards;
       animation: flipHeads 3s ease-out forwards;
}

#coin.tails {
	-webkit-animation: flipTails 3s ease-out forwards;
	-moz-animation: flipTails 3s ease-out forwards;
     -o-animation: flipTails 3s ease-out forwards;
       animation: flipTails 3s ease-out forwards;
}

@-webkit-keyframes flipHeads {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1800deg); -moz-transform: rotateY(1800deg); transform: rotateY(1800deg); }
}

@-webkit-keyframes flipTails {
	from { -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0); }
	to { -webkit-transform: rotateY(1980deg); -moz-transform: rotateY(1980deg); transform: rotateY(1980deg); }
}