@charset 'UTF-8';

// $small-medium: 768px!default;
// $medium-large: 1200px!default;
// $only-small: "only screen and (max-width: #{$small-medium})";
// $not-small: "only screen and (min-width: #{$small-medium})";
// $only-medium: "only screen and (min-width: #{$small-medium}) and (max-width: #{$medium-large})";
// $only-large: "only screen and (min-width: #{$medium-large})";
// $not-large: "only screen and (max-width: #{$medium-large})";

:root {

    // colors
    --red: #be0000;
    --blue: #5aace2;
    --green: #178344;
    --yellow: #f3cf3e;
    --orange: #dd9b60;
    --purple: #30106d;
    --pink: pink;
    --black: #000; 
    --white: #fff;
    --grey: #ddd;

    --primary: var(--purple);
    --secondary: var(--yellow);
    --light: var(--white);
    --dark: var(--black);
    --info: var(--blue);
    --danger: var(--red);
    --succes: var(--green);
    --warning: var(--orange);
    
    --color: var(--dark);
    --caret-color: var(--dark);
    --hover-color: var(--red);

    //background
    --background-attachment: scroll; 
    --background-blend-mode: normal; 
    --background-clip: border-box; 
    --background-color: var(--light);
    --background-image: none;
    --background-origin: padding-box; 
    --background-position: 0% 0%; 
    --background-repeat: repeat; 
    --background-size: auto; 

    // screen
    --sm: 0;
    --md: 768px;
    --lg: 1200px;

    // font-size
    --txt-size-7: 0.9rem;
    --txt-size-6: 1.1rem;
    --txt-size-5: 1.3rem;
    --txt-size-4: 1.5rem;
    --txt-size-3: 1.7rem;
    --txt-size-2: 2rem;
    --txt-size-1: 2.3rem;

    // font
    --font-style: normal;
    --font-variant: normal;
    --font-weight: normal;
    --font-size: var(--txt-size-5);
    --font-family: Verdana, Tahoma, "Times New Roman", sans-serif, serif;
    --font: var(--font-style) var(--font-variant) var(--font-weight) var(--font-size) var(--font-family);
    --font-size-adjust: 100%;

    --font-kerning: auto; 
    --font-optical-sizing: auto; 
    --font-stretch: 100%; 
    --font-variant-ligatures: normal; 
    --font-variant-caps: normal; 
    --font-variant-numeric: normal; 
    --font-variant-east-asian: normal; 
    --line-height: 1.6;

    // text-decoration
    --text-decoration-line: none;
    --text-decoration-style: solid;
    --text-decoration-color: var(--color);
    
    // margin
    --margin-top: 0;
    --margin-right: 0;
    --margin-bottom: 0;
    --margin-left: 0;
    --margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);

    // padding
    --padding-top: 0;
    --padding-right: 0;
    --padding-bottom: 0;
    --padding-left: 0;
    --padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);

    // border 
    --border-width: 0px;
    --border-style: solid;
    --border-color: var(--dark);
    --border-radius: 0rem;

    --border-top-color: var(--dark); 
    --border-top-left-radius: 0px; 
    --border-top-right-radius: 0px; 
    --border-top-style: none; 
    --border-top-width: 0px;
    --border-bottom-color: rgb(0, 0, 0); 
    --border-bottom-left-radius: 0px; 
    --border-bottom-right-radius: 0px; 
    --border-bottom-style: none; 
    --border-bottom-width: 0px; 
    --border-left-color: rgb(0, 0, 0); 
    --border-left-style: none; 
    --border-left-width: 0px; 
    --border-right-color: rgb(0, 0, 0); 
    --border-right-style: none; 
    --border-right-width: 0px; 

    --border-image-outset: 0px; 
    --border-image-repeat: stretch; 
    --border-image-slice: 100%; 
    --border-image-source: none; 
    --border-image-width: 1; 
    --border-collapse: separate; 
    --border-spacing: 0;

    // list
    --list-style-type: none;
    --list-style-position: outside;
    --list-style-image: none;

    // display
    --display: inline-block;

    // flex
    --flex-grow: 0;
    --flex-shrink: 1;
    --flex-basis: auto;

    --flex-direction: row;
    --flex-wrap: nowrap;

    --justify-content: center;
    --align-content: stretch;
    --align-items: stretch;

    // grid
    --grid-column-gap: 1rem;
    --grid-row-gap: 1rem;

    --grid-row-start: auto;
    --grid-row-end: auto;

    --grid-column-start: auto;
    --grid-column-end: auto;

    --grid-auto-rows: 1fr;
    --grid-auto-columns: 1fr;
    --grid-auto-flow: row;

    --grid-item-min-width: 200px;
    --grid-item-max-width: 1fr;
    --grid-item-min-height: 100px;
    --grid-item-max-height: 2fr;

    // transition
    --transition-property: all;
    --transition-duration: 0s;
    --transition-timing-function: erase;
    --transition-delay: 0s;

    // animation
    --animation-delay: 0s; 
    --animation-direction: normal; 
    --animation-duration: 0s; 
    --animation-fill-mode: none; 
    --animation-iteration-count: 1; 
    --animation-name: none; 
    --animation-play-state: running; 
    --animation-timing-function: ease; 

    // column
    --column-rule-width: medium;
    --column-rule-style: none;
    --column-rule-color: var(--dark);
    --column-gap: normal; 
    --column-span: none; 
    --column-width: auto;
    --column-count: auto;

    // outline
    --outline-width: medium;
    --outline-style: invert;
    --outline-color: var(--dark);

    // body
    --body-max-width: 1200px;
    --body-min-width: 320px;

    // hr
    --hr-height: 1px;

    // other
    --hyphens: auto;
    --letter-spacing: normal;
    --word-spacing: normal;
    --white-space: normal;

    --box-shadow: 0 5px 5px rgba(50, 50, 50, 0.4); 
    --overflow: auto; 
}