*{padding:0;margin:0;box-sizing:border-box}
#breaker{height:200vh;width:200%;background-color:var(--theme-primary,#c70039);opacity:1;animation:breakeranimate 2s linear;display:none;transition:all .4s ease;border-radius:5px;z-index:10;position:fixed}
@keyframes breakeranimate{0%{transform:translateY(-100%)}
50%{transform:translateY(0%)}
100%{transform:translateY(100%)}
}@-webkit-keyframes breakeranimate{0%{transform:translateY(-100%)}
50%{transform:translateY(0%)}
100%{transform:translateY(100%)}
}#breaker-two{height:0vh;width:200%;background-color:#080808;opacity:1;animation:breakeranimatetwo 2s linear;display:none;transition:all .4s ease;z-index:10;border-radius:25px;position:fixed}
@keyframes breakeranimatetwo{0%{transform:translateX(-100%) translateY(100%)}
50%{transform:translateX(0%) translateY(100%)}
100%{transform:translateX(100%) translateY(100%)}
}@-webkit-keyframes breakeranimatetwo{0%{transform:translateX(-100%)  translateY(100%)}
50%{transform:translateX(0%) translateY(100%)}
100%{transform:translateX(100%) translateY(100%)}
}