@font-face {
    font-family: 'Century';
    src: url('../fonts/century/CenturyOldStyleStd-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Century';
    src: url('../fonts/century/CenturyOldStyleStd-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Century';
    src: url('../fonts/century/CenturyOldStyleStd-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-RegularItalic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist';
    src: url('../fonts/geist/Geist-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --main-background-color : #FFECD0;
    --second-background-color: #2C0E08;
    --third-background-color : #D69A94;
    --button-background-color: #2C0E08;
    --main-text-color : #2C0E08;
    --second-text-color: #FFECD0;
    --quote-color : #8E6B41;
    --title-font-family: 'Century', sans-serif;
    --main-font-family: 'Geist', sans-serif;
    --light-color: #FFECD0;
    --dark-color: #2C0E08;
    --pink-color: #D69A94;
}

.main-colors {
    background-color: var(--main-background-color);
    color: var(--main-text-color);
}

.second-colors {
    background-color: var(--second-background-color);
    color: var(--second-text-color);
}

.third-colors {
    background-color: var(--third-background-color);
    color: var(--main-text-color);
}

.inout-light-color {
    color: var(--light-color);
}

.inout-dark-color {
    color: var(--dark-color);
}

.inout-start {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    text-indent: 0;
}

.inout-end {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: end;
    text-indent: 0;
}

.inout-text-start {
    width: 100%;
    text-align: start;
}

.inout-text-end {
    width: 100%;
    text-align: end;
}