* {
  margin: 0;
  padding: 0;
  transition: all 0.5s ease-in-out 0s;
}

header {
  background: url('./img/little_lemon.png') no-repeat;
  height: 200px;
  margin: 2% 5%;
  background-position: center;
}

.nav-bar {
  list-style-type: none;
  display: flex;
  justify-content: center;
  margin: 0 5%;
  width: 90%;
  background-color: rgb(54, 45, 45);
  border-radius: 15px;
}

.nav-bar li {
  margin-left: 40px;
  font: normal 500 22px/1.5 'Times New Roman', Times, serif;
}

.nav-bar > li > a {
  text-decoration: none;
  padding: 20px 30px;
  display: block;
}

.nav-bar li a:link {
  color: white;
}

a:visited {
  color: lightgreen;
}

.Submenu1 {
  position: relative;
}

.nav-bar .Submenu {
  display: none;
  position: absolute;
  min-width: 150px;
  background-color: #444;
  z-index: 1;
  list-style-type: none;
  padding: 0;
  left: -15px;
}

.Submenu li {
  text-align: center;
  margin: 0;
}

.Submenu a {
  display: block;
  font-size: 16px;
  padding: 15px 20px;
  color: white;
  text-decoration: none;
}

.Submenu a:hover {
  background-color: #555;
}

.nav-bar li:hover .Submenu {
  display: block;
}

#menu1 {
  background: url('img/salmon-bg.jpg') no-repeat;
  height: 270px;
  margin: 2% 5%;
  background-position: center;
  background-size: cover;
  border-radius: 20px;
  overflow: hidden;
}

#menu1 h1 {
  color: rgb(21, 41, 219);
  margin-left: 20px;
  margin-top: 30px;
  margin-bottom: 40px;
  font: normal 900 62px/1.5 'Times New Roman', Times, serif;
}

h1 > span {
  color: rgb(21, 41, 219);
}

#menu1 p {
  font-size: large;
  margin-left: 20px;
  width: 60%;
  color: wheat;
  background-color: rgb(21, 41, 219);
}

.menu2 {
  display: flex;
  margin: 2px 5%;
  gap: 10px;
}

.menu2 figure {
  background-color: bisque;
  padding: 20px;
  border-radius: 15px;
}

.menu2 figure p > a {
  display: inline-block;
  margin-top: 20px;
}

.menu2 figure p {
  margin-top: 20px;
}

.menu2 figure > h4 {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 700;
}

#time {
  margin: 7px 40px;
}

#time p {
  margin-top: 0;
}

.demos-img {
  margin-top: 5%;
  margin-bottom: 5%;
  width: 100%;
}

footer {
  display: grid;
  grid-template-columns: 50% auto; /* 自动列宽（logo），1fr（剩余宽度平均分配给dash和words） */
  align-items: center; /* 垂直居中 */
  margin: 10px 5%;
  padding-bottom: 15%;
}

.logo {
  background: url('./img/logo.png') no-repeat;
  background-position: center center;
  background-size: cover;
  height: 80px;
  width: 80px;
}

.dash {
  width: 100%; /* 调整dash宽度 */
  height: 30px; /* 调整dash高度 */
  border-top: solid 2px black;
}

.content {
  display: grid;
  grid-template-rows: 10% auto;
  justify-items: end;
}