@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@500&family=Bungee+Spice&display=swap');

body, html {
    height: 100%;
	font-family: 'Fira Sans Extra Condensed', sans-serif;
}

.header {
	font-family: 'Bungee Spice', cursive;
}
.navbar .header {
	font-size: 1.8rem;
}

.header-text, .footer-text {
	font-family: 'Fira Sans Extra Condensed', sans-serif;
}

.play-button {
	font-size: 2rem;
}

.ball {
	cursor: pointer;
	position: relative;
}

.bg-color-1 {
	background-color: #E81224;
}
.bg-color-2 {
	background-color: #F7630C;
}
.bg-color-3 {
	background-color: #FFF100;
}
.bg-color-4 {
	background-color: #16C60C;
}
.bg-color-5 {
	background-color: #0078D7;
}
.bg-color-6 {
	background-color: #886CE4;
}
.bg-color-7 {
	background-color: #8E562E;
}
.bg-color-8 {
	background-color: #383838;
}
.bg-color-9 {
	background-color: #176b14;
}
.bg-color-10 {
	background-color: #850b15;
}
.bg-color-11 {
	background-color: #9e3f08;
}
.bg-color-12 {
	background-color: #fce595;
}
.bg-color-13 {
	background-color: #0b6806;
}
.bg-color-14 {
	background-color: #043864;
}
.bg-color-15 {
	background-color: #1c085e;
}
.bg-color-16 {
	background-color: #422613;
}
.bg-color-17 {
	background-color: #a09b9b;
}
.bg-color-18 {
	background-color: #063006;
}
.bg-color-19 {
	background-color: #ed5a66;
}
.bg-color-20 {
	background-color: #ec8951;
}
.bg-color-21 {
	background-color: #f5e7b4;
}
.bg-color-22 {
	background-color: #88f482;
}
.bg-color-23 {
	background-color: #88beee;
}
.bg-color-24 {
	background-color: #b19df0;
}
.bg-color-25 {
	background-color: #ebb997;
}
.bg-color-26 {
	background-color: #f6baba;
}
.bg-color-27 {
	background-color: #94e3cb;
}
.bg-color-28 {
	background-color: #f7b3b8;
}
.bg-color-29 {
	background-color: #f5c0a1;
}
.bg-color-30 {
	background-color: #787158;
}
.bg-color-31 {
	background-color: #b6f3b3;
}
.bg-color-32 {
	background-color: #b9d4eb;
}
.bg-color-33 {
	background-color: #c2b8e1;
}
.bg-color-34 {
	background-color: #f8d9c5;
}
.bg-color-35 {
	background-color: #ffdcdc;
}
.bg-color-36 {
	background-color: #cef5e9;
}

.ball-holder {
	overflow: hidden;
	position: relative;
}

.flipped {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

.upsideDown {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

.leftSide {
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rightSide {
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.img-fluid-side {
	max-height:100%;
	width:auto;
}

#header-score #score {
	font-size: 1.6rem;
}
#header-score img {
	margin-right: 3px;
	margin-top: -12px;
}
#header-score #timeLeft {
	font-size: 1.6rem;
}
#main-highscore {
	font-size: 2.2rem;
}
#main-highscore img {
	margin-bottom:4px;
	margin-left:6px;
}

.modal {
	padding-top:52px;
	padding-bottom:18px;
}

#overBadgeHighScore {
	font-size: 1.2rem;
}
#overBadgeScore {
	font-size: 2.2rem;
}
#overBadgeScore img {
	margin-left:16px;
}

.bottle {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image:url('../img/champange-open.png?v=2');
	background-size:100%;
	background-repeat:no-repeat;
	background-position:bottom;
}

.goat {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}
.goat1 {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	background-image:url('../img/bad-1.png');
	background-size:fixed;
	background-repeat:no-repeat;
	background-position:center;
}
.goat2 {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	background-image:url('../img/bad-2.png');
	background-size:fixed;
	background-repeat:no-repeat;
	background-position:center;
}
.goat3 {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	background-image:url('../img/bad-3.png');
	background-size:fixed;
	background-repeat:no-repeat;
	background-position:center;
}
.goat4 {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	background-image:url('../img/bad-4.png');
	background-size:fixed;
	background-repeat:no-repeat;
	background-position:center;
}
.goat5 {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	background-image:url('../img/bad-5.png');
	background-size:fixed;
	background-repeat:no-repeat;
	background-position:center;
}
.goat6 {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	background-image:url('../img/bad-6.png');
	background-size:fixed;
	background-repeat:no-repeat;
	background-position:center;
}
.goat7 {
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height:100%;
	background-image:url('../img/bad-7.png');
	background-size:fixed;
	background-repeat:no-repeat;
	background-position:center;
}