:root {
    --body-bg: #0f0f0f;
    --gold1: #f4b000;
    --gold2: #ffcc33;
    --gold3: #ffeb99;

    --gold-gradient: linear-gradient(272deg, #bd8129 0%, #fced85 50%, #bf852b 100%);
    --main-header-bg: #0f0f0f;
    --main-header-color: #fff;
    --nav-menu-bg: var(--gold-gradient);
    --nav-menu-text: #000;
    --nav-menu-hover-text: #000;
    --header-icon-border-color: #523e0b;

    --rates-bg: var(--gold-gradient);
    --rates-text: #000;

    --price-high: green;
    --price-low: red;
}
  
body {
    background-color: var(--body-bg);
    color: #fff;
    /* font-family: 'Open Sans', sans-serif; */
}
  
  /* MAIN HEADER */
.main-header {
    background-color: var(--main-header-bg);
    color: var(--main-header-color);
    padding: 10px 20px;
}
.main-header img.logo-img {
    height: 120px;
}
.main-header .main-header-contact-info {
    font-size: 14px;
}
.main-header .main-header-contact-info a {
    color: var(--main-header-color);
    text-decoration: none;
}
.main-header .main-header-contact-info a:hover {
    color: var(--gold1);
    text-decoration: underline;
}
.main-header i {
    color: var(--gold1);
}
  
  /* Login button */
.login-btn {
    background-color: var(--gold1);
    border: none;
    padding: 6px 15px;
    color: #000;
    font-weight: 600;
    cursor: pointer;
}
.login-btn:hover {
    background-color: #ffc107;
}
.login-icon {
    background: none;
    border: none;
    color: var(--gold1);
    font-size: 22px;
    border: 1px solid var(--header-icon-border-color);
}
  
  /* NAV MENU */
.nav-menu {
    background: var(--nav-menu-bg);
    text-align: center;
}
.nav-menu a {
    color: var(--nav-menu-text);
    text-decoration: none;
    padding: 12px 20px;
    display: inline-block;
    font-weight: 600;
}
.nav-menu a:hover {
    color: var(--nav-menu-hover-text);
    text-decoration: underline;
    text-underline-position: under;
}
  
/* MOBILE MENU ICON */
.menu-toggle {
    background: none;
    border: none;
    color: var(--gold1);
    font-size: 24px;
    border: 1px solid var(--header-icon-border-color);
}

.tiny {
    font-size: 11px;
}

/* RESPONSIVE */
@media (max-width: 767px) {
    .main-header {
        padding: 10px 0;
    }
    .main-header .main-header-contact-info {
      display: none;
    }
  
    .main-header img.logo-img {
      height: 120px;
    }
  
    /* Mobile nav collapsed */
    .nav-menu {
      display: none;
      flex-direction: column;
      text-align: left;
      padding: 10px;
    }
  
    .nav-menu a {
      display: block;
      padding: 10px;
      border-bottom: 1px solid rgba(0,0,0,0.1);
    }
  
    .nav-menu.show {
      display: flex;
    }
}