.hide {
    display: none !important;
}
.show-info {
    display: flex !important;
}
.h1 {
    font-size: 35px !important;
}
.h2 {
    font-size: 30px !important;
}
.h3 {
    font-size: 25px !important;
}
.h4 {
    font-size: 23px !important;
}
.h5 {
    font-size: 20px !important;
}
.h6 {
    font-size: 18px !important;
}
.bold {font-weight: bold !important;}
.bolder {font-weight: bolder !important;}
.toblack {color: #77030d;}
.toblack:hover {color: #18150a;}
.b-bronze {
    background: #483508 !important;
}
.b-blue {
    background: #081e36 !important;
}
.b-red {
    background: #361509 !important;
}
.bg-red {
    background: #601c0b !important;
}
.bg-red-emph {
    background: #872d1c !important;
}
.b-orange {
    background: #572f07 !important;
}
.b-green {
    background: #134910 !important;
}
.b-purple {
    background: #2a1050 !important;
}
.b-lblue {
    background: #0e464b !important;
}
.b-lgreen {
    background: #326915 !important;
}
.b-lyellow {
    background: #646515 !important;
}
.grad-orange {
    background-image: linear-gradient(135deg, #230404 20%, #6e2c06 35%, #9a2a02 55%, #340701 80%);
}
.out-black {
    border: outset 2px black;
}
.out-black:hover {
    border-bottom: outset 2px gray;
    border-top: inset 2px dimgray;
    border-left: inset 2px black;
    border-right: outset 2px darkgray;
}
.out-dgreen {
    border: outset 3px darkgreen;
}

.out-dred {
    border: outset 2px darkred;
}

.out-dblue {
    border: outset 2px darkblue;
}

.out-dgold {
    border: outset 2px darkgoldenrod;
}

.out-dsilv {
    border: outset 3px silver;
}

.out-dpur {
    border: outset 3px purple;
}

.out-coral {
    border: outset 2px coral;
}
.out-yg {
    border: outset 2px yellowgreen;
}
.bgold:hover {
    border: 2px ridge darkgoldenrod !important;
}
.btn-purple:hover {
    border: #390d46 groove 2px !important;
}
.ro1 {border-radius: 5px !important}
.r2 {border-radius: 7px !important}
.ro2 {border-radius: 8px !important}
.r3 {border-radius: 9px !important}
.r4 {border-radius: 16px !important}
.r5 {border-radius: 19px !important}
.underline{text-decoration: underline !important;}
/* add 2end layer text (appear on mouse detection) */
.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.5rem;
    pointer-events: none;
}
.card {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}