:root {
    --jungla: #285C4D;
    --light: #F6EEE8;
    --tierra: hwb(24 15% 28%);
    --arena: #EFE1D4;
}

.bg-green { background: var(--jungla); }
.text-green { color: var(--jungla); }
.border-green { border-color: var(--jungla); }

.bg-light { background: var(--light) !important; }
.text-light { color: var(--light); }
.border-light { border-color: var(--light); }

.text-tierra { color: var(--tierra);}

nav.navbar { font-family: 'Roboto Mono', monospace; font-weight: 400; font-size: 16px; line-height: 21px;}

/* btns */
.btn-peregrina { background: none; border: none; color: var(--tierra); text-decoration: none; position: relative; display: flex; justify-content: left; align-items: center;z-index: 1029; font-family: 'Roboto Mono'; font-style: normal;text-align: center;}
.btn-peregrina::after { content: ''; background: var(--arena); height: 3rem; width: 3rem; position: absolute; border-radius: 50%;z-index: -1;left: -1rem;transition: all 1s linear;}
.btn-peregrina:hover { color: var(--tierra);}
.btn-peregrina:hover::after { transform: scale(1.2);}
.btn-peregrina[disabled="true"], .btn-peregrina[disabled=""] {color: gray!important;pointer-events: none;}
.btn-peregrina[disabled="true"]::after, .btn-peregrina[disabled=""]::after {background-color: transparent;}

.btn-peregrina-2 { color: white; text-decoration: none; position: relative; display: flex; justify-content: left; align-items: center;z-index: 1029; font-family: 'Roboto Mono'; font-style: normal;text-align: center;}
.btn-peregrina-2::after { content: ''; background: var(--tierra); height: 3rem; width: 3rem; position: absolute; border-radius: 50%;z-index: -1;left: -1rem;transition: all 1s linear;}
.btn-peregrina-2:hover { color: white;}
.btn-peregrina-2:hover::after { transform: scale(1.2);}

.peregrina-btn-quote { text-decoration: none; border-radius: 20px; background-color: var(--jungla);padding: .5rem 1.5rem;color:white;transition: all .5s ease-in-out;}
.peregrina-btn-quote:hover {color: white;background-color:var(--tierra);}
.peregrina-btn-quote.active { background: var(--tierra);}

/* tricks */
.bg-start { min-height: 80vh; background-position: center !important; background-repeat: no-repeat !important; background-size: cover!important;}
.img-filter {background-color: rgba(0, 0, 0, .5); overflow-x: hidden;}
.img-container { width: 100%;position: relative;}
.img-container > span { position:absolute; width: 25%; height: 50%; background-color: var(--tierra); left: 77%;bottom:52%;z-index: 0;}
.img-container > span.bottom {bottom:-3% !important; }


/* quote */
.tippy-box[data-theme~='success'] {background-color: var(--tierra);color: white;}

.tippy-box[data-theme~='success'][data-placement^='top'] > .tippy-arrow::before { border-top-color: var(--tierra);}
.tippy-box[data-theme~='success'][data-placement^='bottom'] > .tippy-arrow::before {border-bottom-color: var(--tierra); }
.tippy-box[data-theme~='success'][data-placement^='left'] > .tippy-arrow::before { border-left-color: var(--tierra);}
.tippy-box[data-theme~='success'][data-placement^='right'] > .tippy-arrow::before { border-right-color: var(--tierra);}

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

.f-satisfy { font-family: 'Satisfy', cursive; font-size: 52px; }

html, body { font-family: 'Roboto Mono', monospace; }
.f-rbt { font-family: 'Roboto Mono', monospace; }