blog.bythewood.me-wagtail

 1body {
 2  min-height: 100vh;
 3  display: flex;
 4  flex-direction: column;
 5}
 6
 7.logo {
 8  content: "";
 9  display: block;
10  background-image: linear-gradient(
11    to right,
12    rgb(14, 63, 244) 0px,
13    rgb(132, 43, 255) 100%
14  );
15  width: 36px;
16  height: 36px;
17  margin-top: auto;
18  margin-bottom: auto;
19  transition: transform 0.2s ease-in-out;
20
21  &:hover {
22    transform: rotate(15deg) scale(1.1);
23  }
24}
25
26footer {
27  padding-top: 6rem;
28
29  .links {
30    padding-top: 6rem;
31  }
32}
33
34.footer-plane {
35  position: relative;
36  width: 100%;
37  height: 300px;
38  overflow: hidden;
39  z-index: 10;
40  perspective: 350px;
41
42  &-overlay {
43    width: 100%;
44    height: 100%;
45    position: absolute;
46    z-index: 11;
47    background: radial-gradient(
48      ellipse at 50% 50%,
49      rgba(10, 14, 15, 0) 0,
50      rgb(0, 0, 0) 80%
51    );
52  }
53
54  @keyframes footer-plane-keyframes {
55    0% {
56      transform: rotateX(45deg) translateY(-50%);
57    }
58
59    to {
60      transform: rotateX(45deg) translateY(0);
61    }
62  }
63
64  &-grid {
65    position: relative;
66    width: 100%;
67    height: 200%;
68    background-image: linear-gradient(
69        90deg,
70        hsla(0, 0%, 50%, 0.5) 1px,
71        transparent 0
72      ),
73      linear-gradient(180deg, hsla(0, 0%, 50%, 0.5) 1px, transparent 0);
74    background-size: 40px 30px;
75    background-repeat: repeat;
76    transform-origin: 100% 0 0;
77    animation: footer-plane-keyframes 17s linear infinite;
78  }
79}