@charset "utf-8";
/* CSS Document */
.dark {
  background: linear-gradient(#114357, #f29492);
  color: #fff;
}
.bright {
  background: linear-gradient(#e1eec3, #f05053);
  color: #333;
}
.calm {
  background: linear-gradient(#636fa4, #e8cbc0);
  color: #fff;
}
.white {
background:rgba(255,255,255,0.5);
  color: #333;
}
.article_container {
  padding: 40px 10px 100px;
  position: relative;
  width: 340px;
  margin: 0 auto;
  padding-bottom: 100px;
}
.circle {
  width: 340px;
  height: 340px;
  border-radius: 340px;
  border: solid 0.5px #f29492;
  position: relative;
}
.circle_white {
  width: 340px;
  height: 340px;
  border-radius: 340px;
  border: solid 0.5px #fff;
  position: relative;
}
.circle p, .circle_white p {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fadeup_0 {
  transition: 1s;
  opacity: 0;
  transform: translateY(25px);
  margin-top: 20px;
  margin-bottom: 20px;
}
.fadeup {
  transition: 1s;
  opacity: 0;
  transform: translateY(25px);
  margin-top: 20px;
  margin-bottom: 20px;
}
.up {
  opacity: 1;
  transform: translateY(0px);
}