/* -------------------------------------- index */
.index-flex {
    display: flex;
    gap: 10px;
    height: 680px;
}

/* -------------------------------------- indexL */
.indexL-flex {
    width: 532px;
    display: flex;
    gap: 10px;
    flex-direction: column;
}

/* -------------------------------------- info */
.info-divider {
    width: 533px;
    filter: drop-shadow(0px 2px white) drop-shadow(0 -1px white) drop-shadow(2px 0 white) drop-shadow(-1px 0 white);
}

.info-container {
    display: flex;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
    flex-direction: column;
    gap: 5px;
}

.info-text {
    font-size: 13px;
    margin: 0px 10px;
    max-height: 130px;
    overflow: auto;
}

.info-clover {
    width: 70px;
    filter: brightness(1.4) saturate(0.5) contrast(0.8);
    float: left;
    margin-right: 10px;
}

.info-list {
    display: flex;
}

.info-ul {
    display: flex;
    padding: 10px;
    border: 1px solid;
    border-radius: 3px;
    min-width: 160px;
    height: 130px;
    margin: 0;
    flex-direction: column;
    gap: 7px;
    background: url(/graphics/backgrounds/NC-bg1.gif);
    background-position: bottom;
    background-size: 31px;
    overflow: auto;
}

.info-h3 {
    font-size: 13px;
    text-transform: uppercase;
    text-indent: 1px;
    text-align: center;
}

.info-li {
    font-size: 13.5px;
    margin-left: 10px;
    padding-left: 5px;
}

.info-li::marker {
    content: url(/graphics/icons/AP-icon3.gif);
}

/* -------------------------------------- info1 */
.info1-header {
    border: 1px solid;
    border-radius: 10px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    padding: 5px;
    padding-left: 13px;
    background: linear-gradient(to bottom,  #fdf9f9 0%,#fae8eb 50%,#f5d9db 51%,#fdf3f5 100%);
}

.info1-h2 {
    display: flex;
    font-size: 13px;
    letter-spacing: 4px;
    text-indent: 0.5px;
}

.info1-h2::before {
    display: block;
    content: "♪";
    padding-right: 10px;
    color: #edc5c9;
    text-shadow: 0 1px var(--black), 1px 0px var(--black), 0 -1px var(--black), -1px 0px var(--black), 1px -1px var(--black), -1px 1px var(--black), 1px 1px var(--black), -1px -1px var(--black);
    text-indent: 0.5px;
}

.info1-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: white;
    border: 1px solid;
    border-radius: 5px;
    border-top-right-radius: 20px;
    padding: 5px;
}

/* -------------------------------------- info2 */
.info2-box {
    width: -webkit-fill-available;
    border: 1px solid;
    border-radius: 6px;
    height: 278px;
    background: url(/graphics/backgrounds/OP-bg9.gif);
    background-size: 8px;
    padding: 10px;
}

/* -------------------------------------- poll */
.poll {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: white;
    border: 1px solid;
    border-radius: 10px;
    gap: 2px;
    width: 225px;
    box-shadow: 2px 2px 2px inset white, -1px -1px 3px inset #d1a5adbd;
}

.poll-input {
    font-size: 11px;
    letter-spacing: 4px;
    width: -webkit-fill-available;
    border-bottom: 1px dashed;
    margin: 0px 10px;
}

.poll-buttons {
    margin-top: 7px;
    width: -webkit-fill-available;
}

.poll-buttons input {
    background: linear-gradient(to bottom,  #f9faf8 0%,#ebf2e2 50%,#e4eed6 51%,#f6faf0 100%);
    border: 1px solid;
    border-radius: 4px;
    padding: 5px 15px;
    box-shadow: 2px 2px 2px inset white, -1px -1px 1px inset #b4c3a3;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 4px;
}

.poll-buttons input:hover {
    cursor: pointer;
    box-shadow: -2px -2px 2px inset white, 1px 1px 1px inset #b4c3a3;
}

.poll-answer {
    width: 9px;
    accent-color: #8a936a;
}

.poll-links {
    width: -webkit-fill-available;
    margin: 5px;
    margin-right: 10px;
    margin-top: 0;
}

.poll-links a {
    letter-spacing: 3px;
    font-size: 11px;
    font-weight: bold;
    text-underline-offset: 3px;
}

.poll-title {
    display: flex;
    text-align: center;
    width: -webkit-fill-available;
    height: 35px;
    border-bottom: 1px solid;
    border-radius: 10px 10px 0px 0px;
    background: linear-gradient(to bottom,  #fdf9f9 0%,#fae8eb 50%,#f5d9db 51%,#fdf3f5 100%);
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 2px inset white, -2px -0px 3px inset #d9ababbd;
}

.poll-h2 {
    font-size: 13px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-shadow: 0 1px var(--black), 1px 0px var(--black), 0 -1px var(--black), -1px 0px var(--black);
}

.poll-input label {
    margin-left: 7px;
}
/* -------------------------------------- indexR */
.indexR-flex {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* -------------------------------------- webrings */
.webrings-h2 {
    width: -webkit-fill-available;
    text-align: center;
    border: 1px var(--black) solid;
    border-radius: 5px;
    padding: 5px;
    background: url(/graphics/backgrounds/SK-17.gif);
    background-size: 40px;
}

.webrings-flex {
    display: flex;
    gap: 10px;
    width: 237px;
    height: -webkit-fill-available;
    border-image-source: url(/graphics/borders/SP-1.png);
    border-image-slice: 5;
    border-image-width: 5px;
    border-image-repeat: round;
    border-style: solid;
    border-radius: 5px;
    background: white;
    overflow: auto;
    padding: 10px;
    flex-direction: column;
    align-items: center;
}

.webrings-flex a:hover {
    font-style: italic;
}

.webrings-flex a {
    color: var(--black);
}