/* ------------------------------------------------------------------------------- Variables*/
:root {
    /* Colors */
    --gold: rgb(187, 141, 67);
    --error: rgb(221, 0, 0);
    --accent: rgb(41, 171, 241);
    --accent-dark: rgb(34, 145, 204);
    --wb-5: rgb(242, 242, 242);
    --wb-10: rgb(230, 230, 230);
    --wb-15: rgb(217, 217, 217);
    --wb-20: rgb(204, 204, 204);
    --wb-30: rgb(179, 179, 179);
    --wb-40: rgb(153, 153, 153);
    --wb-50: rgb(128, 128, 128);
    --wb-60: rgb(102, 102, 102);
    --wb-70: rgb(77, 77, 77);
    --wb-75: rgb(64, 64, 64);
    --wb-80: rgb(51, 51, 51);
    --wb-90: rgb(26, 26, 26);

    --wb-5-blue: rgb(232, 232, 242);
    --wb-10-blue: rgb(220, 220, 230);
    --wb-15-blue: rgb(207, 207, 217);
    --wb-20-blue: rgb(194, 194, 204);
    --wb-30-blue: rgb(169, 169, 179);
    --wb-40-blue: rgb(143, 143, 153);
    --wb-50-blue: rgb(118, 118, 128);
    --wb-60-blue: rgb(92, 92, 102);
    --wb-70-blue: rgb(67, 67, 77);
    --wb-75-blue: rgb(74, 74, 64);
    --wb-80-blue: rgb(41, 41, 51);
    --wb-90-blue: rgb(16, 16, 26);

    /* Spacing */
    --gap-little: 5px;
    --gap-small: 10px;
    --gap-medium: 20px;
    --gap-big: 30px;
    --gap-bigger: 40px;
    --gap-colosal: 50px;
    --topBar-height: 70px;
    --ui-message-animation-duration: 3s;

    /* Font */
    --main-font: 'Poppins';
    --font-weight-thin: 100;
    --font-weight-extra-light: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800;
    --font-weight-black: 900;
    --font-size-head: 24px;
    --font-size-sub: 16px;
    --font-size-phar: 12px;
}

/* Poppins */
@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-Thin.ttf') format('opentype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-ExtraLight.ttf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-Light.ttf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-Regular.ttf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-Medium.ttf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-SemiBold.ttf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-Bold.ttf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-ExtraBold.ttf') format('opentype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../../fonts/Poppins-Black.ttf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

/* Bahnschrift */
@font-face {
    font-family: 'Bahnschrift';
    src: url('../../fonts/bahnschrift.ttf') format('opentype');
    font-style: normal;
}

/* Avenir */
@font-face {
    font-family: 'Avenir';
    src: url('../../fonts/AvenirLTStd-Light.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Avenir';
    src: url('../../fonts/AvenirLTStd-Black.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}