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
27/* header, home button */
28
29header {
30 top: 0;
31 background-color: var(--color-blue);
32 height: 5vh;
33 width: 100%;
34 box-shadow: var(--ff-shadow);
35
display: flex;
36 align-items: center;
37}
38
39#home {
40 padding-left: 5vw;
41
42}
43#home>a {
44 font-size: 4vh;
45 font-weight: 500;
46
display: flex;
47 text-decoration: none;
48 background-color: var(--color-blue);
49 color: var(--color-light);
50 align-items: baseline;
51}
52i {
53 color: var(--color-light);
54 background-color: var(--color-blue);
55 margin-right: .5rem;
56}
57
58#home>*:hover,
59i:hover {
60 color: var(--color-yellow);
61 transition: .5s ease-in-out;
62}
63
64/* main, paragraph and its elements*/
65
66main {
67
display: flex;
68 justify-content: center;
69 align-items: center;
70 height: 90vh;
71 background-color: var(--color-light);
72}
73
74#par-wrapper {
75
display: flex;
76 flex-direction: column;
77 align-items: center;
78 justify-content: space-around;
79 height: 60vh;
80 padding-inline: 1rem;
81}
82
83#par-wrapper>div {
84
display: flex;
85}
86
87p {
88 font-size: 3vh;
89 font-weight: 600;
90}
91/*link to SUPPORT UKRAINE NOW page*/
92#support {
93 padding: .5rem 1rem;
94 background-color: var(--color-yellow);
95 box-shadow: var(--shadow-link-flag);
96 border-radius: 4px;
97}
98
99#support>* {
100 color: var(--color-blue);
101 text-decoration: none;
102 font-weight: 700;
103 font-size: 4vh;
104}
105
106#support:hover {
107 text-decoration: none;
108 background-color: var(--color-blue);
109 transition: .5s ease-in-out;
110}
111
112#support>*:hover {
113 color: var(--color-yellow);
114 transition: .5s ease-in-out;
115}
116
117/*footer*/
118
119footer {
120
display: flex;
121 height: 5vh;
122 justify-content: center;
123 background-color: var(--color-yellow);
124 position: fixed;
125 width: 100%;
126 bottom: 0;
127 box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
128}
129
130footer>p {
131
display: flex;
132 font-weight: 500;
133 font-size: 3vmin;
134 text-align: center;
135 align-items: center;
136}