/* Defining color styles that we can use across all files */
:root {
    --offwhite: #F8F4EE;
    --offwhiteshadow: #DCD3C5;
    --midtonebrown: #A9A093;
    --brown: #484038;
    --yellow: #E3A400;
    --pink: #CD8879;
    --blue: #7E9AB4;
}

/* Importing Fonts */

/* PP EDITORIAL NEW */
@font-face {
    font-family: PP Editorial New;
    src: url(../Fonts/PPEditorialNew-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: PP Editorial New;
    src: url(../Fonts/PPEditorialNew-Regular.ttf);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: PP Editorial New;
    src: url(../Fonts/PPEditorialNew-Thin.ttf);
    font-weight: normal;
}

/* SF PRO */
@font-face {
    font-family: SF Pro Display;
    src: url(../Fonts/SF-Pro-Display-Regular.otf);
    font-weight: normal;
}

@font-face {
    font-family: SF Pro Display;
    src: url(../Fonts/SF-Pro-Display-RegularItalic.otf);
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: SF Pro Display;
    src: url(../Fonts/SF-Pro-Display-Semibold.otf);
    font-weight: bold;
}


/* FONT STYLES */
/* Defining font styles that we can use across all files */
.title {
    font-family: PP Editorial New;
    font-size: 64px;
}

.title-thin{
    font-family: PP Editorial New;
    font-weight: lighter;
    font-size: 64px;
}

.card-title{
    font-family: PP Editorial New;
    font-size: 36px;
}

.subtitle{
    font-family: PP Editorial New;
    font-size: 24px;
}

/* Default text in any page (body) is already this size*/
.bodytext{
    font-family: SF Pro Display;
    font-size: 18px;
}

.caption{
    font-family: SF Pro Display;
    font-size: 14px;
    line-height: 0;
}


/* Default page style */
body {
    font-family: SF Pro Display;
    font-size: 18px;
    background-color: var(--offwhite);

    display: flex;
    flex-direction: column;
}


hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid var(--offwhiteshadow);
    padding: 0;
}