:root {
    --kc-primary: #FFB547;
    --white: #ffffff;
    --kc-secondary: #3F5D97;
    --kc-ui: #1E75C6;



    --type-display: "Comfortaa", sans-serif;
    --type-body: "Inter", sans-serif;



    --bs-link-color: #1E75C6;

  }
  

body {
    font-family: var(--type-body);
    font-weight: 300;
    letter-spacing: .25px;
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6,
.navbar
 {font-family: var(--type-display);}

 h3 { font-size: 1.5em;}

 .navbar {
    background-color: var(--kc-secondary)!important;

 }

.bg-primary {
    background-color: var(--kc-primary)!important;
}

.active {border-bottom: 4px solid var(--kc-primary)}

.nav-item {margin-top: 6px;}
.nav-item {margin-left: 24px;}

.anchor-links { color: var(--bs-link-color);}

.decorative-icon {color: var(--kc-primary);}

.light-divider  {
    background: linear-gradient(to right, #FFB547, #FFCB47);
    height: 2px;
    border-top: 0
  }


.list-group-skills .list-group-item {font-size: 1em!important;}


.hero-background {

background: rgba(250, 172, 57, 1.0);
background: radial-gradient(at right bottom, rgba(250, 172, 57, 1.0), rgba(255, 204, 71, 1.0));
}

.border-branded {border-color: var(--kc-primary)}

.list-group-item-action {padding: 24px;}



.btn-outline-primary {
    --bs-btn-color: var(--kc-secondary);
    --bs-btn-border-color: var(--kc-secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--kc-secondary);
    --bs-btn-hover-border-color: var(--kc-secondary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--kc-secondary);
    --bs-btn-active-border-color: var(--kc-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--kc-secondary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--kc-secondary);
    --bs-gradient: none;
}


.badge {background-color: #FFCB7D; color: black; border-radius: 50px; font-weight: 400;}

.back-to-top {color: var(--kc-secondary); text-decoration: none;}
.back-to-top .link-text {text-decoration: none;}
.back-to-top .link-text:hover {text-decoration: underline;}

.footer {border-top: 1px solid var(--kc-primary);}

#btn-back-to-top {
    position: fixed;
    bottom: 48px;
    right: 24px;
    width: 44px;
    height: 44px;
    background-color: var(--kc-primary);
    display: none;
  }


  .btn-back-to-top .material-symbols-rounded {line-height: 0; padding: 0; margin: 0; font-size: 24px;}