body{background-color:red;display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden}.main-box{display:flex;justify-content:center;align-items:center;flex-direction:column;height:90vh;width:97vw;background-color:transparent;border-top:solid rgb(255,150,150) 2px;border-bottom:solid rgb(255,150,150) 2px}.main-box-header{height:100px;width:100%}.main-box-body{width:100%;flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-top:-100px}.main-box-active{height:200px;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-top:-100px}.btn{background-color:#ff3c3c;border:solid rgb(255,90,90) 2px;color:#fff;height:60px;width:250px;display:flex;align-items:center;justify-content:center;font-size:x-large;position:relative;transition:background-color .3s ease-in-out}img{-webkit-user-drag:none}div{-webkit-user-select:none!important;user-select:none!important}.btn:hover{background-color:#ff5a5a}.btn:hover .btn-dot{--offset: 3px}.btn-dot{width:2.5px;height:2.5px;background-color:#fff;position:absolute;--offset: -2px;transition:all .1s ease-in-out}.btn-dot:nth-child(1){left:var(--offset);top:var(--offset)}.btn-dot:nth-child(2){right:var(--offset);top:var(--offset)}.btn-dot:nth-child(3){left:var(--offset);bottom:var(--offset)}.btn-dot:nth-child(4){right:var(--offset);bottom:var(--offset)}