body {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
}

.font-stix {
    font-family: "STIX Two Text", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.font-league {
    font-family: "LeagueSpartan", "Lato", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.font-lato {
    font-family: "Lato", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.font-manrope {
    font-family: "Manrope", sans-serif;
}

h1 {
    font-family: "STIX Two Text", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}


body, html {
    overflow-x: hidden !important;
}

.checker-bg {
    background: radial-gradient(rgb(236, 236, 236) 3px, transparent 4px),
    radial-gradient(#ececec 3px, transparent 4px),
    linear-gradient(#fff 4px, transparent 0),
    linear-gradient(45deg, transparent 74px, transparent 75px, #ecebeb 75px, #ececec 76px, transparent 77px, transparent 109px),
    linear-gradient(-45deg, transparent 75px, transparent 76px, #ececec 76px, #ececec 77px, transparent 78px, transparent 109px),
    #fff;
    background-size: 109px 109px, 109px 109px, 100% 6px, 109px 109px, 109px 109px;
    background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}

.checker-bg2 {
    background:
            radial-gradient(black 3px, transparent 4px),
            radial-gradient(black 3px, transparent 4px),
            linear-gradient(#fff 4px, transparent 0),
            linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px),
            linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px),
            #fff;
    background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
    background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}

.cubes-bg {
    background-color: #e5e5f7;
    opacity: 0.8;
    background-image:  linear-gradient(30deg, #e2e8f0 12%, transparent 12.5%, transparent 87%, #e2e8f0 87.5%, #e2e8f0), linear-gradient(150deg, #e2e8f0 12%, transparent 12.5%, transparent 87%, #e2e8f0 87.5%, #e2e8f0), linear-gradient(30deg, #e2e8f0 12%, transparent 12.5%, transparent 87%, #e2e8f0 87.5%, #e2e8f0), linear-gradient(150deg, #e2e8f0 12%, transparent 12.5%, transparent 87%, #e2e8f0 87.5%, #e2e8f0), linear-gradient(60deg, #e2e8f077 25%, transparent 25.5%, transparent 75%, #e2e8f077 75%, #e2e8f077), linear-gradient(60deg, #e2e8f077 25%, transparent 25.5%, transparent 75%, #e2e8f077 75%, #e2e8f077);
    background-size: 20px 35px;
    background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}

.cubes-bg2 {
    --s: 146px; /* control the size*/
    --c1: #f8fafc;
    --c2: #ffffff;
    --c3: #f1f5f9;

    background:
            repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%)
            calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),
            repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);
    background-size: var(--s) calc(var(--s)*tan(30deg));
}