* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    color: rgba(253, 160, 0, 1);
}

.loader-container {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-color: #111;
}

.border-animation {
    border: 4px solid transparent;
    padding: 40px 80px;
    position: relative;
    animation: borderGrow 2s forwards;
    border-image: linear-gradient(90deg, #00f260, #0575e6) 1;
}

.border-animation h1 {
    margin: 0;
    font-size: 2.5rem;
    z-index: 1;
}

@keyframes borderGrow {
    0% {
        border-image-slice: 1;
        border-width: 4px;
        border-image: linear-gradient(90deg, #00f260, #0575e6) 1;
        border-image-width: 0%;
    }

    100% {
        border-image-width: 100%;
    }
}

main.hidden {
    display: none;
}