adjusted css for semantics and addition of profile view

redbrickboard/accounts/templates/accounts/login.html

@@ -5,8 +5,8 @@
 {% endblock %}
 
 {% block content %}
-<div id="login-container" class="d-flex my-5">
-    <div id="login-form" class="mx-auto px-3 py-4 bg-white" style="width: 23rem;">
+<div id="rbb-container container" class="d-flex my-5">
+    <div id="rbb-section" class="mx-auto px-3 py-4 bg-white" style="width: 23rem;">
         <p class="h1">Log in</p>
         <form method="POST" autocomplete="off">
             {% csrf_token %}

redbrickboard/static/css/custom.css

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inria+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
 
 :root {
      --theme-prusian-blue: #003049;
@@ -13,6 +14,16 @@
      font-size: 1rem;
 }
 
+.blue-text {
+     color: var(--theme-prusian-blue);
+}
+
+.body-text {
+     font-family: 'Inria Sans';
+     font-weight: 400;
+     font-style: normal;
+}
+
 body {
      background-color: var(--theme-dutch-white);
      background-image: url("/static/images/Continuous Background.png");
@@ -88,12 +99,12 @@ body {
      height: 100vh;
 }
 
-#login-container {
+#rbb-container {
      align-items: center;
      justify-content: center;
 }
 
-#login-form {
+#rbb-section {
      border-radius: 0.625rem;
      border: 1px solid #000;
      background: #FFF;
@@ -116,4 +127,18 @@ body {
      border-radius: 0.3125rem;
      background: #DF4E4E;
      border-color: #DF4E4E;
-}
\ No newline at end of file
+}
+
+.profile-pill {
+     padding: .35em .65em;
+     font-size: .75em;
+     font-weight: 700;
+     line-height: 1;
+     color: #fff;
+     text-align: center;
+     white-space: nowrap;
+     vertical-align: baseline;
+     border-radius: .25rem;
+     background-color: var(--theme-bright-red);
+}
+