@import "Style.css";
.main_page {float:left; box-sizing:border-box;width: 100%; text-align: center;}
.section1{box-sizing:border-box;width:100%;padding: 0px 0 40px;color: #333f4c;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;background-size: contain;background-image: linear-gradient(329deg, #020024 0%, #e8e8e8 50%, #ffc600 100%);}
.section1 h2 {
	width: 100%;
	font-size: 3vw;
	font-weight: 900;
	text-transform: uppercase;
	background-image: linear-gradient(-225deg, #8e29b2 0%, #364593 29%, #ff0000 67%, #333f4c 100%);
	background-size: auto auto;
	background-clip: border-box;
	background-size: 200% auto;
	color: #fff;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: textclip 2s linear infinite;
	display: inline-block;
}
  
@keyframes textclip {
	to {
	background-position: 200% center;
	}
}
.section1 p{margin:20px 0;font-size: 2vw;line-height:30px;color: #000000;width: 100%;}
.section1 a{
    color: #ffc600;
    display: block;
}
.lottery{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.lottery .pool{
    width: 25vw;
    height: 7vw;
    border: 2px solid #9f9f9f;
    border-radius: 20vw;
    font-size: 5vw;
    font-weight: 900;
    line-height: 7vw;
    cursor: pointer;
    color: #333f4c;
    background: #f6f6f6;
    animation: setShadow 1s ease infinite;
    box-shadow: 0 0 30px 2px #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}
@keyframes setShadow {
    0% {
		/* background: #ffc600; */
		box-shadow: 0 0 30px 2px #000;
    }
	25% {
		box-shadow: 0 0 40px 3px #000;
    }
    50% {
		box-shadow: 0 0 50px 4px #000;
    }
	75% {
		box-shadow: 0 0 40px 3px #000;
    }
    100% {
		box-shadow: 0 0 30px 2px #000;
    }
}
.lottery .pool:hover{
	background: #ffc600;
	color: #fff;
	box-shadow: 0 0 100px 6px #000;;
}
.lottery .pool span{
    margin-right: 5px;
}
.lottery .timer{
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff00;
    padding: 10px 5px;
    border-radius: 10px;
    width: 50vw;
}
.lottery .timer .time{
    display: flex;
    flex-direction: column;
    margin: 30px 0;
}
.lottery .timer .time .number{
    background-image: url('/public/img/Black.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 9vw;
    height: 9vw;
    color: #fff;
    line-height: 9vw;
    font-size: 4vw;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lottery .timer .time .name{
    background-image: url(/public/img/Yellow.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 9vw;
    height: 9vw;
    color: #000;
    line-height: 9vw;
    font-size: 2vw;
    font-weight: 900;
}
.lottery .price{
    font-size: 3vw;
    font-weight: 700;
    margin: 0 0 15px;
}
.buy{
    width: 14vw;
    background: #000;
    line-height: 60px;
    border-radius: 10px;
    font-size: 2vw;
    font-weight: 700;
    color: #ffc600;
    cursor: pointer;
}

@media(max-width: 768px) {
	.section1{
		padding: 20px 0;
	}
	.section1 h2{
		font-size: 7vw;
		margin-bottom: 40px;
	}
	.section1 .pool .step h4 {
		font-size: 5vw;
	}
	.section1 .pool{
		width: 50vw;
		height: 15vw;
		line-height: 15vw;
		font-size: 8vw;
	}
	.lottery .timer{
		width: 100%;
	}
	.lottery .timer .time .number{
		width: 20vw;
		height: 20vw;
		line-height: 20vw;
		font-size: 7vw;
	}
	.lottery .timer .time .name{
		width: 20vw;
		height: 20vw;
		line-height: 20vw;
		font-size: 4vw;
	}
	.lottery .price{
    font-size: 6vw;
}
	.lottery .buy{
		width: 35vw;
		font-size: 5vw;
	}
	.section1 p{
		font-size: 4vw;
		margin: 20px 5%;
	}
	.footer{height: auto;}
	.logo_part_footer{
		width: 100%;
	}
	.logo_part_footer .logo{
		float: none;
		text-align: center;
		width: 100%;
		margin: 0 auto;
	}
	.logo img{float: none;}
	.footer_row{
		flex-direction: column;
	}
	.footer_row .column{
		width: 100%;
		text-align: center;
	}
	.footer_row .column .button{
		width: 100%;
	}
	.footer_row .column .social_media{
		float: none;
	}
}