@import url(flex.css);

:root {
    /* --primary: #007CBA;
    --primary-foreground: #007CBA;
    --secondary: #BBDE90;
    --secondary-foreground: #BBDE90;
    --border: #007CBA; */

    --header-h: calc(100 * var(--rpx));

    --base: 14;

    --rpx-75: clamp(0.75px, calc(0.026vw + 0.500px), 1px);
    --rpx-67: clamp(0.667px, calc(0.035vw + 0.333px), 1px);
    --rpx-50: 0.052vw;
    --rpx: var(--rpx-75);
    --max-content-width: clamp(900px, 75vw, 1440px);
    --max-wrap-width: clamp(900px, 68.75vw, 1320px);
    --max-info-width: clamp(900px, calc(46.875vw + 60px), 960px);

    --font-size-88: clamp(calc(56 * var(--rpx)), 4.583333vw, calc(88 * var(--rpx)));
    --font-size-78: clamp(calc(42 * var(--rpx)), 4.0625vw, calc(78 * var(--rpx)));
    --font-size-72: clamp(calc(42 * var(--rpx)), 3.75vw, calc(72 * var(--rpx)));
    --font-size-68: clamp(calc(40 * var(--rpx)), 3.5416vw, calc(68 * var(--rpx)));
    --font-size-48: clamp(calc(28 * var(--rpx)), 2.5vw, calc(48 * var(--rpx)));
    --font-size-42: clamp(calc(24 * var(--rpx)), 2.1875vw, calc(42 * var(--rpx)));
    --font-size-38: clamp(calc(26 * var(--rpx)), 1.97916vw, calc(38 * var(--rpx)));
    --font-size-30: clamp(calc(24 * var(--rpx)), 1.5625vw, calc(30 * var(--rpx)));
    --font-size-28: calc(28 * var(--rpx));
    --font-size-24: clamp(15px, 1.25vw, calc(24 * var(--rpx)));
    --font-size-20: calc(20 * var(--rpx));
    --font-size-18: clamp(14px, 0.9375vw, calc(18 * var(--rpx)));
    --font-size-16: clamp(14px, 0.833333vw, calc(16rem / var(--base)));
    --font-size-14: clamp(14px, 0.7291666vw, calc(14rem / var(--base)));
    --font-size-12: clamp(12px, 0.625vw, calc(12rem / var(--base)));
    --font-size-10: clamp(10px, 0.520833vw, calc(10rem / var(--base)));
}

html,
body {
    font-family: Poppins;
    touch-action: manipulation;
}

.max-content-width {
    max-width: var(--max-content-width);
    width: 100%;
    margin: 0 auto;
    height: 100%;
}

.max-wrap-width {
    max-width: var(--max-wrap-width);
    width: 100%;
    margin: 0 auto;
}

.max-info-width {
    max-width: var(--max-info-width);
    width: 100%;
    margin: 0 auto;
}

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

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

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

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

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

    .max-content-width,
    .max-wrap-width,
    .max-info-width {
        padding: 0 20px;
    }
}

@media screen and (max-width: 750px) {
    :root {
        --rpx-75: calc(1.5vw / 7.5);
        --rpx-67: calc(1.33vw / 7.5);
        --rpx-50: calc(1vw / 7.5);
        --rpx: var(--rpx-67);
    }
}