/* =========================
        Header
========================= */

header{

    background:linear-gradient(135deg,#d32f2f,#b71c1c);
    color:#fff;
    text-align:center;
    padding:30px 20px;

}

header h1{

    font-size:42px;
    margin-bottom:10px;
    letter-spacing:1px;

}

header p{

    font-size:18px;
    margin:0;

}


/* =========================
        Navigation
========================= */

nav{

    width:100%;
    background:#222 !important;
    padding:15px 0;
    text-align:center;
    overflow:hidden;

}

nav a{

    display:inline-block;
    color:#ffffff !important;
    text-decoration:none;
    padding:12px 18px;
    margin:5px;
    font-size:16px;
    font-weight:bold;
    border-radius:6px;
    transition:0.3s;

}

nav a:hover{

    background:#d32f2f;
    color:#ffffff !important;

}

nav a:visited{

    color:#ffffff;

}

nav a:active{

    background:#b71c1c;
    color:#ffffff;

}


/* =========================
        Mobile
========================= */

@media(max-width:768px){

    nav{

        padding:10px;

    }

    nav a{

        display:block;
        width:90%;
        margin:8px auto;

    }

    header h1{

        font-size:32px;

    }

    header p{

        font-size:16px;

    }

}