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.button {
44 text-decoration: none;
45 font-size: 1em;
46 border-radius: 10px;
47 padding: 5px;
48 background-color: #1e2a3a;
49 color: #e0e0e0;
50 border: 1px solid #555;
51}
52
53button:hover,
54.button:hover {
55 background-color: #273950;
56 cursor: pointer;
57}
58
59.form-container {
60 display: grid;
61 grid-template-columns: repeat(2, 1fr);
62 gap: 20px;
63 max-width: 600px;
64 width: 100%;
65}
66
67.settings-group {
68 width: 300px;
69 padding: 10px;
70 display: flex;
71 flex-direction: column;
72 border: 1px solid #555;
73 border-radius: 10px;
74 background-color: #1e2a3a;
75 color: #e0e0e0;
76}
77
78.container {
79 text-align: center;
80 width: 650px;
81}
82
83.title {
84 padding: 5px;
85 font-size: 20px;
86 color: #e0e0e0;
87}
88
89.separator {
90 width: 100%;
91 height: 1px;
92 background-color: #555;
93 margin: 10px 0;
94}
95