@import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300');
body {
- background-color:grey;
+ background-color:#7F7977;
width:100%;
height:100%;
overflow-x:hidden;
position:absolute;
width:400px;
height:400px;
- left:calc(50% - 200px);
- top:calc(50% - 200px);
font-smooth:never;
-webkit-font-smoothing:none;
- background-color:black;
+ /*background-color:black;*/
+ transition:all .125s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+menu.middle {
+ left:calc(50% - 200px);
+ top:calc(50% - 400px);
+}
+
+menu.top {
+ left:calc(50% - 200px);
+ top:0px;
+}
+
+menu.left {
+ left:0px;
+ top:0px;
}
menu nav {
flex-direction:column;
}
-menu div {
+menu #avatar {
display:block;
width:300px;
height:300px;
margin-left:50px;
margin-right:50px;
- background-color:lightgrey;
+ /*background-color:lightgrey;*/
}
-menu div img {
+menu #avatar img {
width:256px;
height:256px;
margin:22px;
+ border-radius:50%;
+}
+
+menu #name {
+ width:100%;
+ height:50px;
+ font-size:3em;
+}
+
+menu #name h1 {
+ display:block;
+ width:100%;
+ height:50px;
+ line-height:50px;
+ text-align:center;
}
menu nav ul {
width:350px;
margin-left:25px;
margin-right:25px;
- height:100px;
+ height:50px;
}
menu nav ul li {
display:inline-block;
text-align:center;
width:25%;
- height:100px;
+ height:50px;
font-size:1.25em;
- line-height:100px;
+ line-height:50px;
+}
+
+menu nav ul li a:link, menu nav ul li a:visited {
+ text-decoration:none;
+ color:inherit;
+}
+
+menu nav ul li a:hover {
+ text-decoration:underline;
}