A browser source overlay for winter vibes for your Live Streams or Videos
treybastian.com
1@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');
2
3* {
4 font-family: "Pixelify Sans", sans-serif;
5 font-style: normal;
6}
7
8body {
9 background-color: #091e36;
10 min-width: 100vw;
11 min-height: 100vh;
12 height: 100%;
13 width: 100%;
14 margin: 0;
15 padding: 0;
16 display: flex;
17 justify-content: center;
18 align-items: center;
19}
20
21h1 {
22 color: #e0e0e0;
23 font-weight: 100;
24}
25
26input {
27 border-radius: 10px;
28 border: 1px solid #555;
29 padding: 5px;
30 background-color: #1c2a3e;
31 color: #e0e0e0;
32}
33
34select {
35 border-radius: 10px;
36 padding: 5px;
37 border: 1px solid #555;
38 background-color: #1c2a3e;
39 color: #e0e0e0;
40}
41
42button {
43 border-radius: 10px;
44 padding: 5px;
45 background-color: #1e2a3a;
46 color: #e0e0e0;
47 border: 1px solid #555;
48}
49
50button:hover {
51 background-color: #273950;
52 cursor: pointer;
53}
54
55.form-container {
56 display: grid;
57 grid-template-columns: repeat(2, 1fr);
58 gap: 20px;
59 max-width: 600px;
60 width: 100%;
61}
62
63.settings-group {
64 width: 300px;
65 padding: 10px;
66 display: flex;
67 flex-direction: column;
68 border: 1px solid #555;
69 border-radius: 10px;
70 background-color: #1e2a3a;
71 color: #e0e0e0;
72}
73
74.container {
75 text-align: center;
76 width: 650px;
77}
78
79.title {
80 padding: 5px;
81 font-size: 20px;
82 color: #e0e0e0;
83}
84
85.separator {
86 width: 100%;
87 height: 1px;
88 background-color: #555;
89 margin: 10px 0;
90}