* {
    box-sizing: border-box;
}
body {
    font-family: Arial;
    margin: 0;
}
.nihong{
    color: white;
    text-shadow: 0px 0px 5px #00FFFF,0px 0px 5px #00FFFF,0px 0px 5px #00FFFF;
}
.header {
    padding: 80px;
    text-align: center;
    background: #7ec6bc;
    background: -webkit-linear-gradient(to right, #ebe717, #7ec6bc);
    background: linear-gradient(to right, #ebe717, #7ec6bc);

    color: white;
    text-shadow: 0px 0px 5px #00FFFF,0px 0px 5px #00FFFF,0px 0px 5px #00FFFF;
}
.header h1 {
    font-size: 40px;
    color: white;
    text-shadow: 0px 0px 5px #00FFFF,0px 0px 5px #00FFFF,0px 0px 5px #00FFFF;
}
.navbar {
    overflow: hidden;
    background: #051937;
    background: -webkit-linear-gradient(to right, #a8eb12, #00bf72, #008793, #004d7a, #051937);
    background: linear-gradient(to right, #a8eb12, #00bf72, #008793, #004d7a, #051937);
}
.navbar a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}
.navbar a.right {
    float: right;
}
.navbar a:hover {
    background-color: #ddd;
    color: black;
}
.row {  
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
}
.side {
    -ms-flex: 30%; /* IE10 */
    flex: 30%;
    background-color: #f1f1f1;
    padding: 20px;
}
.main {   
    -ms-flex: 70%; /* IE10 */
    flex: 70%;
    background-color: #01ffaa;
    padding: 20px;
    background: #f7f0ac;
    background: -webkit-linear-gradient(to bottom, #f0acf7, #acf7f0, #f7f0ac);
    background: linear-gradient(to bottom, #f0acf7, #acf7f0, #f7f0ac);

}
.fakeimg {
    background-color: rgb(255,255,255,0.3);
    width: 100%;
    padding: 20px;
}
.footer {
    padding: 20px;
    text-align: center;
    background: #aaa;
}
@media screen and (max-width: 700px) {
    .row {   
        flex-direction: column;
    }
}
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}