my personal website!
gayfamicom.lol
gayfamicom.lol
website
web
1 body {
2 background-color: #1e1e2e;
3 color: #cdd6f4;
4 font-family: "Iosevka Aile", monospace;
5 margin: 10px auto;
6 max-width: 1200px;
7 min-width: 400px;
8 }
9 .divider {
10 border-top: 2px dashed #313244;
11 margin: 20px auto;
12 }
13 .main {
14 background-color: #11111b;
15 margin-top: 20px;
16 border: 4px solid #ca9ee6;
17 border-radius: 25px;
18 padding: 20px;
19 box-shadow: 10px 5px 10px #11111b;
20 }
21 footer {
22 font-family: "Iosevka Aile", monospace;
23 color: #cdd6f4;
24 font-size: 20px;
25 background-color: #11111b;
26 padding: 15px;
27 border: 4px solid #ca9ee6;
28 border-radius: 25px;
29 margin-top: 10px;
30 box-shadow: 10px 5px 10px #11111b;
31 }
32
33 /* dd container */
34 .dropdown {
35 display: inline-block;
36 position: relative;
37 outline: none;
38 }
39
40 /* button */
41 .dropbtn {
42 color: #ca9ee6;
43 border: 2px dashed #ca9ee6;
44 border-radius: 15px;
45 background: #1e1e2e;
46 padding: 8px;
47 }
48
49 /* dd content */
50 .dropdown .dropdown-content {
51 position: absolute;
52 top: 50%;
53 margin-top: 6px;
54 border: 1px solid #cba6f7;
55 border-radius: 15px;
56 background-color: #11111b;
57 min-width: 100%;
58 box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
59 z-index: 100000;
60 visibility: hidden;
61 opacity: 0;
62 transition: 0.2s ease-in-out;
63 }
64 .dropdown-content a {
65 color: #cdd6f4;
66 padding: 6px 10px;
67 display: block;
68 text-decoration: none;
69 transition: 0.2s ease-out;
70 text-align: center;
71 }
72 .dropdown-content a:hover {
73 background-color: #45475a;
74 }
75
76 /* show dd content */
77 .dropdown:focus .dropdown-content {
78 outline: none;
79 transform: translateY(18px);
80 visibility: visible;
81 opacity: 0.9;
82 }
83
84 .dropbtn:hover, .dropdown:focus .dropbtn {
85 background-color: #cba6f7;
86 color: #1e1e2e;
87 border-color: #1e1e2e;
88 height: auto;
89 transition: ease-in-out 0.5s;
90 padding: 10px;
91 font-size: 16px;
92 }
93
94 /* mask to close menu by clicking on the button */
95 .dropdown .db2 {
96 position: absolute;
97 top: 0;
98 right: 0;
99 bottom: 0;
100 left: 0;
101 opacity: 0;
102 cursor: pointer;
103 z-index: 10;
104 display: none;
105 }
106 .dropdown:focus .db2 {
107 display: inline-block;
108 }
109 .dropdown .db2:focus .dropdown-content {
110 outline: none;
111 visibility: hidden;
112 opacity: 0;
113 }