/* completely restyle contact list */
#contact-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 60%;
    padding: 0;
    margin: 1.5rem auto 0 auto;
    list-style: none;

    a {
        --theme-light: color-mix(in srgb, var(--theme) 50%, #fff);
        display: block;
        width: 100%;
        height: 100%;
        padding: 0.5rem 0;
        background: var(--theme);
        color: #fff;
        font-weight: bold;
        text-decoration: none;
        border: solid var(--theme-light) 1px;
    }
}

/* === hide sidebar === */
body:has(#sidebar) {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-areas:
        "header"
        "main"
        "footer";
}

#sidebar {
    display: none;
    overflow: revert;
}
/* === END ===*/

/* disable tooltips */
[data-tooltip] {
    all: revert;

    &:hover::after,
    &:hover::before {
        all: revert;
    }
}

/* make both header and footer non sticky */
main {
    overflow: visible;
}

/* make icon not look weird */
.card h2 cite {
    max-width: 80%;
}

/* make img container wider */
.accordion details {
    .img-container {
        width: 100%;
    }
    
    p {
        padding: 0 1rem;
    }
}

/* mobile ==> show smaller text */
#page404 {
    #small404, #cmd-small {
        display: revert;
    }
}

/* make popup be in-flow so it doesnt cover text */
#page403 #popup403 {
    position: static;
    transform: none;
    width: 70dvw;
    height: auto;
    flex: 1;
    margin: 2dvh auto;

    .marquee span:last-of-type {
        display: none;
    }
}