@import url('../../point/fonts/fonts.css');

:root {
    /* - Configurations - */
    --bg-color: #000000;
    --accent-color: #8f003a;
    --accent-color-light: #c41158;
    --accent-color-dark: #60072b;
    --icon-bg-light: #ffffff;
    --icon-bg: #8F003A;
    --icon-bg-dark: #290011;
    --round-feather: 5px;
    --round-light: 10px;
    --round-normal: 15px;
    --round-heavy: 25px;
    --round-almostball: 45px;

    /* - Card/Item Dimensions - */
    --card-width: 26vh;
    --card-height: 15vh;
    --newsItem-width: 50vh;
    --newsItem-height: 24vh;

    /* - Especific Elements - */
    --marker-bg: yellow;
    --marker-color: black;
    --bg-img: url('../images/pasa.webp');
    --bg-overlay: url('../images/pancode.webp');

    /* - Animations - */
    --transition-fast: all 0.2s ease;
    --transition-slow: all 0.4s ease-in-out;

    /* - Fonts - */
    --default-font: Inter;
    --sec-font: Comfortaa;
    --code-font: SourceCodePro;
    --impact-font: RubikMonoOne;
    --work-font: Rubik;
    --marker-font: LXGWMarkerGothic;
    --rounded-font: QuickSand;
    --exotic-font: Dosis;
    --classic-font: FleurDeLeah;
    --usual-font: Poppins;

    --font-def: Outfit;
    --font-size: 1rem;
    --font-size-small: 0.6rem;
    --font-size-medium: 0.8rem;
    --font-size-normal: 1rem;
    --font-size-big: 1.2rem;
    --font-size-massive: 1.4rem;
    --text-light-color: #ffffff;
    --text-light-color-sel: #c8c8c8;
    --text-light-color-unsel: #ed76a5;
    --text-dark-color: #000000;
    --text-dark-color-sel: #653649;
    --text-dark-color-unsel: #7e2c4d;
}

::selection{
    background-color: var(--marker-bg);
    color: var(--marker-color);
}

:active{
    outline: none;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#load{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color-dark);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999;
    background-image: url('../images/flower.svg');
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: var(--transition-slow);
    cursor: default;
}