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

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/Proxima-Nova-Thin-Italic.otf') format('opentype');
    font-weight: 100;
    font-style: italic;
}

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

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/Proxima-Nova-Regular-Italic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/Proxima-Nova-Semibold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/Proxima-Nova-Semibold-Italic.otf') format('opentype');
    font-weight: 600;
    font-style: italic;
}

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

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/Proxima-Nova-Bold-Italic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/Proxima-Nova-Extrabold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/Proxima-Nova-Extrabold-Italic.otf') format('opentype');
    font-weight: 800;
    font-style: italic;
}

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

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/Proxima-Nova-Black-Italic.otf') format('opentype');
    font-weight: 900;
    font-style: italic;
}

/* Fonts */

/* Text */
html {
    font-size: 16px;
}

/* Titles */

h1 {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.875rem;
    color: var(--wisp-dark-grey-700);
}

h2 {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.563rem;
    color: var(--wisp-dark-grey-700);
}

h3 {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.375rem;
    color: var(--wisp-dark-grey-700);
}

h4 {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.25rem;
    color: var(--wisp-dark-grey-700);
}

h5 {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.25rem;
    color: var(--wisp-dark-grey-700);
}

.p14-semibold {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.875rem;
    color: var(--wisp-dark-grey-700);
}

.p14-regular {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.875rem;
    color: var(--wisp-dark-grey-700);
}

.p14-thin {
    font-family: 'Proxima Nova';
    font-weight: 100;
    font-style: normal;
    font-size: 0.875rem;
    color: var(--wisp-dark-grey-700);
}

.p12-semibold {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.75rem;
    color: var(--wisp-dark-grey-700);
}

/* Paragraphs */

.p16-bold {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1rem;
    color: var(--wisp-dark-grey-700);
}

.p16-semibold {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1rem;
    color: var(--wisp-dark-grey-700);
}

.p16-regular-italic {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    color: var(--wisp-dark-grey-700);
}

.p16-regular {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    color: var(--wisp-dark-grey-700);
}

.p16-thin {
    font-family: 'Proxima Nova';
    font-weight: 100;
    font-style: normal;
    font-size: 1rem;
    color: var(--wisp-dark-grey-700);
}

.p12-regular {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.75rem;
    color: var(--wisp-dark-grey-700);
}

::placeholder {
    font-family: 'Proxima Nova', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    color: var(--wisp-dark-grey);
}

/* Text */

/* colurs */
:root {
    --wisp-blue: #2C66A0;
    --wisp-teal: #2C7DA0;
    --wisp-pink: #E1917E;
    --wisp-green: #819829;
    --wisp-yellow: #F3D042;
    --wisp-white: #F7F9FC;
    --wisp-black: #1B1B21;

    /* Dark grey */
    --wisp-dark-grey-800: #28282E;
    --wisp-dark-grey-700: #35353B;
    --wisp-dark-grey-600: #424248;
    --wisp-dark-grey-500: #4F4F55;
    --wisp-dark-grey-400: #5C5C61;
    --wisp-dark-grey-200: #76767B;
    --wisp-dark-grey: #838388;

    /* Grey */
    --wisp-dark-900: #8F9195;
    --wisp-dark-700: #A9ABAF;
    --wisp-dark-500: #C3C5C8;
    --wisp-dark-400: #D0D2D5;
    --wisp-dark-300: #DDDFE2;
    --wisp-dark-200: #EAECEF;

    /* Shades */

    /* Blue */
    --wisp-blue-400: #5685B3;
    --wisp-blue-200: #BCCEE1;
    --wisp-blue-100: #EAF0F6;

    /* Green */
    --wisp-green-400: #9FB15D;
    --wisp-green-100: #F2F5EA;

    /* Pink */
    --wisp-pink-100: #FCF4F2;

    /* Teal */
    --wisp-teal-200: #BCD6E1;

    /* Yellow */
    --wisp-yellow-600: #DBBB3B;
    --wisp-yellow-300: #F9E79F;
    --wisp-yellow-200: #FBF1C6;
    --wisp-yellow-100: #FDF8E2;

    /* Misc */
    --wisp-alert: #D51D1D;
    --wisp-slider-orange: #D5791D;
    --wisp-slider-red: #d51d1dCC;

    /* Transparents */
    --wisp-blue-70pr: #265A8CB3;
    --wisp-blue-50pr: #80A3C680;
    --wisp-green-50pr: #81982980;
    --wisp-green-25pr: #81982940;
    --wisp-pink-25pr: #E1917E40;
    --wisp-teal-50pr: #2C7DA080;
    --wisp-yellow-25pr: #F3D04240;
    --wisp-yellow-75pr: #F3D042BF;

    /* Gradients */
    --brand-gradient: linear-gradient(#2C66A0, #2C7DA0);
    --brand-gradient-reverse: linear-gradient(#2C7DA0, #2C66A0);

}

/* colurs */

/* Shadows */
/* Medium shadow */
/* box-shadow: 0px 4px 4px 0px rgba(27, 27, 33, 0.25); */
/* Shadows */


/* Delete borders in input elements */
input:focus {
    outline: none;
}


/* Components */

/* Navbar */
.nav-element {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav-elements {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    width: 100%;
    max-width: 500px;
    overflow: hidden;
}

nav {
    display: flex;
    padding: 5px 0px 10px 0px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: var(--wisp-white);
}

/* Navbar */

/* Components */

* {
    box-sizing: border-box;
}


@media screen and (min-width: 480px) {}

@media screen and (min-width: 769px) {}