*, 
*:before, 
*:after { box-sizing: border-box; }
body {
    background-color: #072635;
    color: #f9f1d6;
    display: grid;
    font-family: 'Slabo 13px', serif;
    line-height: 1.4;
    margin: 0 auto;
    min-height: 100vh;
}
:focus { outline: auto 5px lightblue; }
::selection {
    color: #FFF;
    background: #f36;
}
a {
    text-decoration: none;
    transition: color .5s;
}
h1, h2 {
    font-family: 'Ultra', serif;
    font-weight: normal;
    font-size: 2.3rem;
    line-height: 1;
    margin-top: 0
}
img { max-width: 100%; }
header {
    background: #659898 url(../images/img-paper_wall.svg) repeat-x top;
    background-size: 20%;
    min-height: 200px;
    padding: 30px 0;
    position: relative;
    text-align: center;
}
/* header:before, .bottom-header:before {
    background: url(../images/bg.png);
    background-size: cover;
    content: "";
    mix-blend-mode: multiply;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
} */
.bottom-header:before { height: 80%; }
.bottom-header { 
    background-color: #659898;
    clip-path: url(#svgPath);
    margin-top: -5px;
}
.nahuer-logo {
    margin: 0 auto;
    max-width: 270px;
}
.nahuer-logo .st2 { fill:#f9f1d6}
.nahuer-logo .st3 { font-family: 'Ultra', serif; }
.nahuer-logo .st4 { font-size:11px; }

.compu-cat {
    display: block;
    margin: -80px auto -40px;
    max-width: 90%;
}

.compu-cat .st0{fill:#072635;stroke:#659898;stroke-width:.25;stroke-miterlimit:10}
.compu-cat .st2{fill:#f9f1d6}
.compu-cat .st3{fill:#659898}
.compu-cat .st4{fill:#072635}
.compu-cat .st5{fill:none;stroke:#072635;stroke-width:.25;stroke-miterlimit:10}

.contact-info {
    font-size: 1.4rem;
    text-align: center;
}
.contact-info a {
    color: #f9f1d6;
    display: block;
}
.contact-info a:hover { color: #072635; }
.icon-fb {     
    max-width: 25px;
    transform: translateY(-3px);
    vertical-align: middle; 
}
main { 
    margin: 20px auto;
    text-align: center;
}
main a { color: #659898; }
main a:hover { color: #f9f1d6; }
.link-container { 
    border: 1px dashed;
    border-radius: 10px;
    margin-bottom: 50px;
    padding: 1rem;
}
.link-container h1, .link-container h2 { margin-bottom: 1rem; }
.link-container a { color: #90d6d6; font-size: 1.3rem; text-decoration: underline; }
.side-main { 
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 auto; 
    justify-content: space-around;
}
aside {
    flex: 0 1 15%;
    margin: 10px 40px 30px;
    padding: 20px 40px;
    text-align: center;
}
aside h3 { margin: 0 0 5px; }
.qr {
    min-width: 250px;
}
.irregular-bg {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 78'%3E%3Cpath d='M3.4 2.8c3.2-5.5 13.7-.9 47.5-2 32-1 40.9-1.2 43 4.8 2.8 7.5-.1 7.6.5 18.4.8 13.6-.7 15.6-.5 29.3.1 6.8 1.1 25 1 30.1-.2 5.2-2.3 10.6-18.3 8.1-6.5-1-22.1-.8-28.6-.4-7.7.4-15.2-1.2-22.9-.5-8.3.8-12.7 1.2-21-.9-1.2-.3-2.4-.6-3.3-2.4-1.8-3.2.5-12.2.1-17.9-.8-10.6 1-21.7.8-43.7-.2.1-1.2-17.9 1.7-22.9z' fill='%23031923'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    padding: 15px 20px;
}
.paypal {
    background-size: cover;
    border-radius: 20px;
    margin-top: 10px;
    padding: 15px 15px 5px;
}
.paypal:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95.2 92.2'%3E%3Cpath d='M3.4 2.8c3.2-5.5 13.7-.9 47.5-2 32-1 40.9-1.2 43 4.8 2.8 7.5-.1 7.6.5 18.4.8 13.6-.7 15.6-.5 29.3.1 6.8 1.1 25 1 30.1-.2 5.2-2.3 10.6-18.3 8.1-6.5-1-22.1-.8-28.6-.4-7.7.4-15.2-1.2-22.9-.5-8.3.8-12.7 1.2-21-.9-1.2-.3-2.4-.6-3.3-2.4-1.8-3.2.5-12.2.1-17.9-.8-10.6 1-21.7.8-43.7-.2.1-1.2-17.9 1.7-22.9z' fill='%23f9f1d6'%3E%3C/path%3E%3C/svg%3E");
    transition: all ease .2s;
}
footer {
    background-color: #031923;
    font-size: .8rem;
    padding: 5px 15px;
    text-align: right;
    width: 100%;
}
.ojo-izq, .ojo-der {
    /* animation: moveEye 10s 2s steps(1) infinite; */
    display: none;
}

.cat-face {
    animation: catFace 4s 2s steps(1) infinite;
    transform-box: fill-box;
    transform-origin: center;
}

/* @keyframes moveEye {
    30% { transform: translateY(3px); }
    40% { transform: translate(-2px, 3px); }
    50% { transform: translate(0, 0); }
} */
@keyframes catFace {
    30% { transform: rotate(-2deg); }
    40% { transform: rotate(2deg); }
}

@media (min-width: 750px) {
    .contact-info {
        margin: -80px auto 0;
        max-width: 700px;
        text-align: right;
    }
    .compu-cat {
        max-width: 700px;
    }
    .flex-wrapper {
        display: flex;
        margin: 0 auto;
        max-width: 1600px;
    }
    aside {
        border-left: 4px solid #031923;
    }
    header:after, .bottom-header:after {
        background: url(../images/bg-noise.png) repeat;
        content: "";
        mix-blend-mode: multiply;
        pointer-events: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}