@import url("https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab");body{background:#eee}iframe{display:none}*:not(#userInfo){transition:all 1s ease-in-out}.content{background:white;box-shadow:0px 0px 40px -1px rgba(0,0,0,0.8);width:80%;border-radius:10px;padding:10px 20px;max-width:1000px;margin:50px auto}.content img{float:right;margin:20px 20px 6px;border-radius:10px;width:130px;box-shadow:0px 5px 15px -5px rgba(0,0,0,0.8);position:relative}.content #avatarContent{position:relative;display:inline-block;float:right}.content #userInfo{position:absolute;display:inline-block;top:14%;left:-93%;box-shadow:0px 5px 15px -2px rgba(0,0,0,0.5);background:#c2e1f5;color:#333;padding:10px;font-family:Roboto;font-size:14px;border:2px solid #88b7d5;display:none;width:150px;float:left}.content #userInfo::before,.content #userInfo::after{content:" ";width:0;height:0;position:absolute;display:inline-block;top:50%;left:100%}.content #userInfo::before{border:15px solid transparent;border-left-color:#88b7d5;margin-top:-15px}.content #userInfo::after{border:12px solid transparent;border-left-color:#c2e1f5;margin-top:-12px}.content #userInfo a{color:#333;font-weight:bolder;text-decoration:none;text-align:center;font-size:18px;display:inline-block;width:100%}.content #userInfo dl dt{float:left;text-align:left;clear:both;font-weight:bold}.content #userInfo dl dd{float:right;text-align:right}h1,h2,h3,h4,h5,h6{font-family:Roboto Slab}p,ul,li,ol,i,b,form{font-family:Roboto}form{padding:20px 50px 10px;width:300px;margin:15px auto;border-radius:20px;font-size:16px;line-height:28px;box-shadow:0 0 20px -2px #000}form h3{width:100%;text-align:center;margin:0px auto 30px}input[type="button"]{text-align:center;width:100px;margin:20px auto;display:block}input[type="text"],input[type="password"]{float:right;clear:right;width:150px}