1.page {
2  position: relative;
3  box-sizing: border-box;
4  max-width: 300px;
5  font-family: cursive;
6  font-size: 20px;
7  border-radius: 10px;
8  background: #fff;
9  background-image: linear-gradient(#f5f5f0 1.1rem, #ccc 1.2rem);
10  background-size: 100% 1.2rem;
11  line-height: 1.2rem;
12  padding: 1.4rem 0.5rem 0.3rem 4.5rem;
13}
14
15.page::before,
16.page::after {
17  position: absolute;
18  content: "";
19  bottom: 10px;
20  width: 40%;
21  height: 10px;
22  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.7);
23  z-index: -1;
24  transition: all 0.3s ease;
25}
26
27.page::before {
28  left: 15px;
29  transform: skew(-5deg) rotate(-5deg);
30}
31
32.page::after {
33  right: 15px;
34  transform: skew(5deg) rotate(5deg);
35}
36
37.page:hover::before,
38.page:hover::after {
39  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
40}
41
42.margin {
43  position: absolute;
44  border-left: 1px solid #d88;
45  height: 100%;
46  left: 3.3rem;
47  top: 0;
48}
49
50.page p {
51  margin: 0;
52  text-indent: 1rem;
53  padding-bottom: 1.2rem;
54  color: black;
55  line-height: 20px;
56}