* {
  position: relative;
  font-family: Barlow;
  /* border:solid 1px; */
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}

/* 980px / 16px = 61.25em */
@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}

/* 460px / 16px = 28.75em */
@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}

@media (max-width: 22.5em) {
  html {
    font-size: 45%;
  }
}

@media (max-width: 20em) {
  html {
    font-size: 43%;
  }
}

.row {
  padding: 80px;
}

.navar {
  width: 100%;
}

header {
  font-weight: 900;
  font-size: 30px;
}

.name {
  background-image: url(https://pcm.trplus.com.tw/650x650/sys-master/productImages/h49/h10/9303470964766/000000000016245501-gallery-01-20190519161428116.jpg);
  opacity: 0.7;
}

.name p, h1 {
  font-family:Special Elite;
  font-weight: 900;
  vertical-align: middle;
  color: #3E4C5E;
  text-shadow: gray 0.1em 0.1em 0.2em;
  text-align: center;
  font-size: 2em;
}

.name h5 {
  vertical-align: middle;
  color: white;
  text-shadow: gray 0.1em 0.1em 0.2em;
  text-align: center;
  font-size: 3em;
  opacity: 0.4;
}

.circle2 {
  position: absolute;
  overflow: hidden;
  background-color: #002B55;
  width: 7em;
  height: 7em;
  border-radius: 100%;
  border: none;
  display: inline-block;
  bottom:-3em;
  right:1em;
  transform:scale(1,1);transition: all 1s ease-out;
}


.circle2:hover {
  transform:scale(1.15, 1.15);
}


.circle1 {
  position: absolute;
  overflow: hidden;
  background-color: rgba(235, 221, 226, 0.6);
  display: inline-block;
  width: 7em;
  height: 7em;
  border-radius: 100%;
  border: none;
  display: inline-block;
  bottom:16em;
  left: -3em;
  transform:scale(1,1);transition: all 1s ease-out;
}

.circle1:hover {
  transform:scale(1.15, 1.15);
}

 .circle3 {
  position:absolute;
  background-color:rgba(210, 185, 211,0.8);
  display: inline-block;
  width: 7em;
  height: 7em;
  border-radius:100%;
  border: none;
  display: inline-block;
  bottom:18em;
  left:1em;
}

.circle3:hover {
  transform:scale(1.15, 1.15);
}

.circle4{
  position:absolute;
  background-color:#B4CFEC;
  display: inline-block;
  width: 7em;
  height: 7em;
  border-radius: 100%;
  border: none;
  display: inline-block;
  bottom:10em;
  right:2em;
  transform:scale(1,1);transition: all 1s ease-out;
}

.circle4:hover {
  transform:scale(1.15, 1.15);
}


.experiences p {
  font-weight: 900;
  font-size: 2em;
  text-align: center;
  border-radius: 10%;
  background-color: #BCC6CC;
  color: white;
}

.experiences h5 {
  font-size: 1.5em;
}

.experiences {
  background-color: rgba(245, 235, 228, 0.4);
}

.col-work {
  padding-left: 5em;
}

.col-work img {
  width: 100%;
}

.col-work p {
  font-weight: 900;
  font-size: 1.5em;
  text-align: center;
}

.edu_title {
  font-weight: 900;
  color: #8C95A6;
}

.working_company {
  font-weight: 900;
  color: #8C95A6;
}

.chart {
  width: 80%;
  height: 12px;
  background-color: #ddd;
}

.bar1 {
  width: 75%;
  height: 8px;
  background-color: #FFC300;
}

.bar2 {
  width: 60%;
  height: 8px;
  background-color: #FFC300;
  left: 1px;
  margin: 1px;
}

.bar3 {
  width: 70%;
  height: 8px;
  background-color: #FFC300;
  left: 1px;
  margin: 1px;
}

.bar4 {
  width: 30%;
  height: 8px;
  background-color: #FFC300;
  left: 1px;
  margin: 1px;
}

.bar5 {
  width: 50%;
  height: 8px;
  background-color: #FFC300;
  left: 1px;
  margin: 1px;
}

.bar6 {
  width: 50%;
  height: 8px;
  background-color: #FFC300;
  left: 1px;
  margin: 1px;
}

.change {
  font-size: 2.5em;
  font-weight: 900;
  text-align: center;
  font-family:Special Elite;
}

.contact {
  background-color: rgba(245, 235, 228, 0.4);
}

.social {
  text-align: center;
}

.social span {
  font-size: 2em;
  font-weight: 900;

}

i {
  position: center;
}

.work container {
  position: center;
}

.footer p {
  font-size: 1.5em;
  font-weight: 600;
}

.picture1 {
  padding: 100px;
  background-image: url(https://cdn.britannica.com/25/93825-050-D1300547/collection-newspapers.jpg);
  /* 滑鼠移進去可以變深 */
}

.picture1:hover {
  filter: brightness(0.5);
  transition-duration: 0.5s;
}

.picture2 {
  padding: 100px;
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVuh2Pdtc6FgWm9zc-ZtreTsIk8kXcNANRZXX5RTPWvFmk9kNL);
  background-repeat: no-repeat;
  background-size: cover;
}

.picture2:hover {
  filter: brightness(0.5);
  transition-duration: 0.5s;
}

.picture3 {
  padding: 100px;
  background-image: url(https://www-assets.yoyogames.com/system/blogs/featured_images/000/000/121/original/games.png?1455705694);
  opacity: 1;
}

.picture3:hover {
  filter: brightness(0.5);
  transition-duration: 0.5s;
}

.text-panel {
  color: white;
  font-weight: 900;
  opacity: 0.8;
}

.work p {
  font-size: 3em;
  position: center;
  color: white;
  text-shadow: black 0.1em 0.1em 0.2em;
}

.work h2 {
  font-size: 3em;
  font-weight: 600;
  text-align: center;
  color: #9EA8AE;
  top: 40px;
}

.footer {
  background-color: rgba(245, 235, 228, 0.4);
}