@import url("css.css");
html {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #fff;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  width: 100%;
  height: 100%;
  color: white;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  overflow: hidden;
}

.child {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* mix-blend-mode: overlay; */
  /* text-shadow: 0 0 5px #fff; */
  color: #fff;
}

svg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

section {position: revert;}
.row {text-align: center;}
.container h6 {text-align: center; font-size: 48px; font-weight: 900; padding: 24px 0;}
.container p {text-align: center; font-size: 20px; font-family: Arial; text-transform: uppercase;}
.bot {position: fixed; left: 0; bottom: 0; width: 100%; text-align: center; height: 60px; line-height: 60px; color: #999;}
.bot a {font-size: 12px; text-decoration:none; color: #fff; opacity: 0.8; text-shadow: 1px 2px 2px rgba(0,0,0,0.2); text-shadow: 0 0 5px #fff;}

.button {
  margin: 0 auto;
  margin-top: 64px;
  width: 25%;
  height: 50px;
  line-height: 50px;
  position: relative;
  border-radius: 5px;
  transition: all 1s ease;
  transform-style: preserve-3d;
/*  box-shadow: 1px 3px 3px rgba(0,0,0,0.2);*/
  cursor: pointer;
}
.rotated {
  transform: rotateY(-180deg);
}
.card-contents {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;}

.card-contents p {
/*  text-shadow: 1px 2px 2px rgba(0,0,0,0.2); */
    margin: 0 auto;
    cursor: pointer;
    position: relative;
}
.card-depth {
   transform: translateZ(100px) scale(0.98);
   perspective: inherit;

}
.card-front {
/*  background: linear-gradient(to top left, #3a6186, #89253e); */
/*  background: #fff; */
  transform-style: preserve-3d;
}
.card-back {
  transform: rotateY(180deg);
/*  background: linear-gradient(to top left, #ffa17f, #00223e); */
/*  background: #fff; */
  transform-style: preserve-3d;
}
.rotated .card-contents p {font-size: 16px;}
.button .card-back {display: none;}
.rotated .card-front {display: none;}
.rotated .card-back {display: block;}
/*.card-contents p:after {content: ""; position: absolute; left: -30%; bottom: 0; border:2px solid #fff; width: 160%; height: 100%;}*/
/*.rotated .card-contents p:after {content: ""; left: 0%; bottom: 0; height: 100%; width: 100%;}*/