/* 전체 적용 */
* {
  margin: 0px;
  padding: 0px;
  }

/* 레이아웃 */
nav {
  background-color:#F5EFE6;
  padding: 5px; /* 내용물이 안쪽으로 들어가는 태그 */
  display: flex;
  justify-content:space-between; /* 내용물을 균등하게 뿌리는 태그 */
  height: 40px;
  color: white;
}
nav a {
  padding: 10px;
  top: 0;
  position: sticky;
  color: black;
}

nav > ul {display: flex;
  list-style: none; 
  margin: 5px; 
}
header {
  font-family: 'Nanum Brush Script', cursive;
  /*font-family: 'Nanum Gothic', sans-serif;*/
  font-size: 30px;
  background-color: #E8DFCA;
}

header > section {
  display: flex;
}

.header_left {
  /*.header.left라고 돼 있어서 적용이 안됏네요 ㅋㅋ*/
  text-align: center;
  margin-right: 20px;
}

main {
  background-color: #AEBDCA;
  display:flex;

}
main>section {
  width: 80%;
  margin: 5px;
  text-align: center;
  flex-wrap: nowrap;
}

img {
  border-radius: 25%; /* 그림의 모서리를 조절하는 태그*/
}

footer {
  background-color: #7895B2;
  justify-content: space-between;
  color: white;
  display: flex;
  bottom: 0;
  position: sticky;
}
footer > h2 {
  margin: 25px;

}

footer li {
  list-style: none;
}
/* 자손을 스타일 할 때는 위와 같이 공백으로 */

@media only screen and (max-width: 600px) {
  header > section {
    flex-direction:column;
    align-items: center;
  }
    .header_left, .header_right {
      width: 80%;
  }
  main {
    flex-direction: column;
    align-items: center;
  }
  footer > ul {
    display: none;
  }
}