body {
  margin: 0;
}

#container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #444;
}

#window {
  width: 80%;
  height: 80%;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04);
}
#window #content {
  padding: 16px;
  font-family: Arial;
  color: #fff;
}
#window #toolbar {
  height: 32px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  background: linear-gradient(#eee, #bbb);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 4px;
}
#window #toolbar .button {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  margin: 0 3px;
  cursor: pointer;
}
#window #toolbar .button.close {
  background-color: #e15f60;
}
#window #toolbar .button.close:hover {
  background-color: #dd4a4b;
}
#window #toolbar .button.minimize {
  background-color: #edbb52;
}
#window #toolbar .button.minimize:hover {
  background-color: #ebb23b;
}
#window #toolbar .button.expand {
  background-color: #1fae53;
}
#window #toolbar .button.expand:hover {
  background-color: #1b9849;
}

button {
  background: linear-gradient(#eee, #bbb);
  border: none;
  border-radius: 200px;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
}
button:hover {
  background: linear-gradient(#fff, #aaa);
  box-shadow: 0 0 16px rgba(44, 144, 244, 0.4);
}