:root {
    --blue-gray-color: #1E252C;
    --gray-color: #3F454E;
    --light-yellow-color: #F7EEE5;
    --brown-color: #8B6F4E;
    --amber-color: #D9A066;
}

ิbody {
    font-family: 'Quicksand', 'Noto Sans Thai', serif;
    color: var(--gray-color);
}

h1, div, p, li {
    font-family: 'Cormorant Garamond', 'Noto Sans Thai', 'sans serif';
}

.bg-blue-gray {
    background-color: var(--blue-gray-color);
}
.bg-light-yellow {
    background-color: var(--light-yellow-color);
}

.text-light-yellow {
    color: var(--light-yellow-color);
}
.text-brown {
    color: var(--brown-color);
}
.text-amber {
    color: var(--amber-color);
}

.px-4s {
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}

.nav-link {
    font-size: 1.25rem;
    color: var(--amber-color);
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}
.nav-link:hover {
    color: var(--light-yellow-color);
}
.nav-link:focus {
    color: var(--light-yellow-color);
}

.btn-outline-main {
    color: var(--light-yellow-color);
    border-color: var(--amber-color);
}
.btn-outline-main:hover {
    border-color: var(--amber-color);
    background-color: var(--amber-color);
}

.btn-main {
    color: var(--light-yellow-color);
    border-color: var(--amber-color);
    background-color: var(--amber-color);
}
.btn-main:hover {
    border-color: var(--amber-color);
    background-color: var(--amber-color);
}

.icon-circle {
    display: flex;
    align-items: center;
    margin: 0 auto;
    color: var(--amber-color);
    border: 1px solid var(--amber-color); 
    width: 100px; 
    height: 100px; 
    border-radius: 50px;
}

.blog-post {
    font-size: 1.25rem;
}
h1, h2, h3 {
    color: var(--amber-color);
}