body {
    color:#666;
}
header {
    color:#fff;
    padding:2rem 0;
    background-image: linear-gradient(30deg, rgba(255, 100, 0, 1) 10%, rgba(200, 0, 255, 1) 90%);
}

main {
    padding:2rem 0;
}

footer {
    padding:2rem 0;
}

@media (max-width: 767px) {
}

h1{
    font-size: 130%;
}

h2 {
    font-size: 120%;
    position: relative;
    background: #f99;
    box-shadow: 0px 0px 0px 5px #f99;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
    margin-bottom:1rem;
}
  
h2:after {
    position: absolute;
    content: '';
    left: -7px;
    top: -7px;
    border-width: 0 0 15px 15px;
    border-style: solid;
    border-color: #fff #fff #f99;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

h3 {
    font-size: 110%;
    position: relative;
    display: inline-block;
    padding: 0 55px;
}
      
h3:before, h3:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 45px;
    height: 1px;
    background-color: black;
}
h3:before {
    left:0;
}
h3:after {
    right: 0;
}


main .tips {
    display: inline-block;
    position: relative;
    font-weight: normal;
}
main .tips a img {
    width:15px;
    display: inline;
}
main .tips .help_content {
    display: none;
    position: absolute;
    width:500px;
    top:1.5em;
    left:5px;
    z-index:999;
    border: #ccc solid 1px;
    border-radius: 5px;
    background: #fdd;
    padding: .5rem;
    text-align: left;
}
@media (max-width: 767px) {
    main .tips .help_content {
        position:fixed;
        top:10%;
        left:5%;
        width:90%;
    }
}