@import "fonts.css";

:root{
    --color_00: #FFFFFF;
    --color_01: #2b2d30;
    --color_02: #1e1f22;
    --color_03: #FF0000;
    --navWitdh: 250px;
    --appCubeSize:35px;

    --premColor: #20c9da;

    --icon_hoverColor: #076979;

    --button_bgColor: rgb(64, 64, 64);
    --input_bgColor: rgb(84, 84, 84);
    --button_bgColor_hover: rgba(37,37,37,1);
    --button_textColor: rgb(255, 255, 255);
    --button_borderColor: rgba(255, 255, 255, 0.5);
    --global_Font: Arial, serif;
    --global_FontColor: #FFFFFF;
    --appIconSize:80px;
    --appIconSpace:35px;
    --appFontColor:#FFFFFF;
    --appFontBorderColor: transparent;
    --appFontBackgroundColor:transparent;
    --headerHeight: 50px;
    --background_Content: rgba(0, 0, 0, 0.3);
    --background_Dialog: #23272e;
    --width_Dialog: 800px;
}

body{
    min-height: 100svh;
}

.logo{
    aspect-ratio: 1/1;
    width: 500px;
    background-image: url("../system/logo.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: drop-shadow(0 0 0.75rem #14c0dc);
    --webkit-filter: drop-shadow(0 0 0.75rem #14c0dc);
}

.loader {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    z-index: 100000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader:before{
    content: '';
    width: 20%;
    background-image: url("../system/loader.svg");
    aspect-ratio: 1/1;
    background-position: center;
    background-repeat: no-repeat;
    animation: loaderRotation 2s infinite linear;
}

@keyframes loaderRotation {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(359deg);
    }
}