/* debug：可視覺化元素之間的關係 */
.debug *, .debug {
/*   outline: 1px solid gold; */
}
/* CSS Reset：設定基底字體大小 */
html {
  font-size: 12px;
  font-family: 微軟正黑體;
}
/* CSS Reset：消取預設空隙 */
html, body, h1, h2, h3, h4, p{
  padding: 0;
  margin: 0;
}
/* 彈窗樣式：文字置中對齊 */
h1, p {
/*   position: relative; */
  text-align: center;
  margin: 10px;
}

.message {
  width: 300px;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0px 2px 20px 0px rgba(100,100,100,0.25);
/*  fixed：因為彈窗是相對於視窗排版，跳脫排版流的定位  */
  position: fixed;
/*   偏右下角：因為排版是以元素的左上角為起點 */
  top: 50%;
  left: 50%;
/*   須扣除元素本身寬高的一半，達到置中效果 */
  transform: translate(-50%, -50%)
}

.message .close {
  position: absolute;
  top: 10px; right: 10px;
  border: 1px solid #000;
  width: 20px; height: 20px;
/*   圓形：將弧線設成長寬的一半 */
  border-radius: 50%;
}

/* 關閉鍵：可透過虛元素屬性來創造符號 */
.message .close:after, .message .close:before {
  content: '';
  position: absolute;
  width: 80%; height: 1px;
  background: #000;
  top: 50%;
  left: 50%;
}
/* 叉叉符號：由兩個長方形旋轉 45 度組成 */
.message .close:after {
  transform : translate(-50%, -50%) rotate(45deg);
}

.message .close:before {
  transform : translate(-50%, -50%) rotate(-45deg);
}