:root {
	--primary: #c9a96a;
    --light-gold: #e3ca9a;
    --light-green: #bfc9b8;
	--black: #4e4e4e;
    --cream: #fffcfa;
    --heading-font: "Cormorant Garamond", serif;
    --body-font: "Karla", sans-serif;
}
html, body {
    overflow-x: hidden;
}
body {
	font-family: var(--body-font);
    color: var(--black);
    font-weight: 300;
    font-size: 1.125rem;
    background-color: var(--cream);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-weight: 600;
    color: var(--primary);
    font-family: var(--heading-font);
}
.h1, h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1;
}
.h2, h2 {
    font-size: 2rem;
}
@media (min-width: 1200px) {
    .h1, h1 {
        font-size: 3.25rem;
    }
    .h2, h2 {
        font-size: 2.75rem;
    }
}
.fa {
    color: var(--light-green);
}

/* Button */
.btn {
    --bs-border-radius: 50px;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: 0.6rem;
    --bs-btn-font-size: 1.125rem;
}
.btn-primary {
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
    background-image: linear-gradient( 30deg, var(--primary) 0%, var(--light-gold) 100%);
}
.btn-primary:hover {
    background-image: linear-gradient( 30deg, var(--primary) 0%, var(--primary) 100%);
}
.navbar-toggler:focus {
    box-shadow: none;
}

/* Table */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--black);
    --bs-border-color: #e6d3b3;
}
.table td+td {
    text-align: right;
}

/* Navbar */
header {
    background-image: linear-gradient( 30deg, #fdf6ec 0%, #eddbbc 100%);
    padding-bottom: 50px;
}
.wave-top {
    margin-top: -90px;
}

.top-bar {
    font-size: 0.9rem;
    border-bottom: 1px solid var(--primary);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.top-bar a {
    text-decoration: none;
    color: #191919;
}
.top-bar .fa,
.top-bar .fab,
footer .fa,
footer a .fab {
    color: var(--primary);
}

.navbar {
    --bs-navbar-nav-link-padding-x: 1rem;
}
.navbar-nav {
    --bs-nav-link-hover-color: var(--primary);
}
nav .logo {
    width: 180px;
    height: auto;
}
nav .navbar-nav {
    font-weight: 500;
}

/* Main */
main img,
main iframe {
    border-radius: 20px;
}

/* Footer */
footer {
  background-image: linear-gradient(130deg, rgb(255,253,249) 0%, rgb(241,227,204) 100%);
  padding-top: 100px;
}
footer a {
    color: var(--black);
    text-decoration: none;
}
footer a:hover {
    color: var(--primary);
}
footer .sub-footer {
    padding: 0.5rem;
    border-top: 1px solid var(--primary);
    margin-bottom: 0;
    font-size: 0.9rem;
}
footer .sub-footer a {
    color: var(--black);
}
footer .sub-footer a:hover {
    color: var(--primary);
    text-decoration: none;
}
.wave-bottom {
    margin-bottom: -100px;
}

/* Background */
.bg-1,
.bg-2 {
    border-radius: 0;
    position: absolute;
    z-index: -1;
    height: auto;
}
.bg-1 {
    width: 750px;
    top: 750px;
    left: 20%;
}
.bg-2 {
    width: 500px;
    top: -30px;
    right: 50px;
}
@media (min-width: 768px) {
    .bg-1 {
        top: 550px;
    }
    .bg-2 {
        top: 60px;
        right: unset;
        left: 0;
    }
}
@media (min-width: 992px) {
    .bg-1 {
        top: 4rem;
        left: 50%;
    }
}
@media (min-width: 1500px) {
    .bg-1 {
        left: unset;
        right: 0;
    }
}

/* Ribbon */
.ribbon {
  font-weight: 600;
  color: #fff;
}
.ribbon {
  --s: 1.8em; /* the ribbon size */
  --d: .2em;  /* the depth */
  --c: .5em;  /* the cutout part */
  
  padding: 0 calc(var(--s) + .75em) var(--d);
  line-height: 1.8;
  background:
    conic-gradient(at left  var(--s) bottom var(--d),
     #0000 25%,#0004 0 37.5%,#0002 0) 0   /50% 100% no-repeat,
    conic-gradient(at right var(--s) bottom var(--d),
     #0002 62.5%,#0004 0 75%,#0000 0) 100%/50% 100% no-repeat;
  clip-path: polygon(0 var(--d), var(--s) var(--d),var(--s) 0,calc(100% - var(--s)) 0,calc(100% - var(--s)) var(--d),100% var(--d),calc(100% - var(--c)) calc(50% + var(--d)/2),100% 100%,calc(100% - var(--s) - var(--d)) 100%,calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) 100%,0 100%,var(--c) calc(50% + var(--d)/2));
  background-color: var(--light-green); /* the main color */
  width: fit-content;
}

