1@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@200;300;400;500;700;900&display=swap');
2@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@200;300;400;500;700;900&display=swap');
3
4::-webkit-scrollbar {
5 width: 10px;
6}
7
8::-webkit-scrollbar-track-piece {
9 background-color: #393939;
10}
11
12::-webkit-scrollbar-thumb {
13 background-color: #FFFFFF;
14}
15
16html {
17 scrollbar-color: #ffffff #393939;
18 scrollbar-width: thin;
19}
20
21body {
22 position: relative;
23 margin: 0;
24 font-family: "Source Sans Pro";
25 color: black;
26 background: #ffffff;
27 font-weight: 200;
28 text-shadow: 0px 0px 5px white;
29 width: 100%;
30 height: 3234px; /*388.67+128+384+410+384+162.67+384+268.67+384+212+128*/
31}
32
33.section{
34 position: absolute;
35 font-family: "Space Mono";
36 font-size: 24px;
37 width: 960px;
38}
39.section-left{
40 left:128px;
41 text-align: left;
42}
43.section-right{
44 right:128px;
45 text-align: right;
46}
47
48/* Section spacing guide: 128px (initial) + (384px margin per section) */
49
50#section-one{
51 top:128px;
52}
53
54#section-two{
55 top:900.67px; /*388.67+128+384*/
56}
57
58#section-three{
59 top:1694.67px; /*388.67+128+384+410+384*/
60}
61
62#section-four {
63 top: 2241.34px; /*388.67+128+384+410+384+162.67+384*/
64}
65
66#section-five {
67 top: 2894px; /*388.67+128+384+410+384+162.67+384+268.67+384*/
68}
69
70.section-title{
71 font-size: 48px;
72 font-family: "Rubik";
73 font-weight: 700;
74}
75
76#background-shape-1{
77 position: absolute;
78 left: 300px;
79 top:300px;
80 border-radius: 512px;
81 width:1024px;
82 height:1024px;
83 background: linear-gradient(222deg, rgba(255,255,255,0) 0%, hsl(239deg 29% 51%) 100%);
84}
85
86#background-shape-2{
87 position: absolute;
88 right: 200px;
89 top:1824px;
90 border-radius: 0px;
91 width:512px;
92 height:512px;
93 background: linear-gradient(12deg, rgba(255,255,255,0) 0%, hsl(239deg 29% 51%) 100%);
94}
95
96#background-shape-3{
97 position: absolute;
98 right: 776px;
99 top:1824px;
100 border-radius: 0px;
101 width:256px;
102 height:256px;
103 background: linear-gradient(12deg, rgba(255,255,255,0) 0%, hsl(239deg 29% 51%) 100%);
104}
105
106#home-link {
107 position: absolute;
108 top: 40px;
109 right: 40px;
110}
111
112#home-link-a {
113 color: white;
114 text-decoration: none;
115 font-size: 32px;
116 font-weight: 400;
117}
118
119#home-icon {
120 width: 32px;
121 height: 32px;
122}
123
124@keyframes loadIn {
125 from{
126 opacity: 0;
127 transform: translateY(-10px);
128 }
129 to{
130 opacity: 1;
131 transform: translateY(0px);
132 }
133}
134
135@keyframes loadOut {
136 from{
137 opacity: 1;
138 transform: translateY(0px);
139 }
140 to{
141
142 opacity: 0;
143 transform: translateY(-10px);
144 }
145}