@font-face {
    font-family: "nocturne";
    src:
        url("fonts/NocturneSerif-Regular.woff") format("woff"),
        url("fonts/NocturneSerif-Regular.ttf") format("ttf"),
        url("fonts/NocturneSerif-Regular.otf") format("otf");
    font-weight: normal;
    font-style: normal;
}

/* ---------- TEXT ---------- */
.text-serif {
    font-family: nocturne !important;
}

.text-mycolor-primary {
    color: #f46277;
}

.text-hover-primary:hover {
    color: #ffa7af !important;
}

.text-mycolor-secondary {
    color: #7a4aed;
}

a:not(.page-link) {
    color: #f46277 !important;
}

/* ---------- BUTTON ---------- */
.btn {
    font-family: nocturne, sans-serif;
    font-size: 14px;
    font-weight: 700;
    border-radius: 0;
    padding: 10px 30px;
}

.btn-sm {
    padding: 5px 15px;
}

.btn:hover,
.btn:focus,
.btn:active {
    color: white !important;
    background-color: #f46277;
    border-color: #f46277;
}

.btn-mycolor {
    background-color: #f46277;
}

.btn-mycolor:hover {
    background-color: #ffa7af;
    border-color: #ffa7af;
}

.btn-outline-mycolor {
    color: #f46277;
    border: 2px solid #f46277;
}

.btn-outline-mycolor-secondary {
    color: #7a4aed;
    border: 2px solid #7a4aed;
}

.btn-outline-mycolor-secondary:hover,
.btn-outline-mycolor-secondary:active,
.btn-outline-mycolor-secondary:focus {
    background-color: #7a4aed;
    border-color: #7a4aed;
}

/* ---------- FORM ---------- */
.input-group-text {
    border-radius: 0;
}

.form-control {
    border-radius: 0;
    padding: 10px 30px;
}

.form-control-sm {
    padding: 5px 15px;
}

.form-check-input:not([type="radio"]) {
    border-radius: 0 !important;
}

.form-check-input:checked {
    background-color: #f46277;
    border-color: #f46277;
}

.form-check-input-secondary:checked {
    background-color: #7a4aed;
    border-color: #7a4aed;
}

/* ---------- BACKGROUND ---------- */
.bg-mycolor-primary {
    background-color: #f46277;
}

.bg-mycolor-secondary {
    background-color: #7a4aed;
}

/* ---------- MAP ---------- */
.pin-container {
    background-color: #f46277;
    border: 3px solid #f46277;
}

.pin:after {
    border-top: 15px solid #f46277;
}

.pin:hover .pin-container {
    background-color: #ffa7af;
    border-color: #ffa7af;
}

.pin:hover:after {
    border-top: 15px solid #ffa7af;
}

.map-poly {
    fill: #f46277;
    stroke: #f46277;
}