@font-face {
  font-family: "CiscoSansTTRegular";
  src: url("CiscoSansTTRegular.woff2") format("woff");
}

@font-face {
  font-family: "CiscoSansTTBold";
  src: url("CiscoSansTTBold.woff2") format("woff");
}

#sun{
  -webkit-transform: translateY(240px);
      -ms-transform: translateY(240px);
          transform: translateY(240px);
  opacity: 0;
}
sup,
sub {
  font-size: 50%;
}

html,
body {
  width: 300px;
  height: 600px;
  margin: 0;
}

#main {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 300px;
  height: 600px;
  background-color: #0c1e3f;
  border: 1px solid #000000;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  visibility: hidden;
}

img,
div {
  position: absolute;
}

.retinaFullWidth {
  width: 300px;
  height: auto;
}

#bgExit {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 300px;
  height: 600px;
  cursor: pointer !important;
  z-index: 100;
}

/* New Stuff */

.text-circle {
  opacity: 0;
  -webkit-filter: blur(5px);
  left: -380px;
  top: 500px;
  filter: blur(5px);
  /* opacity: 0%; */
  position: absolute;
  width: 1048px;
  height: 1000px;
  border-radius: 1000px;
  /* border: 1px solid black; */
  background: -o-radial-gradient(
    center,
    circle,
    white 30%,
    #fd6f0f 42.71%,
    #e90072 61.1172%,
    #e9007100 69.29223%
  );
  background: radial-gradient(
    circle at center,
    white 30%,
    #fd6f0f 42.71%,
    #e90072 61.1172%,
    #e9007100 69.29223%
  );
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
}

.text {
  left: 3px;
  font-family: "CiscoSansTTBold";
  width: 100%;
  top: 464px;
  color: white;
  position: absolute;
  z-index: 10;
  font-size: 15.7px;
  letter-spacing: 0.3px;
  text-align: center;
  word-spacing: 0.7px;
}

.rotate-1 {
  width: 100%;
  margin-left: 5px;
  height: 20px;
  /* perspective:600px; */
  position: absolute;
  text-align: center;
}

.rotate-2 {
  width: 100%;
  margin-left: 5px;
  height: 20px;
  /* perspective:600px; */
  position: absolute;
  text-align: center;
}

.rotate-original {
  width: 100%;
  margin-left: 5px;
  height: 20px;
  /* perspective:600px; */
  position: absolute;
  text-align: center;
}


#lockup {
  position: absolute;
  top: 83px;
  left: 311px;
  width: 348px;
  -webkit-filter: invert(1);
          filter: invert(1);
}

.text-mask {
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  /* transform: translateY(-20px); */
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url(./assets/title.svg);
          mask-image: url(./assets/title.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 27px 207px;
          mask-position: 27px 207px;
  -webkit-mask-size: 248px 151px;
          mask-size: 248px 151px;
}

.button {
  cursor: pointer;
  border: 1.5px solid white;
  color: white;
  background-color: transparent;
  z-index: 10;
  font-size: 14px;
  font-family: "CiscoSansTTRegular", sans-serif;
  text-align: center;
  letter-spacing: 0.9px;
  border-radius: 22px;
  padding: 6px 19px;
  white-space: nowrap;
}

.button-container{
  top: 536px;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 20;
  width: 100%;
}

#main:hover #button {
  background-color: #fff;
  color: #000;
}