:root {
    /* fonts */
    --font-gluten: 'Gluten', cursive;
    --font-sono: 'Sono', monospace;

    /* colors */
    --color-oxford: #011936;
    --color-sepia: #774e24;
    --color-seal: #6A381F;
    --color-champagne: #F5E2C8;
    --color-floralwhite: #FEFCFA;
    --color-claret: #6E0D25;
    --color-viridian: #57886c;

    /* deco colors */
    --color-pacific: #1099A8;
    --color-jungle: #08AF6F;
    --color-rose: #BE5776;
    --color-lilac: #8352C3; 
    --color-honey: #DBAE53;

}

/* global layout styling */
body {
    font-family: var(--font-sono);
    background-color: var(--color-floralwhite);
    position: relative;
    margin: 0;
}

main {
    margin-top: 6rem;
    color: var(--color-oxford);
}

/* typography styling */
h1, h2 {
    font-family: var(--font-gluten);
}

/* nav styles */
nav {
    margin: 0rem;
    border-color: var(--color-oxford);
}

.nav-title {
    font-family: var(--font-gluten);
    font-size: 2rem;
    color: var(--color-oxford);
}

.nav-pills .nav-link {
    color: var(--color-oxford);
}

.nav-pills .nav-link.active{
    background-color: var(--color-oxford);
    color: var(--color-champagne);
}

/* hero section */
.hero-section {
    color: var(--color-oxford);
    position: relative;
    height: 50vh;
}

.hero-text {
    padding: 0 4rem;
}

/* write section styling */
.write-section {
    position: relative;
}

label, .col-form-label {
    font-size: 18px;
}

#createForm {
    background-color: var(--color-champagne);
}

.list-group-item {
    color: var(--color-oxford);
} 

#postButton {
    background-color: var(--color-viridian);
    color: var(--color-floralwhite);
}

/* padPosts section */
.templatePost {
    background-color: var(--color-lilac);
    color: var(--color-champagne);
}

.editButton {
    color: var(--color-oxford);
}

/* decorative image styling */
.deco {
    position: absolute;
    width: 8rem;
    z-index: -1;
}

.deco-heart {
    top: 0%;
    left: 5%;
}

.deco-quad {
    bottom: 0%;
    right: 5%;
}

.deco-seed {
    top: 20%;
    left: 2%;
    transform: scaleY(-1);
}
.deco-grape {
    bottom: 10%;
    right: 20%;
    width: 10rem;
}