File size: 1,835 Bytes
5649a75
 
 
 
e71a2ef
fced295
 
 
 
 
 
b780a2e
fced295
 
b780a2e
fced295
 
 
 
 
 
 
 
e71a2ef
 
 
 
 
5649a75
e71a2ef
 
 
 
 
 
5649a75
e71a2ef
 
 
 
 
 
 
 
 
 
c3cdf77
 
fced295
c3cdf77
fced295
c3cdf77
fced295
c3cdf77
 
 
 
fced295
 
 
 
c3cdf77
fced295
c3cdf77
fced295
c3cdf77
 
 
5649a75
7afbbc5
784b5c6
 
5649a75
 
fced295
 
 
 
5649a75
 
 
 
 
 
 
 
 
 
784b5c6
5649a75
 
 
 
 
784b5c6
e71a2ef
fced295
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #15171f;
  /* Deeper dark background */
  --foreground: #E0E0E0;
  /* Light gray text */
  --sidebar-background: #14141b;
  /* Darker sidebar background */
  --primary: #1f202a;
  --secondary: #2a2b3b;
  /* Soft secondary background for content */
  --accent: #4a557f;
  --hover-accent: #5c608a;
  /* Slightly lighter accent color for hover */
  --button-background: #3a3b4c;
  /* Button background */
  --button-hover: #2D2D38;
  /* Darker button hover */
  --shadow-dark: rgba(0, 0, 0, 0.15);
  /* Shadow for depth */
}

html,
body {
  max-width: 100vw;
  height: 100%;
  overflow-x: hidden;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.025);
  }
}

.user-info-card {
  background-color: var(--secondary);
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 4px 12px var(--shadow-dark);
  text-align: center;
  width: 90%;
  /* Adjust for smaller screens */
  max-width: 500px;
  /* Limit for larger screens */
  margin-bottom: 30px;
  transition: all 0.3s ease-in-out;
}

.logout-button {
  padding: 12px 24px;
  background-color: var(--button-background);
  color: var(--foreground);
  border: none;
  border-radius: 8px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.logout-button:hover {
  background-color: darken(var(--button-background), 10%);
}

.page-content {
  animation: fadeIn .5s ease-in-out, pulse .3s ease-in-out;
}