Loading page and landing page initial styling.

html/static/css/main.css

@@ -1,12 +1,12 @@
 /* VARIABLES */
 :root {
-    --color-primary: #c9cacf;
-    --color-secondary: #f2f2f3;
+    --color-primary: #a598be;
+    --color-secondary: #e7d6a2;
     --color-tertiary: #5260ff;
     --color-success: #2dd36f;
     --color-warning: #ffc409;
     --color-danger: #eb445a;
-    --color-dark: #3d3e43;
+    --color-dark: #19233e;
     --color-medium: #92949c;
     --color-light: #f4f5f8;
     --base-rem-size: 12px;
@@ -29,13 +29,35 @@ a {
     transition: color 0.3s;
 }
 
+select {
+    color: var(--color-secondary);
+    background-color: var(--color-dark);
+}
+
+#select-user {
+    width: 50%;
+    text-align: center;
+    font-size: 1.5rem;
+    padding: 0.8rem;
+    border-style: solid;
+    border-color: var(--color-secondary);
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+}
+
 .container {
-    width: 80%;
+    width: 70%;
     margin: 5rem auto;
     padding: 3rem;
     border-radius: 1rem;
-    box-shadow:  16px 16px 36px #626369,
-    -16px -16px 36px #c2c5cf;
+    box-shadow:  20px 20px 67px #0c101d,
+    -20px -20px 67px #2b3d6c;
+    display: flex;
+    gap: 2rem;
+    text-align: center;
+    flex-wrap: wrap;
+    align-items: stretch;
 }
 
 .container a {
@@ -44,4 +66,105 @@ a {
 
 .container a:hover {
     color: var(--color-secondary);
+}
+
+#page-content {
+    transition: opacity 0.5s ease-in-out;
+}
+
+#img-holder {
+    width: 40%;
+}
+
+#img-holder img {
+    width: 100%;
+}
+
+.panel {
+    width: calc(60% - 2rem);
+    position: relative;
+    min-width: 450px;
+}
+
+.panel h1 {
+    font-size: 4rem;
+    letter-spacing: 1.2px;
+    text-decoration: underline 1px;
+    text-underline-offset: 15px;
+    margin-bottom: 1rem;
+    margin-top: 0;
+    color: var(--color-secondary);
+}
+
+#page-content {
+    display: inline-block;
+    width: 100%;
+    margin-bottom: auto;
+    letter-spacing: 1.8px;
+    position: relative;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.btn {
+    --color: var(--color-primary);
+    --color2: var(--color-dark);
+    padding: 0.8em 1.75em;
+    background-color: transparent;
+    border-radius: 6px;
+    border: .3px solid var(--color);
+    transition: .5s;
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    z-index: 1;
+    font-size: 1rem;
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    color: var(--color);
+    margin-left: 2rem;
+   }
+   
+   .btn::after, .btn::before {
+    content: '';
+    display: block;
+    height: 100%;
+    width: 100%;
+    transform: skew(90deg) translate(-50%, -50%);
+    position: absolute;
+    inset: 50%;
+    left: 25%;
+    z-index: -1;
+    transition: .5s ease-out;
+    background-color: var(--color);
+    text-shadow: 1px;
+   }
+   
+   .btn::before {
+    top: -50%;
+    left: -25%;
+    transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
+   }
+   
+   .btn:hover::before {
+    transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
+   }
+   
+   .btn:hover::after {
+    transform: skew(45deg) translate(-50%, -50%);
+   }
+   
+   .btn:hover {
+    color: var(--color2);
+   }
+   
+   .btn:active {
+    filter: brightness(.7);
+    transform: scale(.98);
+   }
+
+.btn-holder {
+    position: absolute;
+    bottom: 1rem;
+    width: 100%;
 }