/* BODY */

body.round {
    --radius: 10px;
}
  
body.flat {
    --radius: 1px;
} 

body {
    margin: 0;
    background-color: var(--c3-100);
    color: var(--text-color);
}

body.dark {
    color: var(--text-color-negative);
}

body * {
    box-sizing: border-box;
    max-width: 100%;
}

a {
    color: var(--c2-100);
}

.page-title {
    cursor: text;
}

.page-title a {
    text-decoration: unset;
    pointer-events: none;
}

.button, .wp-block-button__link.wp-element-button {
    background-color: var(--c1-100);
    border-radius: var(--radius);
    color: #fff;
    transition: var(--transition-fast);
    display: inline-block;
    box-shadow: unset;
    text-decoration: unset !important;
    padding: 10px 20px;
    font-size: inherit;
}

.button:hover, .wp-block-button__link.wp-element-button:hover {
    background-color: var(--c1-120);
}

.button-transparent a {
    background-color: hsla(0, 0%, 100%, 0.2);
}

.button-transparent a:hover {
    background-color: hsla(0, 0%, 100%, 0.3);
}

/* ANIMATIONS */

.fadeup {
    animation-name: fadeup;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes fadeup {
    0% {
        opacity: 0;
        transform:translate3d(0,100px,0)
    }
    to {
        opacity: 1;
        transform:translateZ(0)
    }
}


/* LAYOUT CLASSES */

.box {
    padding: 30px;
}

.small-box {
padding: 20px;
}

.grey {
    background-color: var(--c3-120);
}

.dark-grey {
background-color: var(--c0-t008);
}

.color {
background-color: var(--c1-100);
}

.negative * {
color: #fff;
}

.negative p a {
text-decoration: underline;
}

.shadow {
    box-shadow: var(--shadow-small);
}

/* ENTRY */

.page-thumbnail {
    max-height: var(--thumb-height, 200px);
    position: relative;
}

.page-thumbnail img {
    max-height: var(--thumb-height, 200px);
    object-fit: cover;
    object-position: center var(--thumb-percent, 40%);
}

.thumbnail-caption {
    position: absolute;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
}

/* ELEMENTS */

.breadcrumb {
    margin: 15px auto;
}

.breadcrumb .sep::before {
    font-family: 'dashicons';
    content: '\f345';
    vertical-align: middle;
    margin: 0 0.1em;
    color: var(--text-color-light);
}