* { margin: 0; padding:0; box-sizing: border-box;  }
body { font-family: '나눔스퀘어', sans-serif; }
h1,h2,h3{ font-family: '고양덕양 B', sans-serif;}
.header { padding: 60px; text-align: center; background: #9999ff; color: white; }
 
/* navigation bar */
.navbar { display: flex; background-color:  rgba(255, 241, 0, 0.3); }
.navbar a { color: #333; padding: 14px 20px; text-decoration: none; text-align: center; }
.navbar a:hover { background-color: white; color: #9999ff;}

/* Column container */
.row {  display: flex; flex-wrap: wrap; }
img { width: 100%; }

/* Sidebar/left column */
.side { flex: 30%; background-color: #f1f1f1; padding: 20px; }
  
/* Main column */
.main { flex: 70%; padding: 20px; }
  
/* Footer */
.footer { padding: 20px; text-align: center; background: #9999ff; color:#fff; }
  
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 700px) {
    .row, .navbar { flex-direction: column; }
    img { height: 100%; width: auto; }
  }