@charset 'utf-8';


$mainColor: #f0f0f0;
$baseColor: #212121;

$volumeColor: darken(white, 10);
$volumeColor2: darken(rgb(67, 73, 73), 10);

$duration: .6s;

/*html,
body
{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

body
{
    background-color: #d0d0d0;
    color: #444;
    text-align: center;
    font-family: 'Open Sans';
    font-weight: 300;
    line-height: 1em;
}

h1
{
    font-size: 2.5em;
    margin: 2em 0 .5em;
    font-family: 'Kreon', serif;
    font-weight: 300;
}*/

em,
strong
{
    font-weight: 700;
}

.main
{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}



.svg-text {
    position: relative;
    transform: rotateX(30deg);
    font-size: 35em;
    font-family: 'dragon_is_comingregular', serif;
    transition: all $duration ease-in-out;
    color: $mainColor;
    &__shaded
    {
        text-shadow:    0 1px 1px rgba($baseColor, .15),
                        0 3px 10px rgba($baseColor, .15),
                        0 3px 20px rgba($baseColor, .35);
        &__sub
        {
            font-size: .05em;
            font-family: 'Open Sans', sans-serif;
        }
        &__stroke
        {
            stroke-dasharray: 3em .5em;
            stroke-dashoffset: 0;
            transition: all $duration ease-in-out;
        }
    }
    .bold
    {
        font-size: .5em;
        font-family: 'Kreon', sans-serif;
        font-weight: 700;
    }
  /*  &:hover
    {
        cursor: pointer;
        .svg-text__shaded__stroke
        {
            animation: offsetAnim ($duration * 7) ease-in-out infinite;
        }
    }*/
}

/*.hover
{
    display: inline-block;
    color: white;
    font-size: 8em;
    font-family: 'dragon_is_comingregular';
    text-align: left;
    text-shadow:    0 .005em 0 $volumeColor,
                    0 .010em 0 $volumeColor,
                    0 .015em 0 $volumeColor,
                    0 .020em 0 $volumeColor,
                    0 .025em 0 $volumeColor,
                    0 .025em .02em rgba($baseColor, .25),
                    0 .028em .2em rgba($baseColor, .45);
    transform-origin: 50% 50%;
    transform: translate(1.75em, .45em) rotate(30deg);
}*/