/*
 * -----------------
 * Styles for others
 * -----------------
 */

hr {
    background: var( --color-pearlgray-light );
    margin: 0 0 20px 0;
    padding: 0;
}

embed {
    width: 100%;
    height: 600px;
    margin-bottom: 20px;
    background: repeating-linear-gradient( 45deg, var( --color-pearlgray-light ) 0px, var( --color-pearlgray-light ) 10px, var( --color-white ) 10px, var( --color-white ) 20px );
    animation-name: loading;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    background-size: 28.2842712475px 28.2842712475px;
    background-repeat: repeat;
    border: 1px solid var( --color-panthablack ) !important;
    border-radius: 5px;
}

.has-box-shadow {
    box-shadow: 0px 0px 10px rgb( 46 48 60 / 10% );
    position: relative;
}

/*
 * -------------------
 * Special backgrounds
 * -------------------
 */

.has-background-orange-white {
    background: linear-gradient( 135deg, var(--color-brick) 50px, var(--color-orange) 50px, var(--color-orange) 150px, var(--color-white) 150px );
    background-repeat: no-repeat;
}

.has-background-orange-transparent {
    background: linear-gradient( 135deg, var(--color-brick) 50px, var(--color-orange) 50px, var(--color-orange) 150px, transparent 150px );
    background-repeat: no-repeat;
}

.has-background-orange-dark {
    background: linear-gradient( 135deg, var(--color-brick) 50px, var(--color-orange) 50px, var(--color-orange) 150px, var(--color-panthagray) 150px );
    background-repeat: no-repeat;
}

.has-background-white-orange {
    background: linear-gradient( 135deg, var(--color-white) calc( 100% - 150px ), var(--color-orange) calc( 100% - 150px ), var(--color-orange) calc( 100% - 50px ), var(--color-brick) calc( 100% - 50px ) );
    background-repeat: no-repeat;
}

.has-background-transparent-orange {
    background: linear-gradient( 135deg, transparent calc( 100% - 150px ), var(--color-orange) calc( 100% - 150px ), var(--color-orange) calc( 100% - 50px ), var(--color-brick) calc( 100% - 50px ) );
    background-repeat: no-repeat;
}

.has-background-dark-orange {
    background: linear-gradient( 135deg, var(--color-panthagray) calc( 100% - 150px ), var(--color-orange) calc( 100% - 150px ), var(--color-orange) calc( 100% - 50px ), var(--color-brick) calc( 100% - 50px ) );
    background-repeat: no-repeat;
}

.has-background-orange-white-orange {
    background: linear-gradient( 135deg, var(--color-brick) 50px, var(--color-orange) 50px, var(--color-orange) 150px, var(--color-white) 150px, var(--color-white) calc( 100% - 150px ), var(--color-orange) calc( 100% - 150px ), var(--color-orange) calc( 100% - 50px ), var(--color-brick) calc( 100% - 50px ) );
    background-repeat: no-repeat;
}

.has-background-orange-transparent-orange {
    background: linear-gradient( 135deg, var(--color-brick) 50px, var(--color-orange) 50px, var(--color-orange) 150px, transparent 150px, transparent calc( 100% - 150px ), var(--color-orange) calc( 100% - 150px ), var(--color-orange) calc( 100% - 50px ), var(--color-brick) calc( 100% - 50px ) );
    background-repeat: no-repeat;
}

.has-background-orange-dark-orange {
    background: linear-gradient( 135deg, var(--color-brick) 50px, var(--color-orange) 50px, var(--color-orange) 150px, var(--color-panthagray) 150px, var(--color-white) calc( 100% - 150px ), var(--color-orange) calc( 100% - 150px ), var(--color-orange) calc( 100% - 50px ), var(--color-brick) calc( 100% - 50px ) );
    background-repeat: no-repeat;
}

.has-background-light-dotted {
    border-color: var(--color-pearlgray-light) !important;
    background-color: var(--color-pearlwhite);
    /*opacity: 1;
    background-image: radial-gradient( var(--color-pearlgray-light) 1px, var(--color-pearlwhite) 1px );
    background-size: 10px 10px;*/
}

.has-background-dark-dotted {
    border-color: var(--color-panthablack) !important;
    background-color: var(--color-panthagray);
    /*opacity: 1;
    background-image: radial-gradient( var(--color-panthablack) 1px, var(--color-panthagray) 1px );
    background-size: 10px 10px;*/
}

/*
 * ----------------------
 * Underlined font styles
 * ----------------------
 */

.underlined {
    display: inline-block;
}

.underlined::after {
    content: '';
    display: block;
    width: calc( 100% + 0.5em );
    height: 0.3em;
    margin-left: -0.25em;
    margin-top: -0.25em;
    background-color: var( --color-orange );
}

.dark.underlined::after {
    background-color: var( --color-pearlwhite );
}

.light.underlined::after {
    background-color: var( --color-panthagray );
}

/*
 * -----------------
 * Boxed font styles
 * -----------------
 */

span.boxed, p.boxed, h1.boxed, h2.boxed, h3.boxed, h4.boxed, h5.boxed, h6.boxed {
    display: inline;
    position: relative;
    top: -0.1em;
    left: 0.8em;
    line-height: calc( 1.64em + 10px ) !important;
    padding-top: 0.05em;
    padding-bottom: 0.1em;
    -webkit-box-decoration-break: clone;
    -moz-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
    background-color: var(--color-brick);
    box-shadow: 
        -0.4em 0px 0px var( --color-brick ), 
        0.4em 0px 0px var( --color-brick ), 
        -0.5em 0px 0px var( --color-orange ), 
        0.5em 0px 0px var( --color-orange );
    margin: 0;
}

span.boxed::after, p.boxed::after, h1.boxed::after, h2.boxed::after, h3.boxed::after, h4.boxed::after, h5.boxed::after, h6.boxed::after {
    position: relative;
    top: 0.02em;
    left: -0.4em;
    display: block;
    content: '\a';
    white-space: pre;
    height: 0;
}

span.boxed:last-child::after, p.boxed:last-child::after, h1.boxed:last-child::after, h2.boxed:last-child::after, h3.boxed:last-child::after, h4.boxed:last-child::after, h5.boxed:last-child::after, h6.boxed:last-child::after {
    margin-bottom: -10px;
}

span.dark.boxed, p.dark.boxed, h1.dark.boxed, h2.dark.boxed, h3.dark.boxed, h4.dark.boxed, h5.dark.boxed, h6.dark.boxed {
    color: var( --color-panthagray );
    background-color: var( --color-pearlwhite );
    box-shadow: 
        -0.4em 0px 0px var( --color-pearlwhite ), 
        0.4em 0px 0px var( --color-pearlwhite ), 
        -0.6em 0px 0px var( --color-orange ), 
        0.6em 0px 0px var( --color-orange ), 
        -0.8em 0px 0px var( --color-brick ), 
        0.8em 0px 0px var( --color-brick );
}

span.light.boxed, p.light.boxed, h1.light.boxed, h2.light.boxed, h3.light.boxed, h4.light.boxed, h5.light.boxed, h6.light.boxed {
    color: var( --color-white );
    background-color: var( --color-panthagray );
    box-shadow: 
        -0.4em 0px 0px var( --color-panthagray ), 
        0.4em 0px 0px var( --color-panthagray ), 
        -0.6em 0px 0px var( --color-brick ), 
        0.6em 0px 0px var( --color-brick ), 
        -0.8em 0px 0px var( --color-orange ), 
        0.8em 0px 0px var( --color-orange );
}