Card by Admin12121

1.wrapper {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  flex-direction: column;
6}
7
8article {
9  margin-top: 50px;
10  width: 90%;
11  max-width: 600px;
12  margin-left: auto;
13  margin-right: auto;
14  font-size: 1.125rem;
15  padding: 1.5rem;
16  background-color: #fff;
17  border-radius: 10px;
18  box-shadow: 0 15px 20px -10px rgba(0, 0, 0, 0.1);
19}
20
21article > * + * {
22  margin-top: 0.5em;
23}
24
25article:is(h1, h2, h3) + * {
26  margin-top: 0.5em;
27}
28
29article .h1 {
30  font-weight: 900;
31  font-size: 2rem;
32  line-height: 1.125;
33}
34
35article code {
36  background-color: #eee;
37  font-weight: 600;
38  font-family: monospace;
39}
40
41details {
42  position: relative;
43  right: 16px;
44  margin-top: 35px;
45  bottom: 16px;
46  color: #6b7280;
47  display: flex;
48  flex-direction: column;
49}
50
51details div {
52  background-color: #1e1e27;
53  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
54  padding: 1rem;
55  border-radius: 8px;
56  position: absolute;
57  height: 350px;
58  width: 400px;
59  bottom: calc(100% + 1rem);
60  right: -50%;
61  overflow: auto;
62  transform-origin: 100% 100%;
63  color: #95a3b9;
64}
65
66details div::-webkit-scrollbar {
67  width: 15px;
68  background-color: #1e1e27;
69}
70
71details div::-webkit-scrollbar-thumb {
72  width: 5px;
73  border-radius: 99em;
74  background-color: #95a3b9;
75  border: 5px solid #1e1e27;
76}
77
78details div > * + * {
79  margin-top: 0.75em;
80}
81
82details div p > code {
83  font-size: 1rem;
84  font-family: monospace;
85}
86
87details div pre {
88  white-space: pre-line;
89  border: 1px solid #95a3b9;
90  border-radius: 6px;
91  font-family: monospace;
92  padding: 0.75em;
93  font-size: 0.875rem;
94  color: #fff;
95}
96
97details[open] div {
98  -webkit-animation: scale 0.25s ease;
99  animation: scale 0.25s ease;
100}
101
102summary {
103  display: inline-flex;
104  margin-left: auto;
105  margin-right: auto;
106  justify-content: center;
107  align-items: center;
108  font-weight: 600;
109  padding: 0.75em 3em 0.75em 1.25em;
110  border-radius: 99em;
111  color: #fff;
112  background-color: #185adb;
113  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
114  list-style: none;
115  text-align: center;
116  cursor: pointer;
117  transition: 0.15s ease;
118  position: relative;
119}
120
121summary::-webkit-details-marker {
122  display: none;
123}
124
125summary:hover, summary:focus {
126  background-color: #1348af;
127}
128
129summary svg {
130  position: absolute;
131  right: 1.25em;
132  top: 50%;
133  transform: translateY(-50%);
134  width: 1.5em;
135  height: 1.5em;
136}
137
138@-webkit-keyframes scale {
139  0% {
140    transform: scale(0);
141  }
142
143  100% {
144    transform: scale(1);
145  }
146}
147
148@keyframes scale {
149  0% {
150    transform: scale(0);
151  }
152
153  100% {
154    transform: scale(1);
155  }
156}