body{background:#fff;color:#000;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";display:flex;justify-content:center;align-items:center;height:100vh;margin:0}.page-container{text-align:center}.input-textbox{margin:24px 0}.next-button{position:absolute;top:50%;display:inline-block;transform:translate(0, -25%) rotate(90deg);font-family:Lucida Sans Unicode;font-size:64px;color:#666666;cursor:pointer}.next-button:hover{color:#000}.colour-box{width:88%;height:88%;border:1px solid black;background-color:transparent;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.outer-box{height:190px;width:190px;border:3px solid transparent;display:inline-block;position:relative;margin:5px;overflow:hidden}.outer-box.show-border::before{content:'';position:absolute;top:0px;left:-4px;width:100%;height:100%;border-top:4px solid blue;border-right:4px solid blue;visibility:visible;animation:topright 0.5s ease-in-out forwards}.outer-box.show-border::after{content:'';position:absolute;bottom:0px;right:-4px;width:100%;height:100%;border-bottom:4px solid blue;border-left:4px solid blue;visibility:visible;animation:bottomleft 0.5s ease-in-out forwards}@keyframes topright{0%{width:0;height:0;padding-bottom:0;visibility:hidden}25%{width:100%;height:0;padding-bottom:0;visibility:visible}50%{width:100%;height:100%;padding-bottom:0;visibility:visible}75%{width:100%;height:100%;padding-bottom:0;visibility:visible}100%{width:100%;height:100%;opacity:1;visibility:visible}}@keyframes bottomleft{0%{width:0;height:0;padding-top:0;visibility:hidden}25%{width:0;height:0;padding-top:0;visibility:hidden}50%{width:0;height:0;padding-top:0;visibility:hidden}75%{width:100%;height:0;padding-top:0;visibility:visible}100%{height:100%;width:100%;visibility:visible}}