style.css

body {
  background-color: #2b2b2f;
  margin: 0;
}

header {
  width: 100%;
  height: auto;
  position: fixed;
  padding: 10px;
  display: block;
  background-color: #1b1a1c;
  box-sizing: border-box;
}

.header-top {
  display: flex;
}

.header-top>h1 {
  margin-left: 30px;
  color: white;
}

.header-bottom {
  position: relative;
  display: flex;
}

header>div.header-bottom>ul {
  display: flex;
  text-align: left;
  padding: 10px 0;
  margin: 0 10;
}

header>div.header-bottom>ul>li {
  display: flex;
  margin: 0 20px;
  list-style: none;
}

#main-page {
    margin: 0;
    padding: 200px 0px 20px 20px;
}

.right {
  width: 100px;
  height: auto;
  display: flex;
  margin-left: auto;
  margin-right: 10px;
}

.icon {
  display: flex;
  border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
  width: 90px;        /*※縦横を同値に */
  height: 90px;
}

#main-page>p,#main-page>h1 {
    color: lightgray;
}