html { 
    height: 100%;
    scroll-behavior: smooth;
}
body { 
    height: 100%;
    margin: 0; 
    font-family: "SUSE", "Helvetica Neue", sans-serif;
    color: #333333;
    font-size: 18px !important;
}

.container{
    display: block;
    margin: auto;
    width: 95%;
}
@media (min-width:576px) {
    .container{
        max-width:540px
    }
}
@media (min-width:768px) {
    .container{
        max-width:720px
    }
}
@media (min-width:992px) {
    .container{
        max-width:960px
    }
}
@media (min-width:1200px) {
    .container{
        max-width:1140px
    }
}
@media (min-width:1400px) {
    .container{
        max-width:1320px
    }
}

.font-logo{
    font-family: 'Playfair Display'; 
    letter-spacing: 3px;
}

.h-100{
    height: 100%;
}
.w-100{
    width: 100%;
}

.lh-1{
    line-height: 1 !important;
}

.fw-200{
    font-weight: 200 !important;
}
.fw-300{
    font-weight: 300 !important;
}
.fw-400{
    font-weight: 400 !important;
}
.fw-500{
    font-weight: 500 !important;
}
.fw-700{
    font-weight: 700 !important;
}
.fw-900{
    font-weight: 900 !important;
}
.fv-small-caps{
    font-variant: small-caps !important;
}

.m-0{
    margin: 0px !important;
}
.m-auto{
    margin: auto !important;
}
.mx-auto{
    margin-left: auto !important;
    margin-right: auto !important;
}
.my-auto{
    margin-top: auto !important;
    margin-bottom: auto !important;
}

.d-none{
    display: none !important;
}
.d-flex{
    display: flex !important;
}
.flex-spacer {
    flex: 1 1 auto !important;
}
.flex-grow-1 {
    flex-grow: 1;
}
.justify-space-between{
    justify-content: space-between;
}

.text-start{
    text-align: left !important;
}
.text-center{
    text-align: center !important;
}
.text-end{
    text-align: right !important;
}
.text-nowrap{
    white-space: nowrap !important;
}

.small{
    font-size: .875em;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}
.shadow-none {
    box-shadow: none !important;
}
.shadow {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.alert{
    padding: 2rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
}
.alert .logo{
    margin-right: 1rem;
}

.badge{
    display: inline;
    font-size: 80%;
    background-color: rgb(108, 117, 125);
    color: white;
    padding: 2px 6px;
}

.rounded{
    border-radius: 1rem;
}

.text-decoration-none{
    text-decoration: none !important;
}

.bg-smoke {
    background: #fafafa !important;
}
.bg-white {
    background: white !important;
}
.bg-transparent {
    background: transparent !important;
}

.text-accent {
    color: #766758 !important;
  }
.bg-accent {
    background: #766758 !important;
}
.bg-accent-light {
    background: #aca39a;
}
  
  
.text-primary {
    color: #063066 !important;
}
.bg-primary {
    background: #063066 !important;
}
.bg-primary-light {
    background: #e5e8ea;
}

.text-success{
    color: #198754 !important;
}
.bg-success{
    background: #198754 !important;
}
.bg-success-light{
    background: #d1e7dd !important;
}

.text-danger {
    color: #f44456 !important;
}
.bg-danger {
    background: #f44456 !important;
}
.bg-danger-light {
    background: #f8e7ea;
}

.text-white {
    color: white !important;
}
.text-muted {
    color: #6c757d !important;
}
.text-black {
    color: black !important;
}


.list-style-none{
    list-style: none !important
}

.article-separator{
    width: 60px;
    height: 5px;
    background: lightgrey;
    margin: 3rem auto;
}

.input-wrap{
    margin-bottom: 1rem;
    min-width: 200px;
}
.input-wrap label{
    display: block;
    margin-bottom: 0.5rem;
}
.input-wrap input,
.input-wrap textarea{
    outline: none;
    font-family: "SUSE", "Helvetica Neue", sans-serif;
    font-size: 18px;
    background: #fafafa;
    border: 0px solid white;
    color: #063066;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0px 0px 0px 2px grey;
    transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    width: calc(100% - 2rem - 4px);
    max-width: calc(100% - 2rem - 4px);
    min-width: calc(100% - 2rem - 4px);
}
.input-wrap input:focus,
.input-wrap textarea:focus{
    box-shadow: 0px 0px 0px 2px rgb(6, 48, 102);
}

hr{
    border-width: 1px 0px 0px 0px;
    border-color: white;
}