/*------------------------------------------ Defining variables */

:root                                                                       { 
    
                                                                              --white-c             : #F7F7F7;
                                                                              --light-c             : #D9D9D9;
                                                                              --medium-light-c      : #B9B9B9;
                                                                              --medium-c            : #888888;
                                                                              --black-c             : #333333;
    
                                                                            }



/*------------------------------------------ Fonts */

.light
                                                            { font-variation-settings: 'wght' 300; }    
.regular,
body,
input,
textarea
                                                            { font-family: "Raleway", sans-serif; font-variation-settings: 'wght' 400; } /* Slant (1 - 10) Weight (400 - 700) */
.italic,
em
                                                            { font-family: "Raleway Italic", sans-serif; }
.medium
                                                            { font-variation-settings: 'wght' 500; }
.semibold,
.button-style
                                                            { font-variation-settings: 'wght' 600; }
.bold
                                                            { font-variation-settings: 'wght' 700; }




/*------------------------------------------ Colors */

.white-c
                                                            { color: var(--white-c); }
.light-c
                                                            { color: var(--light-c); }
.medium-light-c
                                                            { color: var(--medium-light-c); }
.medium-c
                                                            { color: var(--medium-c); }
.black-c,
body
                                                            { color: var(--black-c); }


.white-bg,
body
                                                            { background-color: var(--white-c); }
.white-glass-bg
                                                            { background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); }
.light-bg
                                                            { background-color: var(--light-c); }
.light-glass-bg
                                                            { background-color: rgba(162, 162, 162, 0.44); backdrop-filter: blur(20px); }
.medium-light-bg
                                                            { background-color: var(--medium-light-c); }
.medium-light-glass-bg
                                                            { background-color: rgba(93, 93, 93, 0.44); backdrop-filter: blur(20px); }
.medium-bg
                                                            { background-color: var(--medium-c); }
.medium-glass-bg
                                                            { background-color: rgba(54, 54, 54, 0.44); backdrop-filter: blur(20px); }
.black-bg
                                                            { background-color: var(--black-c); }
.black-tr-bg
                                                            { background-color: rgba(0, 0, 0, 0.81); }
.black-glass-bg
                                                            { background-color: rgba(0, 0, 0, 0.81); backdrop-filter: blur(20px); }


.white-f
                                                            { fill: var(--white-c); }
.light-f
                                                            { color: var(--light-c); }
.medium-light-f
                                                            { color: var(--medium-light-c); }
.medium-f
                                                            { color: var(--medium-c); }
.black-f,
body
                                                            { fill: var(--black-c); }


.white-bc
                                                            { border-color: var(--white-c); }
.light-bc
                                                            { border-color: var(--light-c); }
.medium-light-bc
                                                            { border-color: var(--medium-light-c); }
.medium-bc
                                                            { border-color: var(--medium-c); }
.black-bc,
body
                                                            { border-color: var(--black-c); }

@media(hover: hover) { /* -------------------------------------------- */
.white-glass-bg
                                                            { background-color: rgba(255, 255, 255, 0.20); backdrop-filter: blur(10px); }
}