img,
video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#genshin {
    position: fixed;
    z-index: 100;
}

button,
input {
    border: 0;
}

* {
    font-family: "genshin";
}

@keyframes scalesIn {
    from {
        scale: 1.1;
    }

    to {
        scale: 1.2;
    }
}

@keyframes scalesOut {
    from {
        scale: 1.2;
    }

    to {
        scale: 1.1;
    }
}

a {
    text-decoration: none;
    color: unset;
}

@font-face {
    font-family: 'genshin';
    src: url(../font/ZH-CN_0.TTF);
}

/*welcome*/
.welcome {
    z-index: 10;
    position: fixed;
    inset: 0;
}

.welcome-logo {
    position: relative;
    display: inline-block;
    top: 100px;
    width: 7vw;
    height: calc(7vw + 20px);
    margin: 5vh 4vw;
}

#welcome-img,
.welcome-img {
    position: absolute;
    height: 7vw;
    width: 100%;
    border-radius: 10px;
}

#welcome-txt,
.welcome-txt {
    position: absolute;
    top: 7vw;
    left: -2vw;
    width: 11vw;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
    margin: 0px;
    margin-top: 5px;
    text-align: center;
    font-family: "Microsoft JhengHei UI";
}

#welcome-video {
    position: absolute;
    display: none;
    width: 100vw;
    left: 0px;
}

.welcome input {
    position: absolute;
    top: 50px;
    height: 50px;
    width: 80vw;
    left: 10vw;
    border-radius: 25px;
    margin: auto;
    padding-left: 50px;
    font-size: 25px;
    font-family: "Microsoft JhengHei UI";
}

#welcome-search img {
    position: absolute;
    top: 50px;
    width: 50px;
    height: 50px;
    left: 10vw;
    border-radius: 10px;
}

.welcome-background {
    position: absolute;
    left: 0;
}

.bckgrd-btn {
    position: absolute;
    right: 0px;
    bottom: 0px;
    opacity: 0.1;
}

.bckgrd-btn:hover {
    opacity: 0.3;
}

/*pool*/
.pool-area {
    position: fixed;
    top: 15vh;
    left: 50px;
    height: 80vh;
    width: 150px;
}

.pool-band {
    position: fixed;
    height: 100vh;
    width: 50px;
    top: 0vh;
    left: calc(6vw + 25px);
    border-left: 5px solid;
    border-right: 5px solid;
}

.pool {
    position: relative;
    display: block;
    margin-bottom: 20px;
    width: 12vw;
    aspect-ratio: 2;
    padding: 0;
}

.pool img {
    position: absolute;
    width: 150%;
    left: -25%;
    top: 0%;
}

/*description*/
.activity-area {
    position: fixed;
    left: 20vw;
    top: 10vh;
    aspect-ratio: 1.8;
    right: 50px;
    max-height: 80vh;
}

.activity-area button {
    width: 100%;
    height: 100%;
}

.activity-area button img {
    left: 0%;
    top: -32%;
    height: 160%;
    z-index: 1;
}

.activity-title {
    position: fixed;
    top: 9vh;
    height: 30px;
    border-radius: 15px 0px 30px 15px;
    padding: 0px 15px;
    z-index: 2;
    line-height: 30px;
    left: calc(20vw - 10px);
}

.activity-area h1,
.activity-area h2,
.counttime,
.activity-area h3,
.activity-area p {
    position: absolute;
    left: 5%;
    z-index: 3;
    font-weight: 900;
}

.activity-area h1,
.activity-area h2,
.counttime,
.activity-area p {
    text-shadow: 1px 1px 0px rgb(224, 224, 224), -1px -1px 0px rgb(224, 224, 224), -1px 1px 0px rgb(224, 224, 224), 1px -1px 0px rgb(224, 224, 224);
}

.activity-area h1 {
    top: 10%;
    font-size: 50px;
}

.activity-area h2 {
    top: calc(15% + 70px);
}

.activity-area h3 {
    top: calc(15% + 112.5px);
}

.activity-area p {
    top: calc(15% + 150px);
}

.counttime {
    bottom: 50px;
    font-size: larger;
}

/*gacha*/
.gacha-area {
    position: fixed;
    top: 85.5vh;
    right: 50px;
    bottom: 7vh;
    width: auto;
}

.gacha {
    display: inline-block;
    margin-left: 70px;
    height: 100%;
    border-radius: 3.75vh;
    width: 200px;
    max-width: 34vw;
    text-align: center;
    line-height: 7.5vh;
}

.gacha img {
    width: 110%;
}

/*stone*/
.stone {
    position: fixed;
    top: 0px;
    right: 0px;
    height: 5vh;
    opacity: 0.7;
}

.source {
    margin-top: 5px;
    margin-right: 5px;
    height: 100%;
    border-radius: 3.5vh;
    width: 150px;
    text-align: center;
    line-height: 5vh;
}

.add-source {
    position: absolute;
    right: 1vh;
    top: 1vh;
    height: 4.8vh;
    aspect-ratio: 1;
    border-radius: 2.4vh;
    line-height: 3vh;
    font-size: 3vh;
}

.stone-icon {
    position: fixed;
    width: 3vh;
    height: 3vh;
    top: calc(5px + 1vh);
    right: calc(150px - 3vh);
}

/*transition*/
#transition {
    display: none;
}

.trans-ani {
    position: fixed;
    inset: 0px;
    object-fit: cover;
}

#skip {
    position: fixed;
    top: 0;
    right: 0;
    margin: 50px;
    height: 50px;
    width: 150px;
    opacity: 0.5;
}

/*result*/
.result {
    position: fixed;
    inset: 0px;
    display: none;
}

.card {
    position: relative;
    display: inline-block;
    top: 10vh;
    height: 80vh;
    left: 10vw;
    width: 8vw;
    opacity: 0;
    object-fit: fill;
    z-index: 5;
}

#one-card-video {
    position: absolute;
    top: 0px;
    margin: auto;
    text-align: center;
    height: 100%;
    opacity: 0;
    z-index: 0;
}

.result h1 {
    position: absolute;
    width: 100vw;
    text-align: center;
    line-height: 100vh;
    z-index: 5;
    opacity: 0;
}

.card:hover,
.welcome-logo:hover,
.gacha img:hover {
    animation: 0.2s scalesIn forwards;
}

.gacha img {
    animation: 0.5s scalesOut forwards;
}

.card,
.welcome-logo {
    animation: 0.2s scalesOut forwards;
}

/*color*/
body {
    background-color: black;
    color: white;
}

.result,
.source {
    background-color: #111111
}

.pool-band {
    background-color: #111111aa;
}

.pool-band {
    border-color: #f5deb3aa;
}

.activity-title {
    background-color: #478fca;
}

.source {
    color: aliceblue;
}

.stone-icon,
.card {
    background-color: #11111100;
}

.activity-area h3 {
    background-color: #478fcacc;
}