@import "https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css";

/* Styling for PC (default) */
#main-box {
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    background: rgb(212,212,212);
    background: linear-gradient(144deg, rgba(212,212,212,1) 0%, rgba(255,255,255,1) 100%);
}

.cover img {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
}

html {
    background: rgb(20,20,20);
    background: linear-gradient(144deg, rgba(20,20,20,1) 0%, rgba(60,60,60,1) 100%);
    overflow-x: hidden; /* To remove any horizontal scroll */
}

.is-large img {
    max-height: 30px;
}

.is-larger img {
    max-height: 35px;
}

.is-medium img {
    max-height: 20px;
}

.mini-box:hover {
    background-color: rgb(240, 240, 240);
    transition: all 0.1s;
}

.mini-box {
    transition: all 0.1s;
    cursor: pointer;
    margin-bottom: 15px !important;
    display: flex;
    align-items: center;
}
.media-left {
    width: 80%;
}
.media-right {
    margin-left: auto;
}
.disabled {
    pointer-events: none;
    opacity: 0.5;
    /* Optional: Add additional styles to convey disabled state */
    cursor: not-allowed;
}

/* Styling for mobile devices (max-width 600px) */
@media (max-width: 600px) {
    #main-box {
        max-width: 100%;
        padding: 10px;
    }

    .cover img {
        max-width: 80%;
    }

    .box {
        padding: 10px;
    }

    .mini-box {
        width: 100%;
    }
}