/* 
    Colors (c)
*/
.c-primary {
    color: var(--primaryColor);
}

.c-secondary {
    color: var(--secondaryColor);
}

.c-darkgray {
    color: rgb(163, 163, 163);
}

.c-gray {
    color: rgb(163, 163, 163);
}

.c-lightgray {
    color: rgb(163, 163, 163);
}

/* 
    Display 
*/

.inline {
    display: inline;
}

.block {
    display: block;
}

.flex {
    display: flex
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}


/* 
    Padding 
*/

.pad-xs {
    padding: 16px;
}

.pad-s {
    padding: 20px;
}

.pad-m {
    padding: 32px;
}

.pad-l {
    padding: 48px;
}

.pad-xl {
    padding: 64px;
}

/* 
    Margins 
*/

.mar-xs {
    margin: 12px;
}

.mar-s {
    margin: 16px;
}

.mar-m {
    margin: 32px;
}

.mar-l {
    margin: 48px;
}

.mar-xl {
    margin: 64px;
}

.mar-top-xs {
    margin-top: 0.75rem;
}

.mar-top-s {
    margin-top: 1rem;
}

/* 
    Utilities 
*/

.no-scroll {
    overflow: hidden;
}


/* 
    Animations 
*/

.fade-in {
    animation: fade-in 250ms both;
}

@keyframes fade-in {
    from { opacity: 0 }
    to { opacity: 1}
}

/* 
    Kirby Text 
*/

.kt p:not(:last-child) {
    margin-bottom: 0.75em;
}

.kt a {
    text-decoration: underline;
}

.kt a:hover {
    opacity: 0.7;
}