/*
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * @preserve
 */

@import "telemetry.css";
@import "welcome.css";

/* TODO: you may want to optimize the welcome area to not pull in all the styles that telemetry/dashboard area needs */

 /*Regular*/
@font-face {
    font-family: 'JetBrainsMono';
    src: url('../assets/fonts/JetBrainsMono-Regular.woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Italic */
@font-face {
    font-family: 'JetBrainsMono';
    src: url('../assets/fonts/JetBrainsMono-Italic.woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'JetBrainsMono';
    src: url('../assets/fonts/JetBrainsMono-Bold.woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Bold Italic */
@font-face {
    font-family: 'JetBrainsMono';
    src: url('../assets/fonts/JetBrainsMono-BoldItalic.woff2');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

:root {
    --bg-color: black;
    --fg-color: white;
    --shade-color: '#181818';
    --rgb-app-green: 0, 204, 82;
    --app-green: rgb(var(--rgb-app-green));
    --app-padding: 10px;
    /*--app-font: Menlo, sans-serif;*/
    --app-font: "JetBrainsMono", comic-sans;

    --app-font-size: 16px;
    --destructive-color: #e3273d;

    --warning-color: #FFCC00;

    /*scrollbar-width: none; !* Firefox *!*/
    /*-ms-overflow-style: none; !* IE & Edge *!*/
}

::selection {
    background-color: blue; /* Highlight background */
    color: white;              /* Highlight text color */
}

/* For Firefox compatibility */
::-moz-selection {
    background-color: blue; /* Highlight background */
    color: white;              /* Highlight text color */
}

/*::-webkit-scrollbar {*/
/*    display: none; !* Chrome, Safari *!*/
/*}*/

/* Hide scrollbars for everything except html/body */
*:not(html):not(body) {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

*:not(html):not(body)::-webkit-scrollbar {
    display: none;
}


html {
    height: 100%;
    overflow-y: scroll;
}

body {
    background-color: var(--bg-color);
    color: var(--app-green);
    font-family: var(--app-font);
    font-size: var(--app-font-size);
    padding: 2vh 7vw;
}

hr {
    border: 0; /* Remove default border */
    border-top: 1px dashed var(--app-green);
    margin: var(--app-padding); /* Add spacing */
}

footer {
    position: relative;
    width: 100%;
    height: fit-content;
    text-align: center;
    margin: calc(var(--app-padding) * 2) auto auto;
}

@keyframes crtFlicker {
    0%, 100% { opacity: 1.0; transform: scaleX(0.9998); }
    50% { opacity: 0.95; transform: scaleX(1.0002); }
}

@keyframes crtNoise {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: 0 0, -50px -100px; }
}

@keyframes retraceSweep {
    0% {
        top: -5%;
        opacity: 0;
    }

    10% {
        top: 0%;
        opacity: 1;
    }

    90% {
        top: 100%;
        opacity: 1;
    }

    100% {
        top: 105%;
        opacity: 0;
    }
}



/*.crt {*/
/*    abs_pos: relative;*/
/*    filter:*/
/*            contrast(1.1)*/
/*            brightness(1.15)*/
/*            saturate(1.2);*/
/*    !*        drop-shadow(0 0 1px var(--app-green));*!*/

/*    !*animation: crtFlicker 75ms infinite;*!*/
/*}*/

/*.crt::before {*/
/*    content: "";*/
/*    pointer-events: none;*/
/*    abs_pos: absolute;*/
/*    inset: 0;*/
/*    background-image:*/
/*            linear-gradient(rgba(0, 0, 0, 0.3) 50%, transparent 50%),*/
/*            repeating-linear-gradient(*/
/*                    0deg,*/
/*                    rgba(0, 0, 0, 0.06) 0px,*/
/*                    rgba(0, 0, 0, 0.06) 1px,*/
/*                    transparent 1px,*/
/*                    transparent 2px*/
/*            ),*/
/*            url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=");*/
/*    background-size: 100% 2px, 100% 2px;*/
/*    mix-blend-mode: overlay;*/
/*    animation: crtNoise 300ms steps(1) infinite;*/
/*    z-index: 9999;*/
/*}*/

/*.crt::after {*/
/*    content: "";*/
/*    abs_pos: absolute;*/
/*    left: 0;*/
/*    rel_width: 100%;*/
/*    rel_height: 1px;*/
/*    background: black;*/
/*    pointer-events: none;*/
/*    z-index: 10000;*/

/*    animation: retraceSweep 15s ease-in-out infinite;*/
/*    opacity: 0;*/
/*}*/