:root {
    --header:'Tilt Warp', serif;
    --body: 'Anybody', serif;
}

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    background: linear-gradient(145deg, red, crimson, maroon);
    margin-top: 10%;
}

.content {
    width: 90%;
    margin: 0 auto;
    padding: 5% .5%;
    padding-top: 5%;
    border-radius: 25px;
    border: 4px dashed;
    background: linear-gradient(145deg, white, snow, whitesmoke);
}

h1, h2 {
    font-family: var(--header);
}

h3, h4, li {
    font-family: var(--body);
}

ul, h1, h2, h3, h4 {
    margin-top: .5%;
    margin-bottom: .5%;
}

ul {
    list-style: none;
}

h1 {
    font-size: 550%;
    margin-bottom: 0;
    text-decoration: 5px underline;
}

h2 {
    font-size: 200%;
}

h2.first {
    font-size: 300%;
    margin-top: 0;
}

h3 {
    font-size: 150%;
}

h4 {  
    font-size: 100%;
}

h4.last {
    width: 78%;
    font-size: 115%;
    color: red;
    margin-top: 2%;
    font-style: italic;
    background: peachpuff;
    text-decoration: 2px crimson underline;
}

li {
    font-size: 100%;
    line-height: 25px;
}

span {
    text-decoration: 3px underline;
    background: yellow;
}

li i {
    background: yellow;
}

h4 i {
    background: yellow;
    text-decoration: underline;
}