@font-face {
    font-family: "Azonix";
    src: url("../fonts/Azonix.otf") format("opentype");
}

* {
    box-sizing: border-box;
}

html {
    /*****************/
    /*   VARIABLES   */
    /*****************/
    /* Fonts */
    --title-font: "Azonix";
    --content-font: "Poppins";
    /* Colors */
    --black: #223440;
    --darkgrey: #314a59;
    --turquoise: #1f98a6;
    --green: #17a6a6;
    --white: #fcfcfd;
    --lightgrey: #f2f2f2;
    --grey: #d7d7d7;

    /* Interval inputs Colors */
    --range-slider:          var(--grey); /* slider main background color */
    --range-handle-inactive: var(--turquoise); /* inactive handle color */
    --range-handle:          var(--turquoise); /* non-focussed handle color */
    --range-handle-focus:    var(--darkgrey); /* focussed handle color */
    --range-handle-border:   var(--range-handle);
    --range-range-inactive:  var(--range-handle-inactive); /* inactive range bar background color */
    --range-range:           var(--range-handle); /* active range bar background color */
    --range-float-inactive:  var(--range-handle-inactive); /* inactive floating label background color */
    --range-float:           var(--range-handle-focus); /* floating label background color */
    --range-float-text:      white; /* text color on floating label */

    font-family: var(--content-font), sans-serif;
    font-size: 14px;

    padding: 0;
    margin: 0;
}

body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    background: var(--white);
}

@media (max-width: 640px) {
    body.open_nav {
        position: fixed;
    }
}

a {
    text-decoration: none;
    color: inherit;
}