style.css

:root {
  --bg: #000;
  --bgOverlay: rgba(0,0,0,0.7);
  --midColor: #303030;
  --color: white;
  --colorIn: black; 
}
/* reflection */
.units > :last-child {
  transform: rotatex(180deg) translatey(15px);
  mask-image: linear-gradient(transparent 50%, white 90%);
  -webkit-mask-image: linear-gradient(transparent 50%, white 90%);
}
/* original design */
.units > * {
  font: bolder 10rem/10rem "EB Garamond";
  background-image: url("/dapchat/forest.jpg");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.units {
  width: max-content;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  padding: 0 10px;
  display: inline-block;
  /* box-shadow: 0px 0px 10px 1px rgba(255,255,255,0.5); */
}
body {
  background: url("/dapchat/mapleplus.jpg") no-repeat center center;
  background-size: cover;
  text-align: center;
  margin-top: calc(50vh - 15rem);
  width:100vw;
  height:100vh;
  overflow-x:hidden;
  margin:0;
  padding:0;
}
.bg {
  background: url("/dapchat/newlogo.jpg") no-repeat center center;
  background-size: cover;
  width:100%;
  height:100%;
  z-index:0;
  position:absolute;
  top:0;
  left:0;
  opacity:0.2;
}
.button {
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  border-radius:20px;
  padding:20px 15px;
  background:url("/dapchat/forest.jpg") no-repeat center center;
  color:white;
  font-size:45px;
  cursor:pointer;
  font-weight:bold;
  box-shadow: 0px 0px 10px 1px rgba(0, 204, 255, 0.4);
  transition:0.2s linear;
}
.button:hover {
  opacity:0.6;
}
video {
  width:75%;
  height:auto;
  display:block;
  margin:auto;
}