*{box-sizing:border-box}body{margin:0;padding:0;text-align:center;font-family:Roboto,sans-serif;color:#222;background:#f7f5f0}a{text-decoration:none;color:#999}a:hover{color:#63f}.main-nav{width:100%;background:#000;min-height:30px;padding:10px;position:fixed;text-align:center}.nav{display:flex;justify-content:space-around;font-weight:700;list-style-type:none;margin:0 auto;padding:0}.nav .name{display:block;margin-right:auto;color:#fff}.nav li{padding:5px 10px 10px 10px}.nav a{transition:all .5s}.nav a:hover{color:#fff}header{text-align:center;background:url(../images/Durban_1.jpg) no-repeat top center;background-size:cover;overflow:hidden;padding-top:60px}#exp-background{text-align:center;background:url(../images/Durban_2.jpg) no-repeat top center;background-size:cover;overflow:hidden;padding-top:60px}header{line-height:1.5}header .profile-image{margin-top:50px;width:150px;height:150px;border-radius:60%;border:5px solid grey;transition:ease-out .4s}header .profile-image:hover{transform:scale(1.5) rotate(360deg)}.tag{background-color:#000;color:#efefef;padding:10px;border-radius:5px;display:table;margin:10px auto}.location{background-color:#333;color:#0ff}.card{margin:30px;padding:20px 40px 40px;max-width:500px;text-align:left;background:#fff;border-bottom:4px solid #ccc;border-radius:6px;transition:all .5s}.card:hover{border-color:#f9f}ul.skills{padding:0;text-align:center}.skills li{border-radius:6px;display:inline-block;background:#ff9904;color:#fff;padding:5px 10px;margin:2px}.skills li:nth-child(odd){background:#0399ff}footer{width:100%;min-height:30px;padding:20px 0 40px 20px}footer .copyright{top:-8px;font-size:.75em}footer ul{list-style-type:none;margin:0;padding:0}footer ul li{display:inline-block}a.social{display:inline-block;text-indent:-9999px;margin-left:5px;width:30px;height:30px;background-size:30px 30px;opacity:.4;transition:all .5s}a.twitter{background-image:url(../images/twitter.svg)}a.linkedin{background-image:url(../images/linkedin.svg)}a.github{background-image:url(../images/github.svg)}a.social:hover{opacity:1}.clearfix{clear:both}@media screen and (min-width:720px){.flex{display:-ms-flexbox;display:flex;max-width:1200px;-ms-flex-pack:distribute;justify-content:space-around;margin:0 auto}header{min-height:470px}.nav{max-width:1200px;padding:0 30px}main{padding-top:20px}main p{line-height:1.6em}footer{font-size:1.3em;max-width:1200px;margin:40px auto}}