/* onionring.js is made up of four files - onionring-widget.js, onionring-index.js, onionring-variables.js and onionring.css (this one!)
// it's licensed under the cooperative non-violent license (CNPL) v4+ (https://thufie.lain.haus/NPL.html)
// it was originally made by joey + mord of allium (蒜) house, last updated 2020-10-24 */

/* === ONIONRING.CSS === */
/* this file affects the style of the widget. remember to replace all instances of #webringid with whatever value you have for ringID in the onionring-widget.js file. make sure it still has the # at the front, though! probably easiest to use find+replace to do it */

@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Stint+Ultra+Expanded&display=swap');

@font-face {
    font-family: 'Distro';
    src: url('https://vtubers.neocities.org/distro.ttf') format('truetype');
}

#vtubers-on-neocities {
    margin: auto;
    font-family: 'Distro', monospace;
    color: #fff;
    position: relative;
    padding: 1px;
    /* creates some space around the widget */
}

#vtubers-on-neocities a {
    outline: none;
    text-decoration: none;
    background: none;
    padding: 1px 1px 0;
}

#vtubers-on-neocities a:link {
    background: none;
    color: #ffffff;
    text-shadow: 1px 1px #4a2f66;
}

#vtubers-on-neocities a:visited {
    background: none;
    color: #ffffff;
    text-shadow: 1px 1px #4a2f66;
}

#vtubers-on-neocities a:focus {
    border-bottom: 1px solid;
    background: none;
    color: #333;
}

#vtubers-on-neocities a:hover {
    border-bottom: 1px solid;
    background: none;
    color: rgb(252, 108, 56);
}

#vtubers-on-neocities a:active {
    background: none;
    color: #eee;
}

#vtubers-on-neocities table {
    /*background-color: #000; /* makes the background pure black */
    background:
        radial-gradient(ellipse at 22% 31%,
            rgb(65, 53, 98),
            transparent 55%),
        radial-gradient(ellipse at 97% 87%,
            rgb(81, 82, 132),
            transparent 55%),
        radial-gradient(ellipse at 61% 12%,
            rgb(209, 61, 58),
            transparent 45%),
        radial-gradient(ellipse at 53% 57%,
            rgb(180, 65, 113),
            transparent 55%),
        radial-gradient(ellipse at 17% 79%,
            rgb(218, 134, 77),
            transparent 55%),
        rgb(0, 0, 0);
    border: 2px;
    border-style: outset;
    margin: 0 auto;
    /* centers the widget */
}

#vtubers-on-neocities table tr td {
    border-collapse: separate;
}

#vtubers-on-neocities .webring-prev {
    text-align: right;
}

#vtubers-on-neocities .webring-info {
    margin: 0;
    padding-left: 2px;
    padding-right: 2px;
}

#vtubers-on-neocities .webring-next {
    text-align: left;
}

#vtubers-on-neocities .webring-links {
    font-size: small;
    text-align: center;
}

#vtubers-on-neocities-title-wrapper {
    font-size: 0.5em;
    position: relative;
    height: 4.5em;
    width: 20em;
    margin: 0 auto;
    padding: 0;
    text-shadow:
        0 0 0.3em rgba(0, 0, 0, 1),
        0 0 0.3em rgba(255, 255, 255, 1),
        0 0 1em rgba(0, 0, 0, 1);
}

#vtubers-on-neocities-title-elem-1 {
    position: absolute;
    color: rgb(252, 108, 56);
    font-weight: bold;
    font-family: "Stint Ultra Expanded", monospace;
    font-size: 2.8em;
    top: 0;
    left: 1.7rem;
    z-index: 1;
    user-select: none;
}

#vtubers-on-neocities-title-elem-2 {
    position: absolute;
    color: rgb(0, 0, 0);
    font-family: 'Krona One', sans-serif;
    font-size: 3.5em;
    top: .5rem;
    left: 3.2rem;
    text-align: center;
    z-index: 0;
    user-select: none;
}

#vtubers-on-neocities-title-elem-3 {
    position: absolute;
    color: rgb(192, 168, 231);
    font-family: 'Distro', monospace;
    font-size: 1.65em;
    transform: scale(1.6, 1);
    top: 1.75rem;
    left: 3rem;
    z-index: 4;
    user-select: none;
}

#vtubers-on-neocities-title-elem-4 {
    position: absolute;
    color: white;
    font-style: italic;
    font-family: courier, "courier new", monospace;
    font-size: 3em;
    top: 1.3rem;
    left: 8.7rem;
    z-index: 4;
    user-select: none;
}

#vtubers-on-neocities-title-elem-5 {
    position: absolute;
    color: yellow;
    font-family: monospace;
    font-weight: bold;
    font-size: 1.9em;
    transform: scale(1.2, 1) rotate(3deg);
    top: 1.95rem;
    left: 2.7rem;
    z-index: 5;
    text-shadow: 0 0 5px black;
    user-select: none;
}

.strikethrough {
    text-decoration: line-through;
}