:root{
    --mdui-color-background-light:var(--mdui-color-tertiary);
    --mdui-color-surface:var(--mdui-color-tertiary);
    --mdui-color-on-surface:255,255,255;
    --mdui-color-on-surface-variant:220,220,220;
}
#loadingProgressBar{
    margin: 15% 49%;
    stroke: #F8DDE1;
    position: absolute;
}
.progressHide{
    animation: hide 0.3s forwards;
}
*{
    user-select: none;
    -webkit-user-drag: none;
}
.show{
    animation: show 0.3s forwards;
}
.hide{
    display: none;
}
.cardText{
    color: gainsboro;
    margin-top: 3%;
}
#stateIcon{
    margin: 1% 45%;
}
#stateTitle{
    color: white;
    letter-spacing: 1px;
}
#stateDescriptor{
    color: gainsboro;
    margin-top: 5px;
}
.detectCard{
    --shape-corner:5px;
    margin-top: 3%;
    width: 90%;
    min-height: 100px;
    padding-top: 1%;
}
body{
    overflow-x: hidden;
}
#main{
    flex-direction: column;
    align-items: center;
}
ul{
    list-style-type: disc;
    color: gainsboro;
}
.detailText{
    margin-left: 2%;
}
@keyframes hide{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        display: none;
    }
}
@keyframes show{
    0%{
        opacity: 0;
        display: none;
    }
    100%{
        opacity: 1;
        display: flex;
    }
}