-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy paththe_constant_variable.css
141 lines (125 loc) · 3.31 KB
/
the_constant_variable.css
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/* General Body Styling */
body {
font-family: 'Avenir', sans-serif;
color: rgba(0, 31, 63, 0.85);
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f9f9f9;
font-size: 17px;
}
header {
text-align: center;
padding: 40px 20px 20px 20px; /* Controls the spacing inside the header */
color: #001f3f; /* Header text color */
background-color: transparent; /* Header background color */
}
h1 {
font-size: 2.5em; /* Header font size */
margin: 0; /* Controls spacing outside the header */
font-weight: 400; /* Header font weight (thickness) */
}
h2 {
font-size: 2em;
margin: 0;
font-weight: 400;
}
h3 {
font-size: 2em;
margin: 0;
font-weight: 400;
}
.subtitle {
font-size: 1.3em;
color: rgba(0, 31, 63, 0.85);
margin-bottom: 20px;
}
/* Content Wrapper */
.content-wrapper {
max-width: 900px;
margin: 0 auto;
padding: 20px;
text-align: justify;
}
/* Section Styling */
section {
margin-bottom: 40px;
}
section h2 {
font-size: 1.5em; /* Header font size */
margin: 0; /* Controls spacing outside the header */
font-weight: 400; /* Header font weight (thickness) */
}
section p {
font-size: 17px;
color: rgba(0, 31, 63, 0.85);
margin-bottom: 20px;
line-height: 1.6;
}
p {
margin: 0 0 15px 0; /* Controls spacing between paragraphs */
padding: 0; /* Removes padding inside the paragraph */
line-height: 1.8; /* Controls the vertical spacing between lines of text */
font-size: 17px; /* Font size for paragraph text */
color: rgba(0, 31, 63, 0.85); /* Text color */
}
/* Sankey Diagram Styling */
#sankey-container {
margin: 40px auto;
display: flex;
justify-content: center;
}
#sankey-container svg {
max-width: 100%;
}
.node text {
font-family: 'Avenir', sans-serif;
fill: #000;
}
.node rect {
cursor: pointer;
stroke-width: 1px;
}
.link {
fill: none;
stroke-opacity: 0.5;
}
/* Footer Styling */
footer {
text-align: center;
padding: 20px;
background-color: #f1f1f1;
color: rgba(0, 31, 63, 0.8);
font-size: 0.9em;
}
footer p {
margin: 0;
}
.navigation-buttons {
text-align: center;
margin: 30px 0; /* Adjust spacing around the button container */
}
.navigation-buttons button,
.navigation-buttons a button {
background-color: transparent; /* Transparent background */
color: #001f3f; /* Navy text */
border: 2px solid #001f3f; /* Navy border with crisp lines */
border-radius: 50%; /* Makes buttons circular */
padding: 0; /* Remove default padding */
width: 70px; /* Set width for circle */
height: 70px; /* Set height for circle */
font-size: 16px; /* Adjust font size */
font-family: 'Avenir', Arial, sans-serif; /* Keep the Avenir font */
cursor: pointer;
text-align: center; /* Center the text horizontally */
line-height: 70px; /* Perfectly vertically center the text */
transition: all 0.3s ease; /* Smooth transition for hover */
margin: 0 15px; /* Add horizontal spacing between buttons */
}
/* Hover state for buttons */
.navigation-buttons button:hover,
.navigation-buttons a button:hover {
background-color: #1e90ff; /* Light blue background on hover */
color: white; /* White text on hover */
border-color: #1e90ff; /* Change border to match background */
}