body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: black;
}

.header {
    padding: 80px;
    text-align: center;
    background-image: linear-gradient(to top, black, #E34234);
    color: #E34234;
}
.header h1 {
    font-size: 40px;
}
.navbar {
    overflow: hidden;
    background-image: linear-gradient(to right, #444444, #000000);
}
.navbar a {
    float: left;
    display: block;
    color: #E34234;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}
.navbar a.right {
    float: right;
}
.navbar a:hover {
    background-image: linear-gradient(to right, #767676, white);
    color: #E34234
}
* {
    box-sizing: border-box;
}
.row {
    display: flex;
    flex-wrap: wrap;
}
.side {
    flex: 30%;
    background-image: linear-gradient(to right, #000000, #222222);
    padding: 20px;
}
.side h2 {
    color: white;
}
.side p {
    color: #E34234
}
.side a {
    color: red;
}
.main {
    flex: 70%;
    background-image: linear-gradient(to left, #000000, #222222);
    padding: 20px;
}
.main h1 {
    color: white;
}
.main h2 {
    color: #E34234;
}
.main p {
    color: #E34234
}
@media screen and (max-width: 700px) {
    .row {
        flex-direction: column;
    }
}
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}
.footer {
    padding: 20px;
    text-align: center;
    background-image: linear-gradient(to top, #E34234, #000000);
    color: #E34234
}
.contentmain {
    background-image: linear-gradient(to right, #222222, #000000);
    padding: 20px;
}
.contentmain h1 {
    text-align: center;
    color: white;
}
.contentmain h2 {
    color: #E34234;
}
.contentmain p {
    color: #E34234;
}
.contentmain a {
    color: red;
}