body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Hide body scrollbars */
    background-color: #141414;
}

button{
    all: unset; /* Resets all button styles */
}

/* Tab menu at the bottom right corner */
.tab-container {
    display: flex;
    flex-direction: column; /* Stack tabs vertically */
    position: absolute;
    bottom: 0; /* Align the menu at the bottom */
    right: calc(0px + 20px); /* Shift the menu left by the width of the scrollbar */
    width: calc(15vw - 20px); /* Menu width is 15% of the viewport minus the scrollbar width */
    background-color: #131516;
    border-radius:5px;
    padding: 10px;
    z-index: 1000; /* Ensure it's on top of iframe */
    box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.5); /* Optional: Shadow for better visibility */
}

.tab {
    padding: 10px;
    padding-left: calc((15vw - 15px) *.20);
    background-color: #272a2d;
    margin-bottom: 5px; /* Space between tabs */
    text-align: left;
    cursor: pointer;
}

.tab-category{
    padding: 5px;
    width: 50%;
    margin-bottom: 5px; /* Space between tabs */
    color: #fff;
    text-align: center;
    font-size: large;
    position: flex;
    align-self: center;
}

iframe {
    width: 100vw;
    height: 100vh;
    border: none;
    overflow: hidden; /* Hide iframe scrollbars */
}

.content {
    display: none;
}

.content.active {
    display: block;
}

.cyan-btn{
    border-left: 3px solid #00ffea;
    color: #FFFFFF;
}

.cyan-btn.active,
.cyan-btn:hover{
    background-color: #00ffea44;
    font-weight: bold;
}

.blue-btn{
    border-left: 3px solid #00a6ff;
    color: #FFFFFF;
}

.blue-btn.active,
.blue-btn:hover{
    background-color: #00a6ff44;
    font-weight: bold;
}

.navy-btn{
    border-left: 3px solid #0055ff;
    color: #FFFFFF;
}

.navy-btn.active,
.navy-btn:hover{
    background-color: #0055ff44;
    font-weight: bold;
}

.purple-btn{
    border-left: 3px solid #c130ff;
    color: #FFFFFF;
}

.purple-btn.active,
.purple-btn:hover{
    background-color: #c130ff44;
    font-weight: bold;
}

.grape-btn{
    border-left: 3px solid #4c006d;
    color: #FFFFFF;
}

.grape-btn.active,
.grape-btn:hover{
    background-color: #4c006d44;
    font-weight: bold;
}

.red-btn{
    border-left: 3px solid #ff0000;
    color: #FFFFFF;
}

.red-btn.active,
.red-btn:hover{
    background-color: #ff000044;
    font-weight: bold;
}

.yellow-btn{
    border-left: 3px solid #ffea2c;
    color: #FFFFFF;
}

.yellow-btn.active,
.yellow-btn:hover {
    background-color: #ffea2c44;
    font-weight: bold;
}

.green-btn{
    border-left: 3px solid #29a327;
    color: #FFFFFF;
}

.green-btn.active,
.green-btn:hover{
    background-color: #29a32744;
    font-weight: bold;
}

.orange-btn{
    border-left: 3px solid #ff9100;
    color: #FFFFFF;
}

.orange-btn.active,
.orange-btn:hover{
    background-color: #ff910044;
    font-weight: bold;
}

.lime-btn{
    border-left: 3px solid #77ff00;
    color: #FFFFFF;
}

.lime-btn.active,
.lime-btn:hover{
    background-color: #77ff0044;
    font-weight: bold;
}

.pink-btn{
    border-left: 3px solid #f969c0;
    color: #FFFFFF;
}

.pink-btn.active,
.pink-btn:hover{
    background-color: #f969c044;
    font-weight: bold;
}

.white-btn{
    border-left: 3px solid #ffffff;
    color: #FFFFFF;
}

.white-btn.active,
.white-btn:hover{
    background-color: #ffffff44;
    font-weight: bold;
}

.gray-btn{
    border-left: 3px solid #656565;
    color: #FFFFFF;
}

.gray-btn.active,
.gray-btn:hover{
    background-color: #65656599;
    font-weight: bold;
}

.black-btn{
    border-left: 3px solid #000000;
    color: #FFFFFF;
}

.black-btn.active,
.black-btn:hover{
    background-color: #00000044;
    font-weight: bold;
}