ページ全体の高さについて

html,cssの学習の一環として、企業の紹介ページのようなものをイメージして作っています。

html
1<!DOCTYPE html>
2<html>
3<head lang = "ja">
4  <title>My Works</title>
5  <meta charset="utf-8">
6  <link rel="stylesheet" href="練習1.css">
7</head>
8<body>
9  <header>
10    <img src = "animal_logo.jpg" />
11  </header>
12  <main>
13    <div class = motto>
14      <h3>[モットー]</h3>
15    </div>
16    <div class = service>
17      <h3>[サービス]</h3>
18    </div>
19    <div class = voice>
20      <h3>[社員の声]</h3>
21      <div class = circle>
22
23        <div id = circle1>
24
25        </div>
26        <div id = circle2>
27
28        </div>
29        <div id = circle3>
30
31        </div>
32      </div>
33    </div>
34  </main>
35  <footer>
36    <ul>
37        <li><a href="https://jp.freepik.com/free-photos-vectors/logo">Asylab - jp.freepik.com によって作成された logo</a></li>
38        <li> <a>copyright©2020 </a></li>
39    </ul>
40
41  </footer>
42</body>
43</html>

css
1html,body{
2  width:100%;
3  margin:0;
4}
5header{
6  width:100%;
7  background-color:#222222;
8  margin-bottom:0;
9}
10header img{
11  align: center;
12  margin-top: 1%;
13  margin-right: 1%;
14  margin-bottom: 1%;
15  margin-left: 94%;
16  width: 5%;
17  height: auto;
18}
19main{
20  height:2500px;
21}
22.motto {
23  height:33%;
24  background-color:rgba(128,0,128,1);
25}
26.motto h3{
27  margin:0;
28}
29.service {
30  height:33%;
31  background-color:rgba(128,128,128,1);
32}
33.service h3{
34  margin:0;
35}
36.voice{
37  height:33%;
38  background-color:white;
39}
40.voice h3{
41  margin:0;
42}
43.circle{
44  display: flex;
45  vertical-align: middle;
46  flex-wrap:wrap;
47  align-items: center;
48  margin-bottom: 0;
49}
50#circle1{
51  width: 33%;
52  border-radius: 50%;
53  padding-top: 33%;
54  background-color: skyblue;
55}
56#circle2{
57  width: 33%;
58  border-radius: 50%;
59  padding-top: 33%;
60  background-color: skyblue;
61}
62#circle3{
63  width: 33%;
64  border-radius: 50%;
65  padding-top: 33%;
66  background-color: skyblue;
67}
68footer{
69  margin-bottom: 0;
70  padding: 5%;
71  background-color: #222222;
72}
73footer a{
74  display: block;
75  text-align:center;
76  color:white;
77}
78footer ul{
79  list-style: none;
80}