body {
  margin: 0;
  font-family: sans-serif;
  background: #DAF0FF; 
}


/* header */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
  position: sticky;
  top: 0;
}

.logo {
  width: 50px;
  height: 50px;
  background: #203060;
  border-radius: 50%;
  cursor: pointer;
}

.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  font-size: 48px;
  color: #8097C0;
}

.menu {
  cursor: pointer;
  font-size: 48px;
  color: #8097C0;
}

/* side menu */
.side-menu {
  position: fixed;
  top: 0;
  right: -200px;
  width: 200px;
  height: 0100%;
  background: #B0C7DF;
  color: white;
  padding: 35px;
  transition: 0.3s;
}

.side-menu.active {
  right: 0;
}

/* main */
main {
  padding: 20px;
}

/* project list */
.project {
  background: #ccc;
  margin: 20px 0;
  padding: 10px;
  cursor: pointer;
}

.thumbnail {
  width: 100%;
  height: 150px;
  background: #EEE;
}


/* modal */
.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
}

.modal-content {
  background: white;
  margin: 10% auto;
  padding: 20px;
  width: 300px;
}

.close {
  float: right;
  cursor: pointer;
}