.drag-drop-zone{background-image:url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23333' stroke-width='4' stroke-dasharray='16' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e")}.gradient-animatoin-fill{height:100%;width:100%;background:transparent;align-self:center;justify-content:center;position:relative;overflow:hidden;padding:.5rem}.gradient-animatoin-fill:after{--gradientHeight:10000px;--gradientWidth:10000px;content:"";position:absolute;height:var(--gradientHeight);width:var(--gradientWidth);top:calc((100% - var(--gradientHeight)) / 2);left:calc((100% - var(--gradientWidth)) / 2);background:conic-gradient(#ff6d1b,#ffee55,#5bff89,#4d8aff,#6b5fff,#ff64f9,#ff6565);background-size:cover;background-position:50%;background-clip:border-box;animation:animateBorder 2s linear infinite;z-index:0}@keyframes animateBorder{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.border-content{background:#1c1c1c;height:inherit;width:inherit;z-index:2;position:relative;align-content:center;justify-content:center}.box2 img{width:90%;display:block;margin:0 auto}.active-page{&:after{height:.4rem;width:100%;transform:none}}.hover-underline{&:after{content:"";position:absolute;bottom:-1rem;right:0;width:100%;height:4px;border-radius:.2rem;background-color:var(--color-lightGray);transform-origin:right;transform:scaleX(0);transition:transform .3s ease-in-out}&:hover:after{transform-origin:left;transform:scaleX(1)}.dark &{&:after{background-color:var(--color-lightGreen)}}}