/* main */
#main{
    overflow: hidden;
}
.main_text_div{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 32px;
}
.logo{
    margin-bottom: 66px;
}
.main_date_row{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.main_date_row p{
    line-height: 1.5;
    font-family: var(--font-text);
    font-size: 28px;
}
.main_text{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 12px;
}
.main_text p{
    font-size: 32px;
}
.main_text p.prize{
    color: var(--color-primary);
}
.main_text p.prize span{
    text-decoration: underline;
    font-weight: 500;
}
#main .btn_main{
    margin-top: 48px;
}
#main{
    position: relative;
    display: flex;
    align-items: start;
    padding-top: 100px;
}
#main .container{
    position: relative;
    z-index: 3;
}
.pepe_main{
    position: absolute;
    top: 140px;
    left: 0;
}
.robot_main{
    position: absolute;
    top: 140px;
    right: 0;
}
.blur{
    width: 900px;
    height: 400px;
    border-radius: 500px;
    background: var(--color-primary);
    position: absolute;
    z-index: 1;
    opacity: .3;
    display: block;
    filter: blur(300px);
    -webkit-filter: blur(300px);
}

/* rewards */
#rewards{
    width: 100%;
    text-align: center;
}
.rewards_div{
    background: var(--color-white);
    border-radius: 8px;
    padding: 60px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    gap: 80px;
    box-shadow: 0px 24px 0 var(--color-primary);
    height: auto;
}
.rewards_div p, .rewards_div li{
    font-size: 28px;
    line-height: 1.3;
    text-align: left;
    color: var(--color-black);
    font-weight: 300;
}
#rewards .row{
    margin-top: 66px;
    align-items: stretch;
}
.rewards_text{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    row-gap: 20px;
}
.rewards_div p.h3{
    margin-bottom: 12px;
}
.rewards_div li{
    font-weight: 500;
}
.rewards_div:nth-child(2){
    background: var(--color-black);
    border: 2px solid var(--color-white);
    background: var(--color-black);
}
.rewards_div:nth-child(2) p{
    color: var(--color-white);
}
.rewards_div:nth-child(2) p span{
    font-weight: 500;
}
#rewards{
    position: relative;
}
.reward_star_top{
    position: absolute;
    top: 8%;
    right: 10%;
}
.reward_pepe_top{
    position: absolute;
    left: 3%;
    top: 16%;
}
.reward_star_bottom{
    position: absolute;
    bottom: 7%;
    left: 12%;
}
.reward_robot_right{
    position: absolute;
    bottom: 20%;
    right: 1%;  
}

/* how_to_join */
#how_to_join{
    position: relative;
}
#how_to_join img.line{
    position: absolute;
    left: 0;
}
#how_to_join span{
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 32px;
    line-height: 1;
    color: var(--color-black);
    font-family: var(--font-title);
    position: relative;
    z-index: 2;
}
.how_div{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    row-gap: 32px;
    width: 20%;
    flex-grow: 1;
    position: relative;
}
.how_div p.h3{
    color: var(--color-white);
    font-weight: 400;
}
#how_to_join .row{
    margin-top: 160px;
    position: relative;
    z-index: 2;
    gap: 30px;
}
.line_abs{
    position: absolute;
    display: block;
    width: 100%;
    border: 3px solid transparent; /* Прозрачная граница */
    border-image: repeating-linear-gradient(
      to right, 
      #E7F9B1 0px, #E7F9B1 20px, 
      transparent 20px, transparent 40px
    ) 10;
    top: 32px;
    left: 6px;
}
.line_abs_left{
    position: absolute;
    display: block;
    width: 100%;
    border: 3px solid transparent; /* Прозрачная граница */
    border-image: repeating-linear-gradient(
      to right, 
      #E7F9B1 0px, #E7F9B1 20px, 
      transparent 20px, transparent 40px
    ) 10;
    top: 32px;
    left: -92%;
}
.how_btn_row{
    margin-top: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
}
.how_btn_row .btn_main{
    width: 100%;
    padding: 60px;
}
.how_btn_row .btn_main:first-child{
    background: var(--color-white);
}
.how_btn_row .btn_main:first-child:hover{
    background: var(--color-primary-hover);
}
.mouse{
    position: absolute;
    z-index: 10;
    right: 40px;
}

/* how_it_works */
.how_text{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    row-gap: 40px;
    width: 47%;
}
.how_text_div{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    row-gap: 8px;
    width: 100%;
}
.how_text_div p{
    gap: 5px;
    font-size: 28px;
    color: var(--color-white);
    font-weight: 300;
}
.how_text_div p a{
    text-decoration: underline;
    color: var(--color-white);
    display: inline;
}
.how_text_div p.h3{
    color: var(--color-white);
}
#how_it_works .row{
    align-items: start;
    justify-content: space-between;
    margin-top: 64px;
}
.how_text .btn_main{
    margin-top: 24px;
}
#how_it_works img{
    width: 40%;
}

/* footer */
footer{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 0px;
    background: var(--color-black);
    position: relative;
    z-index: 2;
}
footer h2{
    text-align: left;
    font-size: 48px;
}
footer .row{
    align-items: end;
    justify-content: space-between;
    width: 100%;
}
footer img{
    height: 40px;
}
.footer_text{
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    row-gap: 30px;
}
.footer_text ol{
    margin: 0;
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    row-gap: 16px;
}
.footer_text ol li{
    font-size: 32px;
    color: var(--color-white);
    max-width: 80%;
    font-weight: 300;
}