/*==================================
  Vahid Moradi @ Romadi.ch

  A lot of the inpiration for this script 
  came from the following sources:

   - https://codemyui.com/blurry-loading-quote-animation-effect/
   - http://cssdeck.com/labs/embossed-text-effect/
   - https://codepen.io/juanbrujo/full/yGpAK/
   - https://codepen.io/Moslim/pen/zwJPgL
   - https://codepen.io/chriseisenbraun/full/upmDB/
   
   - https://codepen.io/JoeHastings/pen/MOdRVm
 
==================================*/

/**
 * Import EB Garamond Font from Google Fonts 
 **/
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');

header, article, section, hgroup, nav, figure {
    /* Giving a display value to the HTML5 rendered elements: */
    display: block;
    font-family: 'Acme', sans-serif;
    font-family: 'Alfa Slab One', cursive;
    font-family: 'Amatic SC', cursive;
    font-family: 'Beth Ellen', cursive;
    font-family: 'Bree Serif', serif;
    font-family: 'Courgette', cursive;
    font-family: 'Damion', cursive;
    font-family: 'Fredericka the Great', cursive;
    font-family: 'Grenze', serif;
    font-family: 'Liu Jian Mao Cao', cursive;
    font-family: 'Marcellus SC', serif;
    font-family: 'Marck Script', cursive;
    font-family: 'Monoton', cursive;
    font-family: 'Oleo Script', cursive;
    font-family: 'Permanent Marker', cursive;
    font-family: 'Satisfy', cursive;
    font-weight: 400;
    box-sizing: border-box;
}

footer {
    font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, "Arial Bold", "Lucida Grande", sans-serif;
    background: #222;
    color: #282828;
    position: fixed;
    bottom: 2%;
    left: 2%;
    font-size: 175px;
    width: 100%;
    text-align: left;
}

footer:hover {
    color: #383838;
}


h1 {
    margin: 50px auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px rgba(0, 0, 0, 0.8);
    color: #282828;
    opacity: 0.4;
    font: 700 80px 'HelveticaNeue-Light';
}
body {
    min-height: 100vh;
    background: #222;
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0
}
blockquote {
    font-size: 3rem;
    font-family: "EB Garamond", serif;
    font-weight: 500;
    font-style: italic;
    max-width: 600px;
    font-style: italic;
    color: #888;
    line-height: 1.4;
    position: relative;
    margin: 0;
    padding: .5rem;
    text-align: center;
}

cite {
    display: block;
    text-align: right;
    font-family: "HelveticaNeue-Light", serif;
    margin-top: 1rem;
    font-size: .9rem;
    font-style: normal;
}

blockquote q span {
    will-change: opacity, filter;
    opacity: 0;
    filter: blur(0px);
}

q {
    quotes: "“" "”" "‘" "’";
}

q:before, q:after {
    position: absolute;
    color: #333;
    font-size: 8rem;
    width: 4rem;
    height: 4rem;
}

q:before {
    content: '“';
    left: -5rem;
    top: -2rem;

}
q:after {
    content: '”';
    right: -4rem;
    bottom: 1rem;
}

.elegantshadow {
    /*color: #131313;*/
    /*background-color: #e7e5e4;*/
    letter-spacing: 0.15em;
    text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;
}
.deepshadow {
    /*    color: #e0dfdc;
    background-color: #333;*/
    letter-spacing: 0.1em;
    text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
}
.insetshadow {
    /*    color: #202020;
    background-color: #2d2d2d;*/
    letter-spacing: 0.1em;
    text-shadow: -1px -1px 1px #111, 2px 2px 1px #363636;
}
.retroshadow {
    /*    color: #2c2c2c;*/
    letter-spacing: 0.05em;
    text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2);
}
.awesomeshadow {
    display: block;
    margin: 11px 0 17px 0;
    font-size: 80px;
    line-height: 80px;
    color: #ccc;
    text-shadow: 0 13.36px 8.896px #555, 0 -2px 1px #fff;
    letter-spacing: -4px;
}
.logo-mode {
    text-decoration: none;
    padding: 7px 10px;
    /*background-color: #122;*/
    border-radius: 3px;
    color: #FFF;
    transition: .35s ease-in-out;
    position: absolute;
    left: 15px;
    bottom: 15px;
    font-family: "Montserrat";
}
.logo-mode:hover {
    background-color: #FFF;
    color: #122;
}
/* ================================ 
/* CSS Text Shadow
/* ================================ 
/* using meyers reset */

/* Box-Sizing */

box-sizing {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
h3 {
    font-size: 100%;
    width: 80%;
    margin: 2em auto 0;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 700;
}
section {
    /*overflow: hidden;*/
    width: 60em;
    margin: 0 auto;
}
p {
    margin: 0;
}
.cover {
    color: white;
    width: 40%;
    margin: 0;
    padding: 1% 7% 1% 10%;
    float: left;
    margin-right: 2em;
    display: block;
    /*box-shadow: 0em 0em 5em rgba(10,10,10,0.7);*/
}
.stack {
    text-transform: uppercase;
    font-size: 12em;
    line-height: 0.7em;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.char1 {
    margin-left: -.2em;
    z-index: 4;
    text-shadow: 0.05em 0.05em 0.2em rgba(10, 10, 10, 0.9);
}
.char2 {
    z-index: 3;
    margin-left: -.175em;
    top: 0.08em;
    text-shadow: -0.02em 0.02em 0.2em rgba(10, 10, 10, 0.9);
}
/* M */

.char3 {
    z-index: 9;
    margin-left: -.125em;
    text-shadow: -0.05em 0.05em 0.2em rgba(10, 10, 10, 0.9);
}
/* P */

.char4 {
    z-index: 5;
    margin-left: -.175em;
    text-shadow: 0.02em -0.02em 0.2em rgba(10, 10, 10, 0.9);
}
/* U */

.char5 {
    z-index: 2;
    margin-left: -.125em;
    top: 0.08em;
    text-shadow: -0.05em 0.05em 0.2em rgba(10, 10, 10, 0.9);
}
/* T */

.char6 {
    z-index: 10;
    margin-left: -.125em;
    top: -0.04em;
    text-shadow: 0em 0em 0.2em rgba(10, 10, 10, 0.9);
}
/* A */

.char7 {
    z-index: 8;
    margin-left: -.3em;
    top: 0em;
    text-shadow: -0.05em 0.05em 0.2em rgba(10, 10, 10, 0.9);
}
/* T */

.char8 {
    z-index: 6;
    margin-left: -.135em;
    top: -0.05em;
    text-shadow: 0.02em -0.01em 0.2em rgba(10, 10, 10, 0.9);
}
/* I */

.char9 {
    z-index: 7;
    margin-left: -.125em;
    top: 0em;
    text-shadow: 0.03em -0.03em 0.2em rgba(10, 10, 10, 0.8);
}
/* O */

.char10 {
    z-index: 1;
    margin-left: -.125em;
    top: 0em;
    text-shadow: 0.05em -0.05em 0.2em rgba(10, 10, 10, 0.9);
}
/* N */

.char11 {
    z-index: 0;
    top: -.04em;
    margin-left: -.125em;
    text-shadow: -0.05em 0.05em 0.2em rgba(10, 10, 10, 0.9);
}