@font-face {
    font-family: "DM Sans";
    src: url("./static/DMSans-Regular.ttf");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "PolySans";
    src: url("./static/polysanstrial-bulkywide.otf");
}

body {
    margin: 0;
    background: url(Main_page_laptop_1440px.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    color: white;

}

.mainConteiner {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.greetingText {
    display: flex;
    margin: 0 50px 0 100px;
    justify-content: space-between;
    align-items: center;
}


.greetingText h2 {
    margin: 0;
    width: 660px;
    height: 154px;
    font-family: PolySans;
    font-weight: 700;
    font-size: 64px;
    line-height: 100%;
    letter-spacing: 0%;

}

.greetingText b {
    color: var(--Pink, #F9068C);
}

.greetingTextP1 {
    color: #96DD7C;
    font-family: DM Sans;
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    width: 660px;
    height: 31px;
}

.greetingTextP2 {
    font-family: DM Sans;
    font-weight: 400;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0%;
    width: 660px;
    height: 42px;
}

.greetingText button {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background: linear-gradient(180deg, #8A36FA 0%, #6D0FFE 120.51%);
    box-shadow: 0px 4px 180px 0px #9917FF;
    width: 318px;
    height: 78px;
    gap: 10px;
    border-radius: 100px;
    padding: 24px 81px;
    font-family: DM Sans;
    font-weight: 800;
    font-size: 24px;
}

.greetingText button:hover {
    background: linear-gradient(180deg, #9548f9 0%, #4b00ba 120.51%);
}

.info {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 200px;
}

.info img {
    width: 546px;
}

.infoContainer {
    width: 546px;
}

.infoContainerP1 {
    width: 499px;
    height: 31px;
    margin: 0;
    font-family: DM Sans;
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
}

.infoContainerP2 {
    width: 546px;
    height: 128px;
    font-family: DM Sans;
    line-height: 25.6px;
    letter-spacing: 0.25px;

}

.infoContainer h3 {
    margin: 0;
    color: var(--Pink, #F9068C);
    font-family: PolySans;
    font-weight: 700;
    font-size: 43px;
    line-height: 100%;
    letter-spacing: 0%;
    width: 499px;
    height: 58px;
}

.infoStars {
    display: flex;
    align-items: center;
}

.infoStars p {
    margin-left: 20px;
}

.infoBtnContainer {
    display: flex;
    align-items: center;
}

.infoBtnContainer p {
    width: 68px;
    height: 31px;
    border-width: 1px;
    color: #949494;
    text-decoration: line-through;
    font-family: DM Sans;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
}

.infoBtnContainer button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 318px;
    height: 56px;
    border-radius: 100px;
    padding: 24px 81px;
    background: linear-gradient(180deg, #8A36FA 0%, #6D0FFE 120.51%);
    box-shadow: 0px 4px 180px 0px #9917FF;
    font-family: DM Sans;
    font-weight: 800;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: white;
}

.infoBtnContainer button:hover {
    background: linear-gradient(180deg, #9548f9 0%, #4b00ba 120.51%);
}

.infoContainerP3 {
    display: flex;
    align-items: center;
    height: 26px;
    font-family: DM Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 25.6px;
    letter-spacing: 0.25px;
    color: #96DD7C;
}

.infoContainerP3 svg {
    margin-right: 20px;
}

.prizeSection h3 {

    color: white;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    font-family: PolySans;
    padding: 20px;
    line-height: 1.4;
    margin: 0 auto;

}

.prizeSection span {
    color: var(--Pink, #F9068C);
    margin: 0 10px;
}

.prizeContainer {
    display: flex;
    justify-content: space-around;
    margin-top: 100px;

}

.prize {
    cursor: pointer;
}

.prize:hover {
    display: inline-block;
    animation: shake 0.5s infinite alternate;
}



.headerContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

header p {
    font-family: DM Sans;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0.5px;
    text-align: center;
    width: 432px;
    height: 21px;

}

header span {
    font-family: DM Sans;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.1px;
    text-align: center;
    width: 90px;
    height: 16px;

}

#countdown {
    display: flex;
}

.days,
.hours,
.minutes {
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popUp {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #231D46CC;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.popUpContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.popUpContainer button {
    cursor: pointer;
    background: linear-gradient(180deg, #8A36FA 0%, #6D0FFE 120.51%);
    box-shadow: 0px 4px 180px 0px #9917FF;
    box-shadow: 0px -4px 0px 0px #00000033 inset;
    width: 318px;
    height: 78px;
    border-radius: 100px;
    margin-top: 20px;
    color: white;
    font-family: DM Sans;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
}

.popUpWinContainer button:hover {
    background: linear-gradient(180deg, #9548f9 0%, #4b00ba 120.51%);
}


.prize {
    width: 203px;

}

.prize:hover {
    animation: shake 0.5s infinite alternate;

}

.boxLid {
    position: relative;
    z-index: 4;
    margin-bottom: -131px;
    ;
    transition: transform 2s ease;
    display: inline-block;
}

.boxLid.open {
    transform: translateY(-100px);
}

.boxLid .close {
    transform: translateY(100px);
}

.boxBottom {
    position: relative;
    z-index: 3;
    margin-left: 4px;
}

.light1 {
    margin: -273px 0 0 -59px;
}

.box {
    position: relative;
    width: 203px;
}

.star {
    width: 70px;
    position: relative;
    z-index: 2;
    transition: transform 2s ease;
    display: inline-block;
    margin: 0 0px -186px 70px;
}

.star.up {
    transform: translateY(-100px);
}

.inside {
    margin: 0 0 -44px 4px;
    position: relative;
    z-index: 1;

}

.lightInside {
    position: relative;
    margin: -91px 0 -219px -55px;
    z-index: 2;
    opacity: 0;

}

.popUpSvg {
    width: 391px;
}



@media screen and (max-width: 1400px) {
.greetingText img{
    width: 600px;
}
}
@media screen and (max-width: 1024px) {
    body {
        background: url(Main_page_laptop_1440px.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .greetingTextP1 {
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 0.5px;
        width: 474px;
        height: 21px;
    }

    .greetingText h2 {
        font-family: PolySans;
        font-weight: 700;
        font-size: 48px;
        line-height: 100%;
        letter-spacing: 0%;
        width: 474px;
        height: 116px;
    }

    .greetingTextP2 {
        font-family: DM Sans;
        font-weight: 400;
        font-size: 24px;
        line-height: 100%;
        letter-spacing: 0%;
        width: 474px;
        height: 31px;
    }

    .greetingText button {
        width: 305px;
        height: 72px;
    }

    .info img {
        width: 468px;
    }

    .infoContainer {
        width: 468px;
    }

    .infoContainerP1 {
        width: 474px;
        height: 26px;
        font-weight: 400;
        font-size: 20px;
    }

    .infoContainer h3 {
        width: 474px;
        height: 48px;
        font-weight: 700;
        font-size: 40px;
    }

    .infoContainerP2 {
        font-weight: 400;
        font-size: 16px;
        line-height: 25.6px;
        letter-spacing: 0.25px;
        width: 468px;
        height: 154px;
    }

    .infoBtnContainer button {
        width: 304px;
        height: 64px;
        border-radius: 100px;
    }

    .greetingText img {
        width: 444px;
        height: 677px;
    }

    .greetingText {
        margin: 0 10px 0 65px;
    }

    .prizeSection h3 {
        width: 960px;
        height: 57px;
        font-size: 40px;
    }

    .boxLid {
        margin-bottom: -103px;
        width: 145px;
    }

    .inside {
        width: 139px;
        margin: 0 0 -33px 4px;

    }

    .lightInside {
        margin: -91px 0 -162px -46px;
        width: 239px;
    }

    .boxBottom {
        width: 139px;
    }

    .star {
        width: 65px;
        margin: 0 0px -154px 43px;
    }

    .light1 {
        width: 222px;
        margin: -194px 0 0 -39px;
    }

    .box,
    .prize {
        width: 145px;
    }
}

@media screen and (max-width: 768px) {
    body {
        background: url(Main_page_Tablet_768px.png);
        background-size: cover;
        background-repeat: no-repeat;
    }

    .greetingTextP1 {
        width: 370px;
    }

    .greetingText h2 {
        width: 319px;
        height: 96px;
        font-size: 31px;
    }

    .greetingTextP2 {
        width: 315px;
        height: 26px;
        font-size: 20px;
    }

    .greetingText button {
        width: 344px;
        height: 72px;
    }

    .greetingText img {
        width: 376px;
        height: 544px;
    }

    .greetingText {
        margin: 0 15px;
    }


    .info img {
        width: 345px;
    }

    .infoContainer {
        width: 329px;
    }

    .infoContainerP1 {
        width: 344px;
        height: 21px;
        font-size: 16px;
    }

    .infoContainer h3 {
        width: 344px;
        height: 38px;
        font-size: 29px;
        line-height: 100%;
        letter-spacing: 0%;
    }

    .infoContainerP2 {
        width: 344px;
        height: 205px;
    }

    .infoBtnContainer p {
        width: 60px;
        height: 31px;
        top: 16.5px;
        left: 4px;
        font-weight: 800;
        font-size: 24px;
        line-height: 100%;
        letter-spacing: 0%;

    }

    .infoBtnContainer button {
        width: 254px;
        height: 64px;

        font-weight: 800;
        font-size: 17px;
        line-height: 100%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;

    }


    .prizeSection h3 {
        padding: 0;
        width: 750px;
        height: 57px;
        font-weight: 700;
        font-size: 30px;
        line-height: 100%;
        letter-spacing: 0%;
    }

    .boxLid {
        margin-bottom: -96px;
        width: 125px;
    }

    .inside {
        width: 119px;
        margin: 0 0 -28px 4px;

    }

    .boxBottom {
        width: 118px;
    }

    .lightInside {
        margin: -91px 0 -141px -38px;
        width: 196px;
    }

    .star {
        width: 55px;
        margin: 0 0px -137px 37px;
    }

    .light1 {
        width: 199px;
        margin: -169px 0 0 -39px;
    }

    .box,
    .prize {
        width: 127px;
    }
}

@media screen and (max-width: 428px) {
    body {
        background: url(Main_paige_Mobile_428px.png);
        background-size: cover;
        background-repeat: no-repeat;
    }

    header p {
        width: 260px;
    }

    .greetingTextP1 {
        width: 370px;
        margin-bottom: 20px;
        text-align: center;
    }

    .greetingText h2 {
        width: 319px;
        height: 96px;
        font-size: 31px;
        text-align: center;
    }

    .greetingTextP2 {
        width: 363px;
        height: 26px;
        font-size: 20px;
    }

    .greetingText button {
        width: 344px;
        height: 72px;
    }

    .greetingText img {
        width: 376px;
        height: 544px;
    }

    .greetingText {
        flex-direction: column;
        margin: 50px 10px;
    }

    .info {
        flex-direction: column-reverse;
        margin-bottom: 50px;
    }

    .info img {
        width: 345px;
    }

    .infoContainer {
        width: 329px;
    }

    .infoContainerP1 {
        width: 344px;
        height: 21px;
        font-size: 16px;
    }

    .infoContainer h3 {
        width: 344px;
        height: 38px;
        font-size: 29px;
        line-height: 100%;
        letter-spacing: 0%;


    }

    .infoContainerP2 {
        width: 344px;
        height: 205px;
    }

    .infoBtnContainer p {
        width: 60px;
        height: 31px;
        top: 16.5px;
        left: 4px;
        font-weight: 800;
        font-size: 24px;
        line-height: 100%;
        letter-spacing: 0%;

    }

    .infoBtnContainer button {
        width: 254px;
        height: 64px;

        font-weight: 800;
        font-size: 15px;
        line-height: 100%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;

    }


    .prizeSection h3 {
        width: 375px;
        height: 76px;
        margin-bottom: 100px;
        color: white;
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        font-family: sans-serif;
        padding: 0;
        line-height: 1.4;
    }

    .boxLid {
        margin-bottom: -94px;
        width: 125px;
    }

    .inside {
        width: 119px;
        margin: 0 0 -28px 4px;

    }

    .boxBottom {
        width: 118px;
    }

    .star {
        width: 55px;
        margin: 0 0px -135px 35px;
    }

    .light1 {
        width: 210px;
        margin: -180px 0 0 -43px;
    }

    .box,
    .prize {
        width: 127px;
    }

    .hidden {
        display: none;
    }

    .popUpSvg {
        width: 300px;
    }
}

@media screen and (max-width: 375px) {

    body {
        background: url(Main_page_Mobile_M_375px.png);
        background-size: cover;
        background-repeat: no-repeat;
    }

    header p {
        width: 260px;
    }

    .greetingTextP1 {
        width: 345px;
        text-align: center;
    }

    .greetingText h2 {
        text-align: center;



        width: 342px;
        height: 96px;
        font-size: 37px;
    }

    .greetingTextP2 {
        margin-left: 10px;
        width: 315px;
        height: 26px;
        font-size: 20px;
    }

    .greetingText button {
        width: 344px;
        height: 72px;
    }

    .greetingText img {
        width: 340px;
        height: 530px;
    }

    .greetingText {
        flex-direction: column;
        margin: 50px 10px;
    }

    .info {
        flex-direction: column-reverse;
        margin-bottom: 50px;
    }

    .infoContainerP2 {
        width: 319px;
    }

    .infoContainer h3 {
        width: 308px;
        font-size: 26px;
    }

    .infoContainerP1 {
        width: 199px;
    }

    .prizeSection h3 {
        width: 342px;
        height: 76px;
        margin-bottom: 100px;
        color: white;
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        font-family: sans-serif;
        padding: 0;
        line-height: 1.4;
    }

    .prizeContainer {
        margin-top: 55px;
    }

    .boxLid {
        margin-bottom: -89px;
        width: 115px;
    }

    .inside {
        width: 108px;
        margin: 0 0 -26px 4px;

    }

    .lightInside {
        width: 193px;
    }

    .boxBottom {
        width: 108px;
    }

    .star {
        width: 45px;
        margin: 0 0px -127px 36px;
    }

    .light1 {
        width: 185px;
        margin: -160px 0 0 -36px;
    }

    .box,
    .prize {
        width: 127px;
    }

    .hidden {
        display: none;
    }

    .popUpSvg {
        width: 300px;
    }
}

@media screen and (max-width: 320px) {

    body {
        background: url(Main_page_Mobile_S_320px.png);
        background-size: cover;
        background-repeat: no-repeat;
    }

    header p {
        width: 281px;
    }

    .greetingTextP1 {
        width: 288px;
        height: 42px;
        font-weight: 500;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0.5px;

        text-align: center;
    }

    .greetingText h2 {
        text-align: center;
        width: 288px;
        height: 144px;
        font-family: PolySans;
        font-weight: 700;
        font-size: 35px;
        line-height: 100%;
        letter-spacing: 0%;
        text-align: center;

    }

    .greetingTextP2 {
        width: 288px;
        height: 21px;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0%;
        text-align: center;


        margin-left: 10px;

    }

    .greetingText button span {
        width: 110px;
        font-weight: 800;
        font-size: 24px;
        line-height: 100%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;
    }

    .greetingText button {
        padding: 0;
        width: 288px;
        height: 64px;



    }

    .greetingText img {
        width: 318px;
        height: 515px;
    }

    .greetingText {
        flex-direction: column;
        margin: 50px 10px;
    }

    .infoContainer {
        width: 274px;
    }

    .info {
        flex-direction: column-reverse;
        margin-bottom: 50px;
    }

    .info img {
        width: 320px;
    }

    .infoContainerP2 {
        font-weight: 400;
        font-size: 16px;
        line-height: 25.6px;
        letter-spacing: 0.25px;
        width: 288px;
        height: 256px;
    }

    .infoBtnContainer button {
        width: 204px;
        height: 64px;
        border-radius: 100px;
        padding: 0;
        font-family: DM Sans;
        font-weight: 800;
        font-size: 24px;
        line-height: 100%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;

    }

    .infoContainer h3 {
        width: 290px;
        font-size: 25px;
    }

    .infoContainerP1 {
        width: 195px;
    }

    .prizeSection h3 {
        width: 320px;
        height: 76px;
        margin-bottom: 100px;
        color: white;
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        font-family: sans-serif;
        padding: 0;
        line-height: 1.4;
    }

    .boxLid {
        margin-bottom: -88px;
        width: 115px;
    }

    .inside {
        width: 108px;
        margin: 0 0 -26px 4px;

    }

    .boxBottom {
        width: 108px;
    }

    .lightInside {
        width: 174px;
        margin: -91px 0 -121px -29px;
    }

    .star {
        width: 45px;
        margin: 0 0px -120px 36px;
    }

    .light1 {
        width: 185px;
        margin: -160px 0 0 -36px;
    }

    .box,
    .prize {
        width: 127px;
    }

    .hidden {
        display: none;
    }

    .popUpSvg {
        width: 273px;
        height: 355px;
    }

    .popUpContainer button {
        width: 280px;
    }
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-3px);
    }

    50% {
        transform: translateX(3px);
    }

    75% {
        transform: translateX(-3px);
    }

    100% {
        transform: translateX(3px);
    }
}

@keyframes fadeIn {
    to {
        opacity: 0.8;
    }
}