/* HTML and body */
html, .pure-g [class *= "pure-u"] {
	font-family: $font-family-serif;
	font-size: $font-size-big;
}

@media (min-width: 684px) {
    html {
        font-size: $font-size-bigger;
    }
}

::selection,  {
    background-color: $color-main-lighter; /* WebKit/Blink Browsers */
}
::-moz-selection {
    background-color: $color-main-lighter; /* Gecko Browsers */
}

body {
	color: $color-gray-dark;
	background-color: $color-white;
	line-height: 1.618;
}

@media (max-width: 800px) {
    .wrapper {
        padding: 0 1rem;
    }
}

.pure-g {
    display: flex;
}

/* Global tags */
p { margin: 0 0 1.6rem; }

a {
    color: $color-link;
    text-decoration: none;
    position: relative;
    @include transition(all, .2s, ease-in-out);
    
    &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        bottom: 0;
        left: 0;
        background-color: $color-link-hover;
        visibility: hidden;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        @include transition(all, .2s, ease-in-out);
    }
    
    &:hover {
        color: $color-link-hover;
        
        &:before {
            visibility: visible;
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }
    }
}

/* Helpers */
.text-center { 
    text-align: center; 
}
.sr-only, .ninja {
    display: none;
}

.wrapper {
    max-width: $site-base-width;
    margin: 0 auto;
}

.pixelated {
    image-rendering:optimizeSpeed;             /* Legal fallback */
    image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
    image-rendering:crisp-edges;               /* CSS4 Proposed  */
    image-rendering:pixelated;                 /* CSS4 Proposed  */
    -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */    
}

/* Miscellanous */
.tweets iframe {
    width: 100% !important;
}
.embed-responsive {
    margin-bottom: 1.6rem;
}