body{
    background-color: #0F0F0F;
    margin: 0;
}

.center-hori{
    width: 100%;
    text-align: center;
}
table {
    margin: 2vh auto;
    border-collapse: collapse;
    width: auto;
    max-width: 95%;
}
th, td {
    padding: 0.2em 0.2em;
    text-align: center;
}
.center-vert {
    position: absolute;
    top: 50%;          
    left: 50%;         
    transform: translate(-50%, -50%); 
    width: 100%;
    text-align: center;       
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

.devider-text{
    height: 0.03vw;
}
.text-size{
    color:#FFFFFF;
    font-size: clamp(1rem, 4vw, 2.5rem)
}
.text-size-small{
    color:#CCCCCC;
    font-size: clamp(0.5rem, 2vw, 1.5rem)
}
.text-rubik {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}
input{
    font-size: clamp(1rem, 4vw, 2.5rem);
    background-color: #00000000;
    border-style: none;
    text-align: center;
    text-decoration: underline;
    color: white;
-webkit-appearance: none;
-moz-appearance: textfield;
}
button{
    text-decoration: underline;
    scale: 210%;
    color:#ffffff;
    background-color: #00000000;
    text-shadow: 0 0 1vw #ffffff;
    border-style: none;
}
.fade-in{
    animation-name: appear;
    animation-duration: 0.6s;
    animation-timing-function: ease-in-out
}
@keyframes appear{
    from {opacity: 0%;}
    to {opacity: 100%;}
}
.gold {
    color: #ffd700;
}
.orange {
    color: #ffa500;
}

.pink {
    color: #ff69b4;
}
.purple{
    color: #b726b7;
}
.violet {
    color: #ee82ee;
}
.blue {
    color: #4343ea;
}
.light_blue {
    color: #87ceeb;
}

.green{
    color: #008000;
}
.yellow_green{
    color: #9acd32;
}
.black{
    color: #fff;
}