/* body {
	background: linear-gradient(
		rgba(0, 0, 0, 0.8), 
		rgba(0, 0, 0, 0.8)
	),
	url('https://www.ufaonline.club/assets/images/bg.jpg');
	background-blend-mode: luminosity;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center top;
	background-attachment: fixed;
	color: #fff !important;
	font-family: 'Inter', sans-serif !important;
} */


@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

body {
	font-family: 'Inter', sans-serif !important;
	/* font-family: 'Noto Sans Thai', sans-serif; */
	position: relative;
	/* background-image: url(../../images/img_mb/pc_top_bg.webp); */
	background: linear-gradient(
		rgba(0, 0, 0, 0.9), 
		rgba(0, 0, 0, 0.9)
	),
	url('https://images2.alphacoders.com/767/767514.jpg');
	/* background-repeat: no-repeat; */
	background-attachment: scroll;
	background-size: cover;
	background-size: 100%;
	background-position: top center;
	position: relative;
	background-size: 100% 100%;
	/* animation: shrink 5s infinite alternate; */
	animation: zoom 10s infinite alternate;
	-webkit-animation: zoom 10s infinite alternate;
}

/* 

body {
	background-color: #fff !important;
	font-family: 'Inter', sans-serif !important;
} */

h2 {
	color: #fff !important;
}

@keyframes zoom {
0% {
	background-size: 100%;

}
50% {
	background-size: 105%;
}
100% {
	background-size: 100%;
}
}

.vs {
font-family: 'Permanent Marker', cursive !important;
font-size: 5em;
margin: 0;
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
}

/* .name-event {
background-color: rgba(0, 0, 0, 0.5);
border-bottom: 2px solid rgb(117, 117, 117);
color: #fff;
} */

/* .name-event-mobile {
background: rgba(0, 0, 0, 0.5) !important;
border-bottom: 2px solid rgb(117, 117, 117);
color: #fff;
} */

.menu-mobile {
position: relative;
}

.menu-mobile-link {
position: fixed;
bottom: 0%;
width: 90%;
right: 0;
background-color: black;
font-size: 1.5em;
margin: 0 !important;
padding: 10px;
}

.menu-mobile-link a {
color: #fff;
text-decoration: none;
display: inline-block;
width: 45%;
}

.menu-mobile-link a:first-child {
border-right: 1px solid #fff;
}

.name-event h1 {
padding: 5px !important;
/* text-shadow: -1px -1px 0#797979, 1px -1px 0 #797979, -1px 1px 0 #797979, 1px 1px 0 #797979; */
}

/* Button */
.btn-rule {
border-radius: 15px !important;
background: #c79712 !important;
/* box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); */
color: #fff !important;
}

.btn-confirmation-prediction {
border-radius: 15px !important;
background: #c79712 !important;
border-color: #fff !important;
color: #fff !important;
padding: 15px !important;
font-size: 1.3em !important;
}

.text-stroke {
/* text-shadow: -1px -1px 0#797979, 1px -1px 0 #797979, -1px 1px 0 #797979, 1px 1px 0 #797979; */
	color: rgb(242 224 166 / 90%);
}

.input-score {
border: 1px solid #fff;
border-radius: 10px;
background: #c79712 !important;
width: 100px;
height: 100px;
text-align: center;
color: #fff;
font-size: 1.8em;
}

/* Prediction */
.board-prediction {
padding: 10px;
border-radius: 8px;
background: rgba(214, 185, 89, 0.459);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
backdrop-filter: blur(2px);
color: #fff;
}

.prediction-score, .number-of-participants {
color: rgb(242 224 166 / 90%);
}
#modalRule {
color: #fff;
}
/* custom bootstrap */
.navbar {
background: linear-gradient(55deg, #ddb43d00 0%, #ddb43d87 30%, #fff2cc 60%, rgb(255 191 0 / 15%) 100%) !important;

}
.modal-content, .modal-header, .modal-body {
background-color: rgba(63, 63, 63, 0.7) !important;
}

.btn-close {
color: #fff !important;
}

.modal-header {
border-bottom: 4px solid #807B72 !important;
}

.btn-warning {
	border: 1px solid #dadada !important;
}

.hl {
	color: #c79712 !important;
}

.nav-link {
	color: #d3d3d3 !important;
	transition: 0.7s !important;
}


.nav-link:hover {
	color: #ceb163 !important;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
	color: #ceb163 !important;
}