@import url("v-core-header.css");

@import url("v-core-main.css");

@import url("v-core-footer.css");

@import url("v-core-toast.css");

@import url("v-core-dialog.css");

@import url("v-core-article.css");

@import url("v-core-form.css");

@import url("v-core-list.css");

@import url("v-core-anchor.css");

:root {

    --color-green : #29741D;
    --color-blue : #05347E;
    --color-yellow : chocolate;
    --color-red : #AA1313;

    --color-background-error : var(--color-red);
    --color-background-warning : var(--color-yellow);
    --color-background-info : var(--color-blue);
    --color-background-success : var(--color-green);

    --color_bg_1: #f5f5f5;
    --color_bg_2: #f5f5f5;
    --color_bg_3: #d1d3d0;
    --color_bg_4: #4c4947;
    --color_bg_5: #49908C;

    --color_text_1: #4c4947;
    --color_text_2: #499087;
    --color_text_3: #f5f5f5;
    --color_text_4: #d1d3d0;

    --color_link_1: #00f;
    --color_link_2: #f00;
    --color_link_3: #f5f5f5;
    --color_link_4: #f5f5f5;
    --color_link_5: #e4e4e4;

    --color_button_1: #868686;
    --color_button_2: #4c4947;
    --color_button_3: #4c4947;

    --color-anchor-generic-font-1: #4c4947;
    --color-anchor-generic-font-2: #4c4947;

    --color-button-generic-background-1 : var(--color_bg_5);
    --color-button-generic-background-2 : var(--color_bg_4);
    --color-button-generic-border-1 : transparent;
    --color-button-generic-border-2 : var(--color-button-generic-border-1);
    --color-button-generic-font-1 : #f5f5f5;
    --color-button-generic-font-2 : #499058;
    --color-button-generic-font-3 : #ccc;

    --font-button-generic : sans-serif;

    --font_main_1: "Nunito Sans", Verdana, sans-serif;
    --font_main_2: "Josefin Sans", Verdana, sans-serif;
    --font_main_3: "Calibri", Verdana, sans-serif;
    --font_main_4: "Open Sans", helvetica, arial, sans-serif;
    --font_main_5: "Calibri", Verdana, sans-serif;
    --font_main_6: "Calibri", Verdana, sans-serif;

    --font-main-1: "Open Sans", helvetica, arial, sans-serif;

    --font-button-1 : sans-serif;

    --filter_1 : invert(40%) sepia(79%) saturate(397%) hue-rotate(170deg) brightness(88%) contrast(90%);
    --filter_1 : invert(40%) sepia(79%) saturate(397%) hue-rotate(170deg) brightness(88%) contrast(90%);
    --filter_1 : invert(25%) sepia(47%) saturate(2725%) hue-rotate(185deg) brightness(78%) contrast(98%);

    --filter_2 : invert(70) brightness(1.35);

}

* {

    outline: none;

}

html {

    margin: 0;
    padding: 0;

    user-select: none;

}

body {

    margin: 0 auto;
    padding: 0;

    width: clamp(400px, 100%, 1000px);

    height: 100%;

    font-family: var(--font-main-1);
    font-size: 12px;

    background-color: white;

    overflow-y: scroll;

    position: relative;

}

div {

    margin: 0 auto;
    padding: 0;

}

article {

    margin: 0 auto;
    padding: 0;

}

section {

    margin: 0 auto;
    padding: 0;

}

p {

    margin: 0 auto;
    padding: 0;

}

pre {

    margin: 0 auto;
    padding: 0;

}

form {

    margin: 0 auto;
    padding: 0;

}

label {

    margin: 0 auto;
    padding: 5px;

    font-size: 1em;
    font-weight: bold;

}

input {

    margin: 0 auto;
    padding: 10px;

    width: clamp(250px, 90%, 450px);

    border-style : solid;
    border-color : #ccc;
    border-width : 1px;
    border-radius: 2px;

    font-family: var(--font_main_3);

    font-size: 1.8em;

    text-align: center;

    &[type="email"] {

        width: clamp(300px, 90%, 500px);

    }

    &[type="password"] {

        width: clamp(300px, 90%, 500px);

    }
}

select {

    margin: 0 auto;
    padding: 5px 10px;

    border-style : solid;
    border-color : #ccc;
    border-width : 2px;
    border-radius: 6px;

    font-family: var(--font_main_3);

}

button {

    --color-background : #008cff;
    --color-hover-background : #4979bd;

    margin: 0;
    padding: 5px 15px;

    min-width : 50px;

    border-style : solid;
    border-color : #999;
    border-width : 1px;
    border-radius: 2px;

    background-color : var(--color-background);

    font-family: var(--font_main_3);

    font-weight: bold;

    cursor: pointer;

    white-space: nowrap;

    transition-duration : 0.2s;
    transition-timing-function : ease;
    transition-property: box-shadow;

    &:hover {

        background-color : var(--color-hover-background);

        border-color : transparent;

    }

    &:active {

        background-color : var(--color-hover-background);

        border-color : #999;

    }

}

dialog {

    margin: auto;
    padding: 0;

    width: clamp(150px, 450px, 95vw);

    user-select: none;

    &::backdrop {

        background-color : #000;

        opacity : 80%;

    }

}