updates account design

server/static/css/main.css

@@ -1,3 +1,9 @@
+
+body *
+{
+    font-family: "Trebuchet MS", Helvetica, sans-serif;
+}
+
 .logins {
     height: 100px;
     width: 500px;
@@ -67,49 +73,17 @@
     text-align: left;
   }
 }
- /* The sidebar menu */
- .sidenav {
-    height: 100%; /* Full-height: remove this if you want "auto" height */
-    width: 160px; /* Set the width of the sidebar */
-    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
-    z-index: 1; /* Stay on top */
-    top: 0; /* Stay at the top */
-    left: 0;
-    background-color: #111; /* Black */
-    overflow-x: hidden; /* Disable horizontal scroll */
-    padding-top: 20px;
-  }
-  
-  /* The navigation menu links */
-  .sidenav a {
-    padding: 6px 8px 6px 16px;
-    text-decoration: none;
-    font-size: 25px;
-    color: #818181;
-    display: block;
-  }
-  
-  /* When you mouse over the navigation links, change their color */
-  .sidenav a:hover {
-    color: #f1f1f1;
-  }
-  
-  /* Style page content */
-  .main {
-    margin-left: 160px; /* Same as the width of the sidebar */
+
+/* Style page content */
+.main {
     padding: 30px 10px;
-  }
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
   
-  /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
-  @media screen and (max-height: 450px) {
-    .sidenav {padding-top: 15px;}
-    .sidenav a {font-size: 18px;}
-  } 
-
-
-  /* slider */
-
-   /* The switch - the box around the slider */
+/* The switch - the box around the slider */
 .switch {
     position: relative;
     display: inline-block;
@@ -170,4 +144,64 @@
   
   .slider.round:before {
     border-radius: 50%;
-  } 
+  }
+
+.container {
+    display: inline-flex;
+    justify-content: center;
+    align-items:center;
+    flex-direction: row;
+    padding: 0px 2rem 0px 2rem;
+}
+
+.container .button {
+   padding: 1rem 1.5rem 1rem 1.5rem;
+   font-size: 2rem;
+   margin: 4rem;
+   color: black;
+   text-decoration: none;
+}
+
+.container .button.logout {
+    background-color: #ddd;
+}
+
+.container .button.delete {
+    background-color: #b51409;
+}
+
+.sub.container {
+    width: 20rem;
+    justify-content: left;
+}
+
+.profile {
+    display: inline-flex;
+    justify-content: center;
+    align-items:center;
+    flex-direction: row;
+}
+
+.profile .picture {
+    width: 4rem;
+    height: 4rem;
+    border-radius: 50%;
+    margin-right: 2rem;
+}	
+
+.profile .name {
+    font-size: 3rem;
+    color: #333;
+}
+
+.sub.container .name {
+    margin-right: 1rem;
+}
+
+
+.sub.container .data {
+    background: #ddd;
+    padding: 5px;
+    border-radius: 5px; 
+    margin-right: 1rem;
+}