:root{
  --shadow:#7F7F7F;
  --light-shadow:#CDCDCD;
  --top-button:#FF3F33;
  --middle-button:#CD3027;
  --box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.5);
  --box-shadow-top: inset 0px -3px 16px rgba(0, 0, 0, 0.3);
  /* Scale to nearly full screen and make the button flatter like the reference */
  --button-width:90vmin;
  --button-height:calc(var(--button-width) * 0.35);
}

.top-left-icon{
  position: fixed;
  top: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1000;
}

.top-right-text{
  position: fixed;
  top: 30px;
  right: 30px;
  display: flex;
  align-items: center;
  z-index: 1000;
}

.x-logo{
  width: 42px;
  height: 42px;
  display: block;
}

.x-logo-link{
  display: inline-flex;
}

.x-top-left-text{
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #ffffff;
  -webkit-text-stroke: 1px #000000;
  font-size: 24px;
  line-height: 1;
  /* Fallback outline via text-shadow for browsers without -webkit-text-stroke */
  text-shadow:
    1px 0 0 #000,
    -1px 0 0 #000,
    0 1px 0 #000,
    0 -1px 0 #000,
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
}

.buttonDiv{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:var(--button-width);
  height: var(--button-height);
  /* sum bullshit */
}
.buttonDiv:hover{
  cursor: pointer;
}
.button-bottom-shadow{
  box-shadow: var(--box-shadow);
  width:100%;
  height: 50%;
  background-color:var(--shadow);
  top:70%;
}
.button-bottom-shadow-rect{
  width:100%;
  height: 7%;
  background-color:var(--shadow);
  top:89%;
}
.button-bottom{
  width:100%;
  height: 50%;
  background-color:var(--light-shadow);
  top:64%;
  box-shadow: var(--box-shadow);
}

.button-click-bottom{
  top:70%;
  width:90%;
  left:5%;
  height: 26%;
  background-color:var(--middle-button);
  box-shadow: var(--box-shadow);
}
.button-click-middle-rect{
  top:39%;
  width:90%;
  left:5%;
  height: 44%;
  background-color:var(--middle-button);
}
.button-click{
  top:25%;
  width:90%;
  left:5%;
  height: 28%;
  background-color:var(--top-button);
  box-shadow: var(--box-shadow-top);
}

.buttonClickAnimation{
  transform: translateY(102%);
}

.transition{
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0s;
  will-change: transform;
}

.boxResizeAnimation{
  transform: translateY(66%) scaleY(0.3636);
  border-bottom-left-radius: 10%;
  border-bottom-right-radius: 10%;
}

.boxResize{
  transform-origin: top center;
}
.absolute{
  position:absolute;
}

.rounded{
  border-radius: 50%;
}

button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}