/* ===== TYPEFACE ===== */
@import url('https://rsms.me/inter/inter-ui.css');
body{ 
    font-family: 'Inter UI', sans-serif; 
    overflow-x: hidden;
    /*background: rgba(255, 153, 85, 0.5);*/
}
@supports (font-variation-settings: normal){
    body{ 
      font-family: 'Inter UI var alt', sans-serif; 
    }
}

/* ===== GLOBAL VARIABLES ===== */
:root{
    --accent-color: #E1681E;
    --dark-gray: #16161D;
    --light-gray: #DFDFDF;
    --sub-gray: #888888;
    --background-gray: #FAFAFA;
    --primary-spacing: 12px;
    --secondary-spacing: 8px;
    --secondary-text: #232323;
    --card-border-radius: 4px;
}

#logo{
    max-height: 36px;
    object-fit: contain;
    width: auto;
}

.navbar-toggler{
    border: 0px;
}

.nav-item.selected {
    background-color: var(--accent-color);
    border-radius: 5px;
    color: white;
}
.nav-item.selected > *{
    color: white !important;
}
/* used to hide the news link by default */
.nav-item:last-child{
    display: none;
}

/* add a shadow behind the element for depth effects */
.shadowed{
    box-shadow: 0px 0px 8px var(--light-gray);
}
.dark-shadowed{
    box-shadow: 0px 0px 4px #888;
}

/* make the element raise when the pointer is hovering */
.focusable{
    transition: all .333s ease-out;
}
.focusable:hover{
    box-shadow: 0px 19px 43px rgba(0,0,0,0.22), 0px 4px 11px rgba(0,0,0,0.18);
    transform: translate3d(0px, -1px, 0px);
}

.accented{
    color: var(--accent-color);
}

.backdrop-pane{
    background-color: var(--background-gray);
    padding: var(--secondary-spacing);
}

/* ===== TITLES ===== */
.pane-title{
    font-weight: bold;
    font-size: x-large;
}

.paragraph-title{
    font-weight: bold;
    text-transform: uppercase;
    margin: var(--primary-spacing 0px);
}

/* ====== LISTS ====== */
.minimal-bullets{
    list-style-type: none;
    list-style-position: inside;
    padding: 0;
}

.minimal-bullets > li::before{
    content: "-";
    padding-right: 4px;
}

.list-placeholder{
    margin: 0 auto;
    text-align: center;
    padding: calc(var(--primary-spacing) * 2) 0;
    color: var(--secondary-text);
}


/* ===== PARTNERS ===== */
.partner-card{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.partner-card .partner-pic{
    max-width: 128px;
    margin-bottom: var(--primary-spacing);
}

.partner-card .partner-name {
    margin: 0 auto;
    font-size: small;
    text-align: center;
}

/* ===== NEWS ===== */
.news-card{
    padding: var(--primary-spacing);
    margin: var(--primary-spacing) 0px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: var(--card-border-radius);
}

.news-content{
    word-break: break-word;
    white-space: pre-line;
}

/* ===== PICTURES CAROUSEL ===== */
.carousel-item > img{
    object-fit: scale-down;
}

.carousel-caption{
    position: relative;
    left: auto;
    right: auto;
    color: black;
    padding-bottom: 0px;
}
.carousel-caption > p{
    margin-bottom: 0px;
    margin-top: var(--primary-spacing);
    font-size: small;
}

/* ===== CONTAINERS ===== */
.centered-container{
    width: 75%;
    max-width: 768px;
    margin: calc(var(--primary-spacing) * 2) auto;
}

/* ===== FORMS ====== */
form.centered-container{
    max-width: 400px;
}

form > .form-group{
    margin-top: var(--primary-spacing);
}

/* ===== ALERTS ===== */
.alert{
    position: fixed;
    bottom: 0;
    right: 0;
    margin-right: var(--primary-spacing);
    z-index: 100;
}

/* ===== FOOTER ===== */
footer{
    background-color: #EFEFEF;
    padding: 48px;
}
footer #logo{
    max-height: 48px;
}
#footer-content{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}
#footer-content p {
    margin: 0;
}
.footer-col {
    max-width: 400px;
    margin: 0 48px;
}
.footer-col > a{
    color: initial;
}

/* ===== RESPONSIVE HANDLERS ===== */
@media(max-width: 768px){
    .centered-container{
        width: 100%;
        max-width: unset;
        padding: 0px calc(var(--primary-spacing) * 2);
    }
    footer {
        padding: 24px;
    }
    footer #logo{
        max-height: 36px;
        margin-top: 24px;
    }
    #footer-content{
        flex-direction: column;
        align-items: center;
    }
    .footer-col{
        margin: 12px 0;
    }
    .nav-item:last-child{
        display: block;
    }
}

@media(max-width: 991px){
    .nav-item.selected {
        background-color: transparent;
        color: var(--accent-color) !important;
    }
    .nav-item.selected > *{
        color: var(--accent-color) !important;
    }
}