@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: "primaryThemeFont";
    font-style: normal;
    src: local("Hemi Head 426"),
        url(./Assets/fonts/hemihead.ttf) format("truetype");
}

@font-face {
    font-family: "headingThemeFont";
    font-style: normal;
    src: local("Neoneon"),
        url(./Assets/fonts/neon_tube_wide.ttf) format("truetype");
}

.themeFont {
    font-family: "primaryThemeFont", sans-serif;
    font-weight: 500;
    line-height: 1.2;
}

.themeFontSecondary {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    font-weight: 600;
    line-height: 1.5;
}

.headingFont {
    font-family: "headingThemeFont", sans-serif;
    font-weight: 500;
    line-height: 1.2;
}

.fill {
    fill: #9614c8;
    stroke: none;
}
.stroke {
    fill: none;
    stroke: #9614c8;
}

.neonTubeColor {
    color: #ffffff;
    text-shadow:
        0 0 1.5rem #ff00ff,
        0 0 0.5rem #ff00ff,
        -1px -1px 0 #ff00ff,
        1px -1px 0 #ff00ff,
        -1px 1px 0 #ff00ff,
        1px 1px 0 #ff00ff;
    user-select: none;
}

.neonTextColor {
    color: #ffffff;
    text-shadow:
        0 0 0.75rem #ff00ff,
        0 0 0.25rem #ff00ff7f,
        -1px -1px 0 #ff00ff7f,
        1px -1px 0 #ff00ff7f,
        -1px 1px 0 #ff00ff7f,
        1px 1px 0 #ff00ff7f;
    user-select: none;
}

.magicTextColor {
    color: #afafff;
    text-shadow: 0 0 7px #9b32ff, 0 0 10px #9b32ff,
        0 0 21px #9614c8bf;
    user-select: none;
}

.svgIconFill {
    fill: #9b9bff;
    stroke: none;
}

.svgIconGlow {
    filter: drop-shadow(0px 0px 30px #9614c8bf);
}

.hourGlassGlow {
    fill: #9614c8;
}

.hourGlassFill {
    fill: #7d7dff;
}

.hourGlass {
    fill: #9b9bff;
}

.magicTextColorGreen {
    color: #32fa32;
    text-shadow: 0 0 7px #32e632, 0 0 10px #64c832,
        0 0 21px #5a9614bf, 0 0 42px #5a961480;
    user-select: none;
}

.magicTextColorRed {
    color: #fa3232;
    text-shadow: 0 0 7px #e63232, 0 0 10px #c83232,
        0 0 21px #961414bf, 0 0 42px #96141480;
    user-select: none;
}
