/*~~~~~ VARIABLES ~~~~~*/
:root{
    --dark: #424242;
    --gold: #d9b466;
}

/*~~~~~ HEADING TEXTS ~~~~~*/
h1, h2, h3, h4, h6 {
    font-family: 'Poiret One', cursive;
}
body, p, span, a, li, figcaption, label, input {
    font-family: 'Nanum Gothic', sans-serif;
    word-wrap: break-word;
}

.form-select, body, .color-sombre{
    color: var(--dark);
}

.color-gold{
    color: var(--gold);
}

/*~~~~~ LINKS ~~~~~*/
.nav-link, .dropdown-item{
    color: var(--gold) !important;
}
.nav-link.active{
    color: var(--gold);
    font-weight: bold;
}
.dropdown-item:hover{
    background-color: transparent;
}

a:hover{
    color: #fff !important;
    font-weight: bold;
}

/*~~~~~ BUTTONS STYLE ~~~~~*/
.btn-gold{
    color: #fff;
    background-color: var(--gold);
    border-color: var(--gold);
}

.btn-gold:hover {
    color: #fff;
    background-color: #daac49;
    border-color: #daac49;
}

/*~~~~~ BACKGROUNDS BORDERS ~~~~~*/
.bg-header{
    background: var(--dark);
}

.bg-sombre{
    background: var(--dark);
}

.border-gold{
    border-bottom: 2px solid var(--gold);
}

/*~~~~~ TOUCHPADS VIEWPORT ~~~~~*/
@media screen and (min-width: 576px ) {
    .bg-header{
        background: #fff;
    }
}

/*~~~~~ DESKTOP VIEWPORT ~~~~~*/
@media screen and (min-width: 1400px ) {
    .bg-header{
        background: url(../img/gringotts-front-2.jpg);
        background-attachment: fixed;
        background-size: contain;
    }
}