@media screen and (min-width: 320px) { html { font-size: 21.33333333px; } } @media screen and (min-width: 360px) { html { font-size: 24px; } } @media screen and (min-width: 375px) { html { font-size: 25px; } } @media screen and (min-width: 384px) { html { font-size: 25.6px; } } @media screen and (min-width: 400px) { html { font-size: 26.66666667px; } } @media screen and (min-width: 414px) { html { font-size: 27.6px; } } @media screen and (min-width: 424px) { html { font-size: 28.26666667px; } } @media screen and (min-width: 540px) { html { font-size: 36px; } } @media screen and (min-width: 720px) { html { font-size: 48px; } } @media screen and (min-width: 750px) { html { font-size: 50px; } } body { margin: 0; padding: 0; background-color: #12141B; color: #E5E7EF; } .content { display: flex; height: 100vh; flex-direction: column; align-items: center; } .content .title { text-align: center; font-size: 0.6rem; margin-top: 2.72rem; } .content .banner { width: 100%; max-width: 15rem; margin-top: 1.4rem; } .content .banner img { width: 80%; height: 100%; max-width: 15rem; margin: 20px 10%; } .content .btns { flex: 1; display: flex; align-items: center; flex-direction: column; width: 100%; background-color: #141722; } .content .btns .btn { display: flex; align-items: center; justify-content: center; width: 9.56rem; height: 1.84rem; border-radius: 0.92rem; background-image: linear-gradient(to right, #FF7C39, #FF9C40); box-shadow: 0 0 8px #ff7b398a; } .content .btns .btn .icon { height: 1.08rem; } .content .btns .btn .txt { display: block; width: 3rem; font-size: 0.6rem; margin-left: 0.52rem; } .content .btns .ios { margin-top: 0.3rem; margin-bottom: 0.64rem; }