/***********************/
HTML CSS JSResult Skip Results Iframe
EDIT ON
body,
html {
  margin: 0px;
  padding: 0px;
  position: fixed;
}
body {
    font-family: Arial;
    /* background-color: #3498DB;  */
    background-color: rgb(13, 33, 53);
    /* background-image: url('blocks/background.jpg');
    background-size: cover; */
    }
    
span {
  display:block;
  width:750px;height:660px;
  position:relative;
  margin:30px auto 0 auto;
  overflow:hidden;
}
hexagon {
  background-image:url(../images/hexagon.png);
  background-size:contain;
  height:112px; width:105px;
  position:absolute;
  opacity:0.05;
  top:calc(50% - 66px);
  left:calc(50% - 66px);
  -webkit-animation:opacity 5s ease-in-out infinite;
  animation:opacity 5s ease-in-out infinite;
}
hexagon:nth-child(-n+7):not(:nth-child(1)) { -webkit-animation:opacity 5s 0.25s ease-in-out infinite; animation:opacity 5s 0.25s ease-in-out infinite; }
hexagon:nth-child(-n+19):not(:nth-child(-n+7)) { -webkit-animation:opacity 5s 0.5s ease-in-out infinite; animation:opacity 5s 0.5s ease-in-out infinite; }
hexagon:nth-child(-n+37):not(:nth-child(-n+19)) { -webkit-animation:opacity 5s 0.75s ease-in-out infinite; animation:opacity 5s 0.75s ease-in-out infinite; }
hexagon:nth-child(-n+61):not(:nth-child(-n+37)) { -webkit-animation:opacity 5s 1s ease-in-out infinite; animation:opacity 5s 1s ease-in-out infinite; }
hexagon:nth-child(-n+79):not(:nth-child(-n+61)) { -webkit-animation:opacity 5s 1.25s ease-in-out infinite; animation:opacity 5s 1.25s ease-in-out infinite; }

/* First ring */
hexagon:nth-child(2)  { left:calc(50% +  13px); }
hexagon:nth-child(3)  { left:calc(50% -  27px); top:calc(50% +   2px); }
hexagon:nth-child(4)  { left:calc(50% - 106px); top:calc(50% +   2px); }
hexagon:nth-child(5)  { left:calc(50% - 145px); }
hexagon:nth-child(6)  { left:calc(50% - 106px); top:calc(50% - 135px); }
hexagon:nth-child(7)  { left:calc(50% -  27px); top:calc(50% - 135px); }

/* Second ring */
hexagon:nth-child(8)  { left:calc(50% +  93px); }
hexagon:nth-child(9)  { left:calc(50% +  53px); top:calc(50% +   2px); }
hexagon:nth-child(10) { left:calc(50% +  13px); top:calc(50% +  70px); }
hexagon:nth-child(11) { top:calc(50% + 70px); }
hexagon:nth-child(12) { left:calc(50% - 145px); top:calc(50% +  70px); }
hexagon:nth-child(13) { left:calc(50% - 185px); top:calc(50% +   2px); }
hexagon:nth-child(14) { left:calc(50% - 225px); }
hexagon:nth-child(15) { left:calc(50% - 185px); top:calc(50% - 135px); }
hexagon:nth-child(16) { left:calc(50% - 145px); top:calc(50% - 204px); }
hexagon:nth-child(17) { top:calc(50% - 204px); }
hexagon:nth-child(18) { left:calc(50% +  13px); top:calc(50% - 204px); }
hexagon:nth-child(19) { left:calc(50% +  53px); top:calc(50% - 135px); }

/* Third ring */
hexagon:nth-child(20) { left:calc(50% + 171px); }
hexagon:nth-child(21) { left:calc(50% + 133px); top:calc(50% +   2px); }
hexagon:nth-child(22) { left:calc(50% +  93px); top:calc(50% +  70px); }
hexagon:nth-child(23) { left:calc(50% +  53px); top:calc(50% + 138px); }
hexagon:nth-child(24) { left:calc(50% -  27px); top:calc(50% + 138px); }
hexagon:nth-child(25) { left:calc(50% - 106px); top:calc(50% + 138px); }
hexagon:nth-child(26) { left:calc(50% - 185px); top:calc(50% + 138px); }
hexagon:nth-child(27) { left:calc(50% - 224px); top:calc(50% +  70px); }
hexagon:nth-child(28) { left:calc(50% - 264px); top:calc(50% +   2px); }
hexagon:nth-child(29) { left:calc(50% - 304px); }
hexagon:nth-child(30) { left:calc(50% - 264px); top:calc(50% - 135px); }
hexagon:nth-child(31) { left:calc(50% - 224px); top:calc(50% - 204px); }
hexagon:nth-child(32) { left:calc(50% - 184px); top:calc(50% - 272px); }
hexagon:nth-child(33) { left:calc(50% - 106px); top:calc(50% - 272px); }
hexagon:nth-child(34) { left:calc(50% -  27px); top:calc(50% - 272px); }
hexagon:nth-child(35) { left:calc(50% +  53px); top:calc(50% - 272px); }
hexagon:nth-child(36) { left:calc(50% +  93px); top:calc(50% - 204px); }
hexagon:nth-child(37) { left:calc(50% + 133px); top:calc(50% - 135px); }

/* Fourth ring */
hexagon:nth-child(38) { left:calc(50% + 251px); }
hexagon:nth-child(39) { left:calc(50% + 212px); top:calc(50% +   2px); }
hexagon:nth-child(40) { left:calc(50% + 171px); top:calc(50% +  70px); }
hexagon:nth-child(41) { left:calc(50% + 133px); top:calc(50% + 138px); }
hexagon:nth-child(42) { left:calc(50% +  93px); top:calc(50% + 206px); }
hexagon:nth-child(43) { left:calc(50% +  13px); top:calc(50% + 206px); }
hexagon:nth-child(44) { top:calc(50% + 206px); }
hexagon:nth-child(45) { left:calc(50% - 145px); top:calc(50% + 206px); }
hexagon:nth-child(46) { left:calc(50% - 224px); top:calc(50% + 206px); }
hexagon:nth-child(47) { left:calc(50% - 264px); top:calc(50% + 138px); }
hexagon:nth-child(48) { left:calc(50% - 304px); top:calc(50% +  70px); }
hexagon:nth-child(49) { left:calc(50% - 344px); top:calc(50% +   2px); }
hexagon:nth-child(50) { left:calc(50% - 384px); }
hexagon:nth-child(51) { left:calc(50% - 344px); top:calc(50% - 135px); }
hexagon:nth-child(52) { left:calc(50% - 304px); top:calc(50% - 204px); }
hexagon:nth-child(53) { left:calc(50% - 264px); top:calc(50% - 272px); }
hexagon:nth-child(54) { left:calc(50% - 224px); top:calc(50% - 340px); }
hexagon:nth-child(55) { left:calc(50% - 145px); top:calc(50% - 340px); }
hexagon:nth-child(56) { top:calc(50% - 340px); }
hexagon:nth-child(57) { left:calc(50% +  13px); top:calc(50% - 340px); }
hexagon:nth-child(58) { left:calc(50% +  93px); top:calc(50% - 340px); }
hexagon:nth-child(59) { left:calc(50% + 133px); top:calc(50% - 272px); }
hexagon:nth-child(60) { left:calc(50% + 171px); top:calc(50% - 204px); }
hexagon:nth-child(61) { left:calc(50% + 212px); top:calc(50% - 135px); }

/* Fill in corners: first row */
hexagon:nth-child(62) { left:calc(50% + 331px); }
hexagon:nth-child(63) { left:calc(50% + 291px); top:calc(50% +   2px); }
hexagon:nth-child(64) { left:calc(50% + 251px); top:calc(50% +  70px); }
hexagon:nth-child(65) { left:calc(50% + 212px); top:calc(50% + 138px); }
hexagon:nth-child(66) { left:calc(50% + 171px); top:calc(50% + 206px); }
hexagon:nth-child(67) { left:calc(50% - 424px); top:calc(50% +   2px); }
hexagon:nth-child(68) { left:calc(50% - 384px); top:calc(50% +  70px); }
hexagon:nth-child(69) { left:calc(50% - 344px); top:calc(50% + 138px); }
hexagon:nth-child(70) { left:calc(50% - 304px); top:calc(50% + 206px); }
hexagon:nth-child(71) { left:calc(50% - 464px); }
hexagon:nth-child(72) { left:calc(50% - 424px); top:calc(50% - 135px); }
hexagon:nth-child(73) { left:calc(50% - 384px); top:calc(50% - 204px); }
hexagon:nth-child(74) { left:calc(50% - 344px); top:calc(50% - 272px); }
hexagon:nth-child(75) { left:calc(50% - 304px); top:calc(50% - 340px); }
hexagon:nth-child(76) { left:calc(50% + 291px); top:calc(50% - 135px); }
hexagon:nth-child(77) { left:calc(50% + 251px); top:calc(50% - 204px); }
hexagon:nth-child(78) { left:calc(50% + 212px); top:calc(50% - 272px); }
hexagon:nth-child(79) { left:calc(50% + 171px); top:calc(50% - 340px); }

@keyframes opacity {
  0%,100% { opacity:0.05; }
  50% { opacity:1; }
}
Run Pen;

Resources1× 0.5× 0.25×Rerun;

/**********************/

* {
box-sizing: border-box;
}

*:focus {
	outline: none;
}
::-webkit-scrollbar {
	width: 3px;
  }
::-webkit-scrollbar-track {
	background: #ffffff;
  }
::-webkit-scrollbar-thumb {
	background: #888;
  }
::-webkit-scrollbar-thumb:hover {
	background: #555;
  }

.author-screen {
background-color: rgba(13, 33, 53, 0.9);
padding: 10px;
border-radius: 20px;
margin-bottom: 5px;
}
.author-title {
text-align: center;
color: #ffffff;
font-size: 20px;
height: 35px;
line-height: 35px;
font-weight:bold;
}
.accounting-screen {
background-color: rgba(13, 33, 53, 0.9);
padding: 10px;
border-radius: 20px;
margin-bottom: 5px;
}
.accounting-text {
text-align: center;
color: #ffffff;
font-size: 15px;
height: 25px;
line-height: 25px;
font-weight:bold;
}
.bmm{
  position: fixed;
  bottom:11px;
  right:11px;
  width: auto;
  height: 33px;
  line-height: 33px;
  font-size: 15px;
  font-weight: bolder;
  padding: 3px 11px 3px 11px;
  color: #ffffff;
  z-index:50;
  text-align: center;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 2px solid transparent;
  }
  .bmm a{
  text-decoration: none;
  color: #ffffff;
  }
.ai{
    position: fixed;
    top:11px;
    left:11px;
    width: 33px;
    height: 33px;
    line-height: 33px;
    font-size: 25px;
    font-weight: bolder;
    color: #ffffff;
    z-index:50;
    text-align: center;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid transparent;
    }
.login {
  position: fixed;
top:calc(50% - 213.94px);
width: 300px;
z-index:50;
left:calc(50% - 150px);
}
.login-screen {
background-color: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 20px
}

.app-title {
text-align: center;
color: rgba(13, 33, 53, 1);
}

.login-form {
text-align: center;
}
.login-form .agree{
text-align: left !important;
font-size:9px;
margin:5px;
margin-top:10px;
line-height:15px;
}
.control-group {
margin-bottom: 10px;
}

input {
text-align: center;
background-color: rgba(13, 33, 53, 0.8);
border: 2px solid transparent;
border-radius: 10px;
font-size: 16px;
font-weight: 500;
padding: 10px 0;
width: 250px;
transition: border .5s;
color: #ffffff;
}
input::placeholder {
  color: #ffffff;
}
input::-ms-input-placeholder{
  color: #ffffff;
}
input:focus {
border: 2px solid rgba(95, 235, 255, 1);
box-shadow: none;
}

.btn {
  border: 2px solid transparent;
  background: rgba(13, 33, 53, 1);
  color: #ffffff;
  font-size: 16px;
  line-height: 25px;
  padding: 10px 0;
  text-decoration: none;
  text-shadow: none;
  border-radius: 10px;
  box-shadow: none;
  transition: 0.25s;
  display: block;
  width: 250px;
  margin: 0 auto;
  cursor: pointer;
}

.btn:hover {
  background-color: rgba(13, 33, 53, 0.9);
}

.login-link {
  font-size: 12px;
  color: #444;
  display: block;
	margin-top: 12px;
}