:root{
    --tan1: #efede4;
    --tan-pres: #E4DBC8;
    --mid-tan: #b29990;
    --dark-tan: #5b3c32;
    --lightblue: #79a7c8;
    --lighterblue: #c1d3e0;
    --darkgreen: #556f4d;
    --lightgreen: #bfcebb;
    --peach: #f3a09e;
    --lightpeach: #e6d1d0;
}

body{
    background-color: var(--tan1);
    justify-content: center;
    padding-left: 10%;
    padding-right: 10%;
    font-family: ABeeZee;
    color:var(--dark-tan);
}

a{
    color: var(--lightblue);
}

a:hover{
    color: var(--lighterblue);
}

.canva-frame{
    position: flex; 
    width: 100%; 
    padding-top: 56.2500%; 
    padding-bottom: 0; 
    box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); 
    margin-top: 1.6em; 
    margin-bottom: 0.9em; 
    overflow: hidden; 
    border-radius: 8px;
    will-change: transform;
}

.navbar{
    background-color: var(--tan-pres);
    font-family: ABeeZee;
}

.navbar-brand{
    color: var(--darkgreen);
}

.nav-link:hover{
    color: var(--lightblue);
}

.nav-link{
    color: var(--dark-tan);
}

.inline-left{
    max-height: 12em;
    float: left;
    margin-right: 2%;
    margin-bottom: 1%;
    margin-top: 1%;
    outline: 5px solid var(--tan-pres);
}

.inline-right{
    max-height: 12em;
    float: right;
    margin-left: 2%;
    margin-bottom: 1%;
    margin-top: 1%;
    outline: 5px solid var(--tan-pres);
}

#affinity-map{
    width:50%;
    float: right;
    margin-left: 2%;
    margin-bottom: 1%;
    margin-top: 1%;
    outline: 5px solid var(--tan-pres);
}

.poster{
    max-width: 9em;
}

.poster-popup{
    float:right;
    max-width: 15em;
    margin-left: 3%;
    margin-right: 3%;
    margin-bottom: 2%;
    outline: 5px solid var(--mid-tan);
}

.btn-tan{    
    --bs-btn-bg: var(--tan-pres);
    --bs-btn-color: var(--dark-tan);
    --bs-btn-border-color: var(--mid-tan);
    --bs-btn-border-width: 2px;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--mid-tan);
    --bs-btn-hover-border-color: var(--mid-tan);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--tan-pres);
    --bs-btn-active-border-color: var(--tan-pres);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--tan-pres);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--tan-pres);
    --bs-gradient: none;
}

.btn-blue {
    --bs-btn-bg: var(--lighterblue);
    --bs-btn-color: var(--lightblue);
    --bs-btn-border-color: var(--lightblue);
    --bs-btn-border-width: 2px;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--lightblue);
    --bs-btn-hover-border-color: var(--lightblue);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--lightblue);
    --bs-btn-active-border-color: var(--lightblue)d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--lightblue);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--lightblue);
    --bs-gradient: none;
}

.btn-green {
    --bs-btn-bg: var(--lightgreen);
    --bs-btn-color: var(--darkgreen);
    --bs-btn-border-color: var(--darkgreen);
    --bs-btn-border-width: 2px;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--darkgreen);
    --bs-btn-hover-border-color: var(--darkgreen);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--darkgreen);
    --bs-btn-active-border-color: var(--darkgreen)d;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--darkgreen);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--darkgreen);
    --bs-gradient: none;
}

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

.modal-content{
    background-color: var(--tan-pres);
    color:var(--dark-tan);
}

.visual-dia{
    max-width: 25em;
}

.visual-dia-sizing{
    min-height: 25em;
}

.participant-3-ugh{
    min-height: 32.5em;
}

.visual-dia-full{
    width: 98%;
}

td, th{
    text-align: center;
}