style.css

:root{
    --paper-margin: 60px;
    --main-color: #4481eb;
    --my-gradient: linear-gradient(to right, var(--main-color) 0%, #04befe 100%);
}

body{
    margin: 0;
    font-family: 'Open Sans';
    letter-spacing: 0.05px;
    font-size: 1.05em;
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
}

header{
    filter: drop-shadow(0 8px #3333);
    position: relative;
}

header::before{
    content: "";
    display: block;
    background: var(--my-gradient);
    clip-path: polygon(0 0,100% 0,100% 70%,0 100%);
    height: 180px;
}

header > a {
    position: absolute;
    top: 50px;
    left: max(var(--paper-margin), (100vw - 900px)/2);
    font-size: 1.6em;
    font-family: 'Oxanium';
    color: inherit;
    text-decoration: inherit;
}

footer{
    filter: drop-shadow(0 -4px #3333);
    position: relative;
}

footer::before{
    content: "";
    display: block;
    background: var(--my-gradient);
    clip-path: polygon(0 30%,100% 0,100% 100%,0 100%);
    height: 180px;
}