:root{
    /* CSS HEX */
    --black: #0d1527;
    --oxford-blue: #14213dff;
    --orange-web: #fca311;
    --orange-web-hover: #f7b446;
    --orange-web-hover-line:#faac2c;
    --champagne:#ead9be;
    --platinum: #e5e5e5ff;
    --white: #f9f9f9;

}

body{
    --bs-body-bg:var(--platinum);
    font-family: 'Inter', sans-serif;
}

nav{
    background-color: var(--black) !important;
}

.border-gold{
    --bs-border-color: rgba(252, 163, 17, 0.8);
    --bs-border-width: 2px;
}

.bg-primary{
    --bs-badge-color: var(--oxford-blue);
    background-color: (var(--orange-web),var(--orange-web-hover)) !important;
}

.btn-primary{
    --bs-btn-color: var(--oxford-blue);
    --bs-btn-bg: var(--orange-web);
    --bs-btn-border-color: var(--orange-web);
    --bs-btn-hover-color: var(--oxford-blue);
    --bs-btn-hover-bg: var(--orange-web-hover);
    --bs-btn-hover-border-color: var(--orange-web-hover-line);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: var(--oxford-blue);
    --bs-btn-active-bg: var(--orange-web-hover-line);
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--oxford-blue);
    --bs-btn-disabled-bg: var(--orange-web);
    --bs-btn-disabled-border-color: var(--orange-web);
}

.header{
    background-color: var(--platinum);
    color: var(--black);
}

.card-icon{
    height: 36px;
    width: 36px;
    margin-right: 2vw;
}

.card{
    --bs-card-bg:var(--white);
    --bs-card-border-color:var(--oxford-blue);
}

.card-header{
    background-color:var(--champagne);
}

a.link-contacto{
    font-style: italic;
}

a:link, a:visited, a:active {
    text-decoration:none;
    outline: none;
}

a:hover{
    text-decoration: underline var(--orange-web);
}

.contacto{
    width: fit-content;
}

.contacto:hover i{
    color: var(--orange-web) !important;
}

footer{
    background-color: var(--black);
}

#contacto{
    border: 0 none;
}

#contacto:target{
    border: 1px solid var(--orange-web-hover-line);
    border-radius: 10px;
    padding-top: 8px;
    transition: border 2s,  padding-top 1s;
}

#contacto:target h6{
    color: var(--orange-web-hover) !important;
    transition: 0.5s;
}