body {
    padding: 0;
    margin: 0;
    background-color: #1e2129;
    color: ghostwhite;
    /*! font-size: ; */
    font-family: monospace;
    overflow-x: hidden;
}

.cat {
    font-size: 2em;
    margin: 0px;
}
.meowtils {
    font-size: 7em;
    font-weight: normal;
    margin: 10px;
}
.main {
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-width: 90%;
}
.clickdiv {
    text-decoration: none;
    background: #111317;
    /*! border-color: white; */
    /*! border-style: solid; */
    /*! border-width: thin; */
    /*! border-left-style: solid; */
}
.actionbar {
    display: flex;
    align-content: center;
    justify-content: right;
    background-color: #a65eff;
    box-shadow:
        0 0 0.2rem #0000001a,
        0 0.2rem 0.4rem #0003;
    max-height: 52.8px;
}
.downloadbutton:hover {
    background-color: #ccadff;
}
.downloadbutton {
    border: none;
    background-color: #bd8cff;
    font-size: 4em;
    color: ghostwhite;
    cursor: pointer;
    padding: 0.3vh;
    text-decoration: none;
    border-radius: 10px;
    padding-left: 1.2vw;
    padding-right: 1.2vw;
    /*! max-width: 200px; */
    display: inline;
}

.barbutton {
    display: flex;
    font-size: 2em;
    color: ghostwhite;
    font-family: monospace;
    /*! padding: 1vh; */
    min-width: 9vw;
    align-content: center;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 10px;
}
.barbutton:hover {
    background-color: #1e1c25;
}
.link {
    text-decoration: none;
    color: ghostwhite;
}
.info1 {
    margin-top: 2vh;
}
.info2 {
    margin-top: 70px;
}

.infos {
    font-size: 1.7em;
    text-decoration: none;
    font-weight: normal;
    margin: 0px;
}

.guidelink:hover {
    color: #bd8cff;
    text-decoration: underline;
}

.version {
    font-size: 1.1em;
}

/* Hidden popup (off-screen and transparent) */
.popup {
    position: fixed;
    inset: 0; /* full-screen overlay */
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0); /* transparent when hidden */
    pointer-events: none; /* ignore clicks when hidden */
    opacity: 0;
    transform: scale(0.98);
    transition:
        opacity 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

/* Visible when targeted via #menu in URL */
.popup:target {
    background: rgba(0, 0, 0, 0.45); /* overlay */
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

/* Popup card */
.popup .menu {
    background: #33373c;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    min-width: 400px;
}

/* Links styling */
.menu a {
    text-decoration: none;
    color: ghostwhite;
    padding: 0.5rem 0.6rem;
    border-radius: 6px;
    font-size: 2em;
}
.menu a:hover {
    background: #bd8cff;
}

/* Close button in top-right of popup */
.close-btn {
    position: absolute;
    right: 1rem;
    top: 1rem;
    text-decoration: none;
    color: #fff;
    font-size: 1.4rem;
    background: transparent;
}

.info3 {
    display: block;
    align-content: center;
    /*! justify-content: center; */
    /*! flex-direction: column; */
    /*! align-items: center; */
    padding-top: 4%;
    font-size: 1em;
    position: fixed;
    bottom: 0;
    text-align: center;
    padding-bottom: 3vh;
}

/* default: overlay ignores clicks when popup hidden */
.popup .overlay-close {
    position: fixed;
    inset: 0;
    display: block;
    background: transparent;
    pointer-events: none; /* ignore clicks when not targeted */
    z-index: 0;
}

/* when popup is targeted, enable clicks on overlay */
.popup:target .overlay-close {
    pointer-events: auto;
    cursor: default;
}

/* ensure menu is above overlay */
.popup .menu {
    position: relative;
    z-index: 1;
}

.catpic {
    max-width: 250px;
    width: 21em;
}

.clickdiv_middle {
    border-color: #a65eff;
    /*! border-style: solid; */
    border-width: thin;
    border-left-style: solid;
    border-right-style: solid;
}
.bar_logo {
    display: flex;
    width: 65px;
    cursor: pointer;
    margin-right: auto;
}
.meowtils_cute {
    display: none;
}
.bar_logo:hover {
    .meowtils_normal {
        display: none;
    }
    .meowtils_cute {
        display: inline;
    }
}
@media (max-width: 767px) {
    body {
        font-size: 2vw;
    }
    .actionbar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
    }
    .barbutton {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .clickdiv {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .clickdiv_middle {
        border-style: none;
    }
    .bar_logo {
        display: none;
    }
    .popup .menu {
        min-width: 200px;
    }
}