body, html {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

h1 {
    display: inline-block;
    font-family: 'Lobster', cursive;
    font-size: 4rem;
    margin: 20px 0px;
}

h1 i {
    font-size: 3rem;
}

span.rev { unicode-bidi:bidi-override; direction:rtl }
span.rev.location:before { content:"adanaC ,oiratnO ,hpleuG" }
span.rev.location:after { content:" :noitacoL" }
span.rev.email:before { content:"moc.liamg" }
span.rev.email:after { content:"@yp.renragj :liamE" }
span.rev.phone:before { content:"4562-323" }
span.rev.phone:after { content:" (316) 1+ :enohP" }

.icon {
    max-width: 35px;
    font-size: 1.5rem;
    text-align: center;
}

ul {
    text-decoration: none;
    /* list-style: symbols(cyclic "☸" "☼"); */
    list-style: symbols(cyclic "☸");
    padding-left: 20px;
}

ul ul {
    list-style: circle;
}

li {
    margin: 1rem 0;
}

a {
    text-decoration: none;
}

/* a:visited {
    color: rgb(0,0,238);
} */

a:hover {
    text-decoration: underline;
}

.skills {
    width: 30%;
    display: inline-block;
    vertical-align: top;
}

.work h3 {
    display: inline-block;
    width: 70%;
}

.date-range {
    display: inline-block;
    text-align: right;
    width: 29%;
}

@media only screen and (max-width: 800px) {
    body, html {
        max-width: 95%;
    }

    .work h3, .work span {
        display: block;
        text-align: left;
    }

    .skills {
        width: 49%;
    }

}

@media only screen and (max-width: 300px) {
    body, html {
        max-width: 95%;
    }

    .work h3, .work span {
        display: block;
        text-align: left;
    }

    
    .skills {
        display: block;
    }
}