html{
    width: 100%;
    height: 100%
}

body{
    width: 100%;
    height: 100%;
    overflow:clip;
    background-color:black;
    color:white;
    font-family:system-ui;
}

canvas{
    width:100%;
    height:100%;
    overflow: hidden;   
}

a {
    color: cornflowerblue
}

a:visited {
    color: rgb(187, 205, 237)
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

@keyframes pulse {
    0%{
        transform: scale(0.9)
    }
    50%{
        transform: scale(1.1)
    }
    100%{
        transform: scale(0.9)
    }
}

.spinnerparent{
    width: 100%;
    height: 100%;
    left: 50%;
    top:50% ;
    animation: spin 4000ms infinite linear;
}

.spinner{
    width: 100%;
    height: 100%;
    animation: pulse 1000ms infinite ease-in-out;
}



.spinnerholder{
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 200px 1fr;
    grid-template-rows: 1.5fr 200px 0.5fr
}

.loadingview{
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 1.2fr 50px 0.8fr;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.5s;

}
.loadingframe{
    background-color: gray;
    border: 3px solid white;
    border-radius: 3px;
    position: relative;
    opacity: 1;
}

.loadingbar{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 100%;
    background-color: green;
    transition: right 0.1s;
}

#custom-loader {
    margin-top: 155px;
    width: 80%;
    height: 50px;
    background: lightgray;
    box-shadow: 0px 0px 15px 5px black;
}

#custom-loader .fill {
    width: 0%;
    height: 100%;
    background: red;
}