/*global*/
:root {
    --f1: 'Piedra', cursive;
    --f2: 'Righteous', cursive;
    /* font-family: 'Piedra', cursive;
    font-family: 'Righteous', cursive; */
}

body {
    height: 1000px
}

a:focus,
a:hover,
a:focus
{
    color: inherit;
    text-decoration: none;
    outline: none
}
/*global*/
/*nav*/
nav.nav {
    background: var(--c5);
    position: relative;
}

.demo-icon.icon-tasks {
    color: var(--c1);
    cursor: pointer;
    font-size: 26px;
    position: absolute;
    top: 40px;
    left: 20px;
}

nav.nav .logo {
    margin: 40px 0 40px 40px;
    width: 208px;
}

nav.nav .logo img {
    width: 100%;
    cursor: pointer;
}

nav.nav ul {
    color: var(--c1);
    font-family: var(--f2);
    margin: 0;
    padding: 25px 0;
    transition: opacity .5s;
}

nav.nav ul.show {
    width: 100%;
    position: absolute;
    background: var(--c5);
    padding: 0
}

nav.nav ul li {
    display: inline-block;
    padding: 20px;
    cursor: pointer;
    transition: .5s;
}

nav.nav ul.show li {
    display: block;
    text-align: center;
    margin: 5px 0
}

nav.nav ul li a {
    color: #fff
}

nav.nav ul li:hover,
nav.nav ul li.active {
    background: var(--c2)
}
/*nav*/
/*footer*/
footer {
    background: var(--c5);
    padding-top: 30px;
}

footer h3 {
    color: var(--c1);
    margin: 30px 0;
    font-family: var(--f1);
}
footer p {
    color: var(--c3);
    font-family: var(--f2);
}

footer .copy-right {
    font-size: 12px;
    margin: 60px 0 20px
}
footer .copy-right p{
    margin: 0;
}
/*footer*/