@import url('https://fonts.googleapis.com/css?family=Exo|Anonymous+Pro');

/* */
/* Light mode */
:root.light {
	color-scheme: light;
}

/* Dark mode */
:root.dark {
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not(.light) {
		/* color-scheme: dark; */
	}
}

html {
	/* font-size must be set here, not at body{} */
	font-size: 0.8125rem;
}

@media screen and (min-height: 580px) {
	html {
		/* overflow: hidden; */
	}
}

body {
	font-family: Exo, 'Open Sans', verdana;
	color: white;
	background-color: #222;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
	font-size: 11pt;
}

:root.animation-disabled canvas.snow {
	display: none;
}

#main-view {
	/*A "positioned" element is one whose position is anything except static.*/
	/*left: 50%;*/
	/*transform: translateX(-50%);*/
	margin: auto;
	max-width: 970px;
}

.main-wrapper {
	position: relative;
	min-height: 100%;
}

/* .main-wrapper {
    background-image:
        url(../images/x-png%20dao%20dep.png),
        url(../images/x-hoa_mai_2018_1.png);
    background-size: 280px 220px, 240px;
    background-position: -15px 60px, right calc(100% - 10px);
    background-repeat: no-repeat, no-repeat;
} */

.background-view {
	position: absolute;
	z-index: -10;
	overflow: hidden;
	background-color: black;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	height: 100%;
	width: 100%;
}

.background-layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

/*.fixed-position {
	position: sticky;
	position: -webkit-sticky; /* Safari
	top: 0;
	z-index: 1;
	/*background-color: #fff;
}
*/

header {
	padding: 16px 12px 5px;
	text-align: center;
	font-weight: bold;
}

#header-name {
	font-size: 40px;
}

a {
	text-decoration: none;
}

nav {
	display: -webkit-flex;
	/* Safari */
	display: flex;
	padding: 30px 60px 15px;
}

nav>div {
	-webkit-flex: 1;
	/* Safari 6.1+ */
	-ms-flex: 1;
	/* IE 10 */
	flex: 1;
	text-align: center;
}

nav a {
	color: white;
	opacity: 0.7;
}

nav a:hover {
	opacity: 1;
}

nav a::before,
nav a>* {
	vertical-align: middle;
}

nav .icon-mobile:before {
	font-size: 15pt;
}

form#send-code-form {
	width: 50%;
	padding-top: 5%;
	padding-bottom: 5%;
	margin: auto;
	text-align: center;
}

fieldset {
	border-radius: 7px;
}

input {
	margin: 7px;
	opacity: 0.9;
}

input:hover {
	opacity: 1;
}

input[type=submit] {
	cursor: pointer;
	background-color: darkgray
}

/*.main-content {
    padding-bottom: 60px
}*/

.timer {
	position: absolute;
	bottom: 3.5em;
	width: 100%;
	text-align: center;
}

time {
	color: gold;
	padding: 0 3px;
	font-family: "Anonymous Pro"
}

#footer {
	position: absolute;
	bottom: 0px;
}

/* This div is to prevent overlap in footer with position: absolute*/
#antioverlap {
	height: 70px;
}

#choose-font {
	position: absolute;
	bottom: 0;
	left: 5px;
}

#choose-font:hover .choose-font {
	visibility: visible
}

.choose-font {
	visibility: hidden
}

:root:not(.animation-disabled) span.flashing {
	background: linear-gradient(90deg, #38a2d7, #561139);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-size: 200% auto;
	animation: textShine 2s linear infinite;
}

:root:not(.animation-disabled) span.flashing {
	background: linear-gradient(90deg, #9bec37, #561139);
	background-clip: text;
	-webkit-background-clip: text;
	background-size: 200% auto;
	-webkit-text-fill-color: transparent;
	animation: textShine 2s linear infinite;
}

:root:not(.animation-disabled).dark span.flashing {
	background: linear-gradient(90deg, #38a2d7, #561139);
	background-clip: text;
	-webkit-background-clip: text;
	background-size: 200% auto;
}

@media (prefers-color-scheme: dark) {
	:root:not(.animation-disabled):not(.light) span.flashing {
		background: linear-gradient(90deg, #38a2d7, #561139);
		background-clip: text;
		-webkit-background-clip: text;
		background-size: 200% auto;
	}
}

:root:not(.animation-disabled) #tet span.flashing {
	background: linear-gradient(90deg, #c2520c, #e8eb48);
	background-clip: text;
	-webkit-background-clip: text;
	background-size: 200% auto;
	animation: textShine-ltr 2s linear infinite;
}

@keyframes textShine {
	100% {
		background-position: 200%;
	}
}

@keyframes textShine-ltr {
	100% {
		background-position: -200%;
	}
}

@media screen and (min-width: 1300px) {
	#main-view {
		max-width: unset;
		width: 75%;
	}
}

@media screen and (max-width: 768px) {
	nav {
		padding-left: 0;
		padding-right: 0;
	}

	form#send-code-form {
		width: 95%;
	}
}

@media screen and (max-width: 500px) {
	nav a span {
		display: none
	}
}

:root.light .background-view {
	background: right 100% top 130% no-repeat, linear-gradient(rgb(12, 42, 84), rgb(21, 95, 161) 33.19%, rgb(24, 83, 142) 81.51%, rgb(20, 72, 132)) !important;
}

:root.dark .background-view {
	/* background-color: black; */
	background: top 130% right 100% no-repeat, linear-gradient(hsla(215, 75%, 0%, 1), hsl(208, 77%, 0%) 33.19%, hsl(210, 71%, 0%) 81.51%, hsla(212, 74%, 0%, 1)) !important;
}