body {
    margin: 0;
    padding: 0;
}
.loading-overlay {
    overflow: hidden;
    z-index: 1;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    transition: 500ms ease-in-out opacity;
    position: relative;
}
.loading-container {
    margin-left: 50%;
    transform: translate(-50%,-50%);
    margin-top: 50vh;
    width:-moz-fit-content;
    width:fit-content;
    position: absolute;
}
.progress-bar {
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(#990a6e, #370550);
    animation: clip-loading 900ms ease-in-out alternate infinite;
    width: 100%;
    transition: 500ms ease-in opacity;
    opacity: 1;
}
.enter-button {
    border: none;
    outline: none;
    color: #370550;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: #fff -1px 1px 0px,
        1px 1px 0 #fff,
        1px -1px 0 #fff,
        -1px -1px 0 #fff;
    letter-spacing: 1.5px;
    font-size: 28px;
    font-weight: 1000;
    font-style: normal;
    cursor: pointer;
    margin-top: 1rem;
    transition: 500ms ease-in-out;
    background-color: #370550;
    border-bottom: 10px solid #990a6e;
    border-radius: 50px;
    transition: 150ms ease-in-out, 500ms ease-out opacity, 100ms linear background-color;
    opacity: 1;
    height: 95px;
    width: 300px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: left;
    box-shadow: 0 5px 5px #990a6e;
    -webkit-tap-highlight-color: transparent;
}
.enter-button:hover {
    transform: scale(1.05) translateX(-50%) rotateX(-15deg);
    border-bottom: 15px solid #990a6e;
    height: 90px;
    background-color: #3d0658;
    color:#3d0658;
    box-shadow: 0 5px 15px #990a6e;  
}
.enter-button:active {
    transform: scale(0.9) translateX(-50%) rotateX(15deg);
    border-bottom: 10px solid #990a6e;
    height: 100px;
    background-color: #3d0658;
    color:#3d0658;
    box-shadow: 0 5px 15px #990a6e;  
}
.hide {
    opacity: 0 !important;
}
@media screen and (max-width: 768px) {
    .enter-button {
        font-size: 20px;
        height: 70px;
        width: 200px;
        -webkit-text-stroke-width: 0.03rem;
        border-bottom: 7px solid #990a6e;
    }
    .enter-button:hover {
        height: 65px;
        -webkit-text-stroke-width: 0.035rem;
        border-bottom: 12px solid #990a6e;
    }
}
@media screen and (max-width: 500px) {
    .enter-button {
        scale: 0.9;
    }
}
@media screen and (min-width: 2500px) {
    .progress-bar {
        height: 5px;
    }
}
@keyframes clip-loading {
    0% {
        clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
    }
    50% {
        clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(90% 0, 100% 0%, 100% 100%, 100% 100%);
    }
    /*75% {
        clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
    }
    100% {
        clip-path: polygon(0 0, 0 0, 0% 100%, 0 100%);
    }*/
    
}