@charset 'utf-8';
@import 'reset.css';
@import 'fonts/Aileron.css';        /* Replacement for Helvetica Neue */
@import 'fonts/OpenSans.css';       /* Headers */
@import 'fonts/DejaVuSansMono.css'; /* Replacement for Menlo (OS X) */
@import 'root_vars.css';
@import 'defaults.css';
@import 'viewport.css';

/**
 * Stylesheet for: iefdev.se
 * --------------------------------
 * Copyright: (c) 2016-2020 Eric F
 */

/* overlay */
body:after {
    content: '';
    position: fixed;
    top: 0px; left: 0px;
    bottom: 0px; right: 0px;
    width: 101%; height: 101%;
    background: var(--overlay-color);
    overflow: hidden;
}

body {
    background: var(--overlay-color) url(../images/bg_cover.jpg) fixed no-repeat center;
    background-size: cover;
    color: var(--default-text-color);
}

header > h1 {
    font: 300 normal 11rem/1.1em var(--main-font-family);
    text-align: center;
    margin: 10% auto 1.5rem;
    color: var(--main-bgnd-color);
}

.content > h1, h2, h3, h4 {
    font: 300 normal var(--main-header-size)/var(--main-line-height) var(--header-font-family);
    margin: 1.5em 0 .5em;
    padding-bottom: 2px;
    color: var(--header-color);
    text-transform: capitalize;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.content > h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }
.content > h1 { text-shadow: 0px 3px 2px var(--text-shadow-header); }

h2 { font-size: var(--h2-header-size); border-bottom: 1px solid var(--content-border-color); }
h3 { font-size: var(--h3-header-size); font-weight: 300; }
h4 { font-size: var(--h4-header-size); font-weight: 400; }

p {
    font: 400 normal var(--main-text-size)/var(--main-line-height) var(--main-font-family);
    color: var(--main-text-color);
    margin: 0 0 1.2rem;
}

p:last-of-type { margin: 0; }
p.ita { font-style: italic; }
p.ita.info { margin: 2em 0; color: var(--info-text-color); }

a, a:active, a:visited, a:hover {
    color: var(--link-color);
    border-bottom: 1px solid transparent;
}
a:hover { border-bottom: 1px solid var(--link-underline); }

hr { border-top: 1px dashed var(--content-border-color); margin: 1.5rem 0; }

.wrapper {
    position: relative;
    padding: 1.5em 1.5em 3em;
    margin: 0 auto;
    width: 80%;
    min-width: 350px;
    max-width: 600px;
    z-index: 1;
}

.content { padding: 2rem 1rem; margin: 0rem 0 1rem; }
footer { margin: 4rem 0 1rem; }
footer p {
    color: var(--footer-text-color);  /* #aaa */
    font-size: var(--main-text-size);
}

.content, footer {
    /* Better antialiased fonts on dark bakgrounds */
    text-shadow: 0 0 0 var(--text-shadow);
}

nav { width: 100%; margin: 0 0 3rem; }
nav > ul, .content {
    background: var(--main-bgnd-color);
    border: 1px solid var(--element-border-color);
    border-radius: 4px;
}

/* Flexbox Menu */
nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*flex-direction: row;
    flex-wrap: wrap;*/
    flex-flow: row wrap;
}

nav > ul li {
    list-style: none;

    flex: 1 0 auto;
    flex-grow: 1;

    text-align: center;
    width: 128px;
    height: 150px;
}

nav > ul li:hover { background-color: var(--main-bgnd-hover) !important; }
nav > ul li a { display: block; height: 100%; border: 0 !important; padding: 0; }

pre, code, samp { font: 400 normal 1.0em/var(--main-line-height) var(--mono-font-family); }

li.twitter { background: url(../images/icon_twitter.png) center center no-repeat; }
li.gitlab { background: url(../images/icon_gitlab.png) center no-repeat; }
li.blog { background: url(../images/icon_octopress.png) center center no-repeat; }

li.twitter, li.gitlab, li.blog { background-size: 128px; } /* images are 256x205px */


/* Inleed & Iana logos */
div.inleed.logo, div.iana.logo {
    float: right;
    width: 300px;
    height: 111px;
    margin: 0 0 1rem 2rem;
    background: transparent url(../images/inleed_logo.png) no-repeat center center;
    background-size: cover;
    border: 1px solid var(--content-border-color);
    border-radius: 1rem;
    box-shadow: 0 3px 6px -1px var(--box-shadow);
}

div.iana.logo {
    background: transparent url(../images/iana_logo.svg) no-repeat center center;
    border: none;
    box-shadow: none;
}

span.twitter-follow {
    float: right;
    width: 117px;
    height: 20px;
    background: transparent url(../images/twitter_follow.svg) no-repeat 0 0;
}

div.inleed.logo a,
div.iana.logo a,
span.twitter-follow a {
    border: none !important;
    display: block;
    height: 100%;
}


/* Media */
@media only screen and (max-width: 760px) {
    .wrapper { width: 100%; }
    div.inleed.logo { float: none; margin: 0 auto 1rem; }
}

@media only screen and (max-width: 420px) {
    header > h1 { font-size: 7rem; }
    nav > ul li { width: 100%; height: 128px; }
    nav > ul { flex-direction: column; }
}