@charset "utf-8";
/***
    The new CSS reset - version 1.8.5 (last updated 14.6.2023)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/

/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
    - The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
 */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
    cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
    list-style: none;
}

/* For images to not be able to exceed their container */
img {
    max-inline-size: 100%;
    max-block-size: 100%;
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
    -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
    white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
    -webkit-appearance: revert;
    appearance: revert;
}

/* preformatted text - use only for this feature */
:where(pre) {
    all: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
    color: unset;
}

/* remove default dot (•) sign */
::marker {
    content: initial;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
    display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
    -webkit-user-drag: element;
}

/* Revert Modal native behavior */
:where(dialog:modal) {
    all: revert;
}


#app {
    padding: 0;
    font-family: PingFangHK-Regular, sans-serif;
    font-family: PingFangHK-Ultralight, sans-serif;
    font-family: PingFangHK-Light, sans-serif;
    font-family: PingFangHK-Thin, sans-serif;
    font-family: PingFangHK-Medium, sans-serif;
    font-family: PingFangHK-Semibold, sans-serif;
    user-select: none;
    height: 100dvh;
}

.content {
    width: 100%;
    overflow: hidden;
    min-height: 100dvh;
    /* background: url(../assets/bg.png) round no-repeat; */
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 15px;
   background-color: #201E1F;
}
.top2-box{
    padding: 2vh 3vh;
}
.btn-box{
    width: 100%;
    padding: 0 2vh;
    justify-content: space-around;
}
.btn{
    width: 46%;
}
.ad0{
    width: 86%;
    margin-top: 3vh;
}
.ad1{
    width: 40%;
    margin-top: 3vh;
}
.line{
    margin-top: 3vh;
    width: 80%;
height: 2px;
flex-shrink: 0;
background: linear-gradient(90deg, rgba(175, 102, 80, 0.00) 0%, #AF6650 51.83%, rgba(175, 102, 80, 0.00) 100%);
}
.ball-box{
    width: 90%;
    margin-top: 3vh;
    display: flex;
    align-items: center;
    color: #fff;
    margin-bottom: 2vh;
    img{
        width: 2vh;
        margin-right: 1vh;
    }
}
.float-img{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
}
.ad3-img{
    width: 100%;
}
.ad4-img{
    width: 100%;
    margin-bottom: 10vh;
}
.line1-img{
    width: 90%;
    margin-top: 1.2vh;
}