dannybdev.tngl.sh
Test Profile
1:root {
2 --blue: #2c4c5c;
3 --gray: #b8bfc1;
4 --yellow: #f3e308;
5 --lightBlue: #6c8494;
6 --yellowGreen: #9cac54;
7 --lightGreen: #97cd97;
8 --hackerGreen: #70ffaf;
9 --teal: #a7f0dd;
10 --white: #f4fcfb;
11 --black: #000000;
12
13 /*Margins*/
14 --margin-PC: 3.5rem;
15 --margin-Tablet: 2.5rem;
16 --margin-Phone: 1.5rem;
17 /*Breakpoints*/
18 --BreakL: 1328px;
19 --BreakM: 900px;
20 --BreakS: 672px;
21}
22
23* {
24 margin: 0;
25 padding: 0;
26 box-sizing: border-box;
27 scroll-behavior: smooth;
28}
29html,
30body {
31 min-height: 100vh;
32}
33body {
34 background: var(--white);
35 transition: 0.3s;
36 font-family: "Slabo 13px", serif;
37 font-style: normal;
38}
39
40span {
41 color: var(--white);
42}
43
44.fade {
45 opacity: 0;
46 transform: translateY(20px);
47 transition:
48 opacity 0.5s ease,
49 transform 0.5s ease;
50}
51
52.fade.visible {
53 opacity: 1;
54 transform: translateY(0);
55}
56
57#Intro {
58 display: block;
59 justify-content: center;
60 text-align: center;
61 height: 26rem;
62 margin: 0 auto;
63 background: url("/Images/homepage-background.avif");
64 background-size: cover;
65 height: 72vh;
66
67 @media (min-width: 900px) {
68 text-align: left;
69 padding: 0 26px;
70 height: 40rem;
71 padding-top: 7rem;
72 }
73}
74
75.Fade-In {
76 transition:
77 opacity 1.5s,
78 translate 1.5s;
79 opacity: 1;
80 translate: 0 0;
81
82 @starting-style {
83 opacity: 0;
84 translate: 0 30px;
85 }
86}
87
88#Intro h1 {
89 font-size: 1.6rem;
90 list-style: none;
91 color: var(--black);
92 margin: 0 1rem;
93 padding-top: 3rem;
94
95 @media (min-width: 600px) {
96 font-size: 1.8rem;
97 }
98
99 @media (min-width: 900px) {
100 line-height: 4.5rem;
101 font-size: 3.75rem;
102 }
103}
104
105#My-Dialog {
106 position: absolute;
107 top: 50%;
108 margin: 0 auto;
109 padding: 1.2rem;
110 line-height: 1.5rem;
111
112 @media (min-width: 672px) {
113 max-width: 35%;
114 }
115}
116
117.No-AI {
118 font-size: 1.2rem;
119 margin: 0 1rem;
120 margin-top: var(--margin-Phone);
121 font-weight: bold;
122}
123
124.No-AI-Button {
125 background-color: transparent;
126 border: none;
127 border-bottom: 2px solid var(--yellow);
128 cursor: pointer;
129 font-size: 1.2rem;
130 color: var(--blue);
131}
132
133dialog[open] {
134 opacity: 1;
135
136 @starting-style {
137 opacity: 0;
138 }
139}
140
141dialog {
142 transition:
143 opacity 500ms ease-out,
144 display 600ms allow-discrete,
145 overlay 600ms allow-discrete;
146 opacity: 0;
147}
148
149.Close-Button {
150 display: flex;
151 justify-content: center;
152 margin: 0 auto;
153 margin-top: 0.5rem;
154 padding: 0.5rem;
155 border-radius: 10px;
156 background-color: var(--blue);
157 color: var(--yellow);
158 cursor: pointer;
159}
160
161#Intro h2 {
162 color: var(--black);
163 margin-top: var(--margin-Phone);
164 margin-left: 2rem;
165 margin-right: 2rem;
166 line-height: 2rem;
167
168 @media (min-width: 672px) {
169 margin-top: var(--margin-Tablet);
170 }
171}
172
173@media (min-width: 900px) {
174 #Intro h2 {
175 font-size: 2.5rem;
176 margin-left: 1rem;
177 }
178}
179.Facts-Background {
180 background-color: var(--yellow);
181 transform: skew(14deg);
182 width: 70%;
183 display: flex;
184 justify-content: center;
185 margin: 0 auto;
186 margin-top: var(--margin-Phone);
187
188 @media (min-width: 900px) {
189 margin: 0;
190 margin-top: 3rem;
191 margin-left: 1rem;
192 }
193}
194#Facts {
195 font-size: 1rem;
196 transform: skew(-14deg);
197 opacity: 0;
198 transition: opacity 0.5s ease;
199 padding: 1.5rem;
200 font-weight: bold;
201 color: var(--blue);
202
203 @media (min-width: 1328px) {
204 font-size: 2rem;
205 }
206}
207/* .Button-Container {
208 display: flex;
209 flex-direction: column;
210 justify-content: center;
211 align-items: center;
212} */
213/*
214.Button {
215 font-size: 1rem;
216 padding: 0.6rem;
217 border-radius: 30px;
218 margin-top: 2rem;
219 border: 2px solid black;
220 transition: transform 0.3s ease;
221 cursor: pointer;
222 width: 10rem;
223
224 @media (min-width: 1328px) {
225 font-size: 1.4rem;
226 padding: 1rem;
227 width: 13rem;
228 }
229}
230
231@media (min-width: 600px) {
232 .Button-Container {
233 flex-direction: row;
234 gap: 2rem;
235 }
236}
237
238@media (min-width: 900px) {
239 .Button-Container {
240 margin-top: none;
241 }
242} */