Issues:
1:root {
2
--color-blue: #0057b7;
3
--color-yellow: #ffd700;
4
--color-light: #f5f5f5;
5
--ff-body: 'Smooch Sans', sans-serif;
6
--shadow-link-flag: 0px 6px 10px -3px var(--color-yellow), 0px -6px 10px -3px var(--color-blue);
7}
8
9* {
10 box-sizing: border-box;
11 font-family: var(--ff-body);
12 letter-spacing: .03em;
13 margin: 0;
14 overflow: hidden;
15}
16@media screen and (prefers-reduced-motion) {
17 #home>*:hover,
18 i:hover,
19 #support:hover,
20 #support>*:hover {
21 transform: none;
22 transition: none;
23 }
24}
25
26/* header, home button */
27
28header {
29 top: 0;
30 background: var(--color-blue);
31 height: 5vh;
32 width: 100%;
33 box-shadow: var(--ff-shadow);
34
display: flex;
35 align-items: center;
36}
37
38#home {
39 padding-left: 5vw;
40
41}
42#home>a {
43 font-size: 4vh;
44 font-weight: 500;
45
display: flex;
46 text-decoration: none;
47 background-color: var(--color-blue);
48 color: var(--color-light);
49 align-items: baseline;
50}
51i {
52 color: var(--color-light);
53 background-color: var(--color-blue);
54 margin-right: .5rem;
55}
56
57#home>*:hover,
58i:hover {
59 color: var(--color-yellow);
60 transition: .5s ease-in-out;
61}
62
63/* main, paragraph and its elements*/
64
65main {
66
display: flex;
67 justify-content: center;
68 align-items: center;
69 height: 90vh;
70 background: var(--color-light);
71}
72
73#par-wrapper {
74
display: flex;
75 flex-direction: column;
76 align-items: center;
77 justify-content: space-around;
78 height: 60vh;
79 padding-inline: 1rem;
80}
81
82#par-wrapper>div {
83
display: flex;
84}
85
86p {
87 font-size: 3vh;
88 font-weight: 600;
89}
90/*link to SUPPORT UKRAINE NOW page*/
91#support {
92 padding: .5rem 1rem;
93 background-color: var(--color-yellow);
94 box-shadow: var(--shadow-link-flag);
95 border-radius: 4px;
96}
97
98#support>* {
99 color: var(--color-blue);
100 text-decoration: none;
101 font-weight: 700;
102 font-size: 4vh;
103}
104
105#support:hover {
106 text-decoration: none;
107 background-color: var(--color-blue);
108 transition: .5s ease-in-out;
109}
110
111#support>*:hover {
112 color: var(--color-yellow);
113 transition: .5s ease-in-out;
114}
115
116/*footer*/
117
118footer {
119
display: flex;
120 height: 5vh;
121 justify-content: center;
122 background-color: var(--color-yellow);
123 position: fixed;
124 width: 100%;
125 bottom: 0;
126 box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
127}
128
129footer>p {
130
display: flex;
131 font-weight: 500;
132
font-size: 1.5vmax;
133 text-align: center;
134 align-items: center;
135}