@import url(./webring-styles.css);
@import url(/resources/fonts/web-fonts.css);

main {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.pill-box {
    --page-padding: 10px;
    --pillbox-height: 50px;

    background-color: var(--main-color);
    color: var(--pill-text);
    min-height: var(--pillbox-height);

    font-size: 22px;
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 3;
}

/* pixel border */
.pill-box {
    clip-path: polygon(
        0px calc(100% - 21px),
        3px calc(100% - 21px),
        3px calc(100% - 15px),
        6px calc(100% - 15px),
        6px calc(100% - 9px),
        9px calc(100% - 9px),
        9px calc(100% - 6px),
        15px calc(100% - 6px),
        15px calc(100% - 3px),
        21px calc(100% - 3px),
        21px 100%,
        calc(100% - 21px) 100%,
        calc(100% - 21px) calc(100% - 3px),
        calc(100% - 15px) calc(100% - 3px),
        calc(100% - 15px) calc(100% - 6px),
        calc(100% - 9px) calc(100% - 6px),
        calc(100% - 9px) calc(100% - 9px),
        calc(100% - 6px) calc(100% - 9px),
        calc(100% - 6px) calc(100% - 15px),
        calc(100% - 3px) calc(100% - 15px),
        calc(100% - 3px) calc(100% - 21px),
        100% calc(100% - 21px),
        100% 21px,
        calc(100% - 3px) 21px,
        calc(100% - 3px) 15px,
        calc(100% - 6px) 15px,
        calc(100% - 6px) 9px,
        calc(100% - 9px) 9px,
        calc(100% - 9px) 6px,
        calc(100% - 15px) 6px,
        calc(100% - 15px) 3px,
        calc(100% - 21px) 3px,
        calc(100% - 21px) 0px,
        21px 0px,
        21px 3px,
        15px 3px,
        15px 6px,
        9px 6px,
        9px 9px,
        6px 9px,
        6px 15px,
        3px 15px,
        3px 21px,
        0px 21px
    );
}


.pill-header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;

    position: relative;

    min-height: var(--pillbox-height);
    height: var(--pillbox-height);
}
.pill-header div:nth-child(1) {
    padding-top: var(--text-top-padding);
}

.pill-arrow {
    position: absolute;
    right: 15px;
    top: 10px;

    width: 33px;
    height: 33px;

    background-image: var(--dd-down);
    background-size: 100%;

    transition: all 0.5s linear;
 
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}
.pill-arrow.up {
    transform:  rotate(180deg);
}

.pill-content {
    width: 100%;

    max-height: calc(100vh - (2 * var(--page-padding)) - var(--pillbox-height));

    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scrollbar-color: var(--acct-color) var(--main-color);

    transition: max-height 1s linear;
}
.pill-content.shrink {
    max-height: 0;
    overflow: hidden;
}
.pill-content.scroll {
    overflow: auto;
}

.webring-box {
    width: 290px;
    position: absolute;
    top: var(--page-padding);
    left: var(--page-padding);

    max-height: calc(100vh - (var(--page-padding) * 2));
}
.webring-box .pill-header {
    cursor: var(--c-pointer);
}
.webring-content > * {
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.update-box {
    position: absolute;
    bottom: var(--page-padding);
    right: var(--page-padding);
    padding: 0 15px;
}

.login-pane {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login-buttons {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.mini-text {
    font-size: 12px;
    padding-top: 10px;
    text-align: center;
}

.small-text {
    font-size: 18px;
    padding-top: 10px;
    text-align: center;
}



.webring {
    display: grid;
    grid-template-columns: min-content min-content min-content;
    font-size: 12px;
    margin: auto;
    text-align: center;
    text-decoration: none;
    gap: 2px;
}
.webring img {
    align-self: start;
    padding: 0 2px;
}
.webring .prev {
    text-align: right;
    padding-top: 2px;
}
.webring .next {
    text-align: left;
    padding-top: 2px;
}
.btn {
    min-width: 100px;
}

a.btn {
    text-decoration: none;
    text-align: center;
}




.splash-img {
    height: 90vh;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    animation: bob 2s infinite alternate linear;
    cursor: var(--c-pointer);
}
.splash-img img {
    max-height: 90vh;
    max-width: 90vw;
}

.splash-text {
    font-family: "Lucida Hand Pixelated 32", "GBB";
    font-size: 48px;
    color: var(--icon-text-color);
    text-align: center;
    margin-top: -24px;
}

.splash-small {
    font-size: 24px;

    color: white;
    text-align: center;
    margin-top: -16px;
}

@keyframes bob {
    0% {
        transform: translateY(-5px) translateX(-50%);
    }
    100% {
        transform: translateY(10px) translateX(-50%);
    }
}