@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: "Lightsider Expanded";
    src: url(../fonts/lightsiderexpand.ttf) format("truetype"),url(../fonts/lightsiderexpand.svg#LightsiderExpanded) format("svg");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "Lightsider Laser egular";
    src: url(../fonts/lightsiderlas.eot?) format("eot"),url(../fonts/lightsiderlas.woff) format("woff"),url(../fonts/lightsiderlas.ttf) format("truetype"),url(../fonts/lightsiderlas.svg#LightsiderLaser) format("svg");
    font-weight: 400;
    font-style: normal
}

:root {
    --background: 228deg 23.81% 95.88%;
    --foreground: 210deg 10.81% 14.51%;
    --card: 0 0% 100%;
    --card-foreground: 210deg 10.81% 14.51%;
    --primary: 222.63deg 33.33% 22.35%;
    --primary-foreground: 0 0% 100%;
    --cta: 1.52deg 77.95% 49.8%;
    --cta-foreground: 0 0% 100%;
    --border: 0deg 0% 85%;
    --input: 0deg 0% 85%;
    --radius: 3px;
}

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --background: 225deg 5.41% 10.51%;
        --foreground: 210deg 10.81% 84.51%;
        --card: 0 0% 7.06%;
        --card-foreground: 210deg 10.81% 84.51%;
        --primary: 222.63deg 73.33% 68.35%;
        --primary-foreground: 0 0% 0%;
        --cta: 1.52deg 77.95% 49.8%;
        --cta-foreground: 0 0% 100%;
        --input: 0deg 1.92% 20.39%;
        --border: 0deg 1.92% 20.39%;
    }
}

body {
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.heading,
.btn {
    font-family: "Lightsider Expanded";
    font-weight: 700;
    text-transform: uppercase;
}


.btn {
    text-transform: uppercase;
    font-weight: 900;
    border-radius: var(--radius);
}
.btn:not(.aspect-square) {
    transform: skew(-20deg);
}
.btn:not(.aspect-square) > * {
    transform: skew(20deg);
}

.numpad .btn:not(.aspect-square) {
    transform: skew(0);
}
.numpad .btn:not(.aspect-square) > * {
    transform: skew(0);
}