@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700&family=Caveat:wght@500&family=Quicksand:wght@700&family=Kaushan+Script&display=swap");

body {
  margin: 0;
  background: url(img/bg.jpg) center;
  backdrop-filter: blur(3px);
  background-attachment: fixed;
  background-size: cover;
  text-align: center;
}

/* 標題 & 副標題 */
.title {
  color: #f2f2f2;
  font-size: 27px;
  font-family: "Noto Sans TC", sans-serif;
}
.subTitle {
  color: #eed7c5;
  font-size: 20px;
  font-family: "Noto Sans TC", sans-serif;
}
.special-subTitle {
  color: #fff200;
  font-size: 20px;
  font-family: "Noto Sans TC", sans-serif;
}

/* 連結 icon */
.icon {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.icon a {
  color: #f2f2f2;
  width: 80px;
  font-size: 30px;
  text-decoration: none;
  transition: 0.3s linear;
}
.icon a:hover {
  color: #e66767;
}

/* 卡片 */
.profile {
  display: block;
}
/* 卡片樣式 */
.profileL-card {
  display: inline-block;
  margin: 100px 50px;
  padding: 60px 40px;
  width: 400px;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  background: #2c3a47;
}
.profileR-card {
  display: inline-block;
  margin: 100px 50px;
  padding: 60px 40px;
  width: 400px;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  background: #2b3035;
}
/* 大頭貼 */
.propic {
  display: inline-block;
  padding: 8px;
  background: linear-gradient(130deg, #74b9ff, #e66767);
  margin: auto;
  border-radius: 50%;
  background-size: 200% 200%;
  animation: animated-gradient 2s linear infinite;
}
.propic img {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
/* 名字 */
.name {
  font-size: 50px;
  font-weight: 600;
  margin: 10px 0;
  letter-spacing: 2.5px;
  font-family: "Kaushan Script";
  color: #f2f2f2;
}
/* 簡介 */
.introduction {
  font-size: 20px;
  letter-spacing: 2.5px;
  font-family: "Kaushan Script";
  color: #f2f2f2;
}

/*---------- 作品集 ----------*/
.portfolio a {
  color: #f2f2f2;
  font-size: 40px;
  font-family: "Noto Sans TC", sans-serif;
}
.portfolio hr {
  margin: 20px auto 30px;
  width: 90%;
}

/*魚論*/
.yuLun {
  display: inline-block;
  margin: 20px;
  padding: 40px;
  height: 450px;
  width: 450px;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  background: #2c3a47;
}
.yuLun img {
  padding: 30px 0 20px;
  width: 200px;
}

/*盒勝*/
.hoSeng {
  display: inline-block;
  margin: 20px;
  padding: 40px;
  height: 450px;
  width: 450px;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  background: #2c3a47;
}
.hoSeng img {
  padding: 30px 0 80px;
  width: 400px;
}

/*居家火災防災系統*/
.fireIOT {
  display: inline-block;
  margin: 20px;
  padding: 40px;
  height: 450px;
  width: 450px;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  background: #2c3a47;
}
.fireIOT img {
  padding: 60px 0 80px;
  width: 400px;
}

/* 實作物聯網系統 */
.IOT {
  display: inline-block;
  margin: 20px;
  padding: 40px;
  height: 450px;
  width: 450px;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  background: #2c3a47;
}
.IOT img {
  padding: 30px 0 80px;
  width: 400px;
}

/*潮畫線*/
.DW {
  display: inline-block;
  margin: 20px;
  padding: 40px;
  height: 450px;
  width: 450px;
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
  background: #2c3a47;
}
.DW img {
  padding: 50px 0px 70px;
  width: 400px;
}