html, body, .main {
    background-color: #000;
}

.bg-e7 {
    background-color: #E7E7E7;
}

.bg-1e {
    background-color: #1e1e1e;
}

.bg-paper{
    background-color: #D2BA99;
}

.hex-e7 {
    color: #E7E7E7;
}

.bd-fff {
    border: 1px solid white;
}

.bd-0 {
    border: 0px solid #1E1E1E;
}

.sh1 {
    font-size: 20px;
    font-weight: bold;
}
  
.curvebox {
    border-radius: 5px;
    font-style: italic;
    padding: 0px 10px;
}
  
.sh3 {
    font-size: 15px;
    font-weight: bold;
    font-style: italic;
}
  
.sP {
    font-size: 10px;
    font-weight: bold;
    margin-bottom: 0px;
}
  
.paperFont {
    font-family: "Noto Serif", serif;
    letter-spacing: 2px;
    font-weight: 500;
}

.pixelFont {
    font-family: 'Press Start 2P', cursive;
}

.markerFont {
    font-family: "Permanent Marker";
}

.custom-btn {
    height: 40px;
    padding: 0px 10px;
    font-size: 10px;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.dark-bg {
    background-color: #1E1E1E;
    color: #E7E7E7;
    border: 0px solid #1E1E1E;
    -webkit-transition: background 0.1s, color 0.1s, border 0.1s; /* For Safari 3.0 to 6.0 */
    transition: background 0.1s, color 0.1s, border 0.1s; /* For modern browsers */
}

.dark-bg:hover {
    /* background-color: #000; */
    color: white;
}