@import url('webring-styles.css');

body {
    padding: 0 20vw;
    background-color: floralwhite;
}

h1 {
    text-align: right;
}

#peeps * {
    margin-right: 6vh;
    line-height: 8vh;
    font-size: 2.5em;
    text-decoration: none;
    opacity: .6;

    &:hover {
        opacity: 1;
    }
}

#sevgi {
    padding: 10px;
    border: dotted red 3px;
    font-family: Times New Roman;
    font-style: italic;
    color: white;
    background: magenta;
}

/* #fred {
    all: unset;
} */

#lexie {
    font-family: Georgia, 'Times New Roman', Times, serif;
    z-index: -1;
    color: #ffffff;
    overflow: hidden;
    -webkit-text-stroke: .01em #f08000;
    background-image: radial-gradient(circle at center center,
            #ff9900,
            #e5e5f7),
        repeating-radial-gradient(circle at center top,
            #f68eff,
            #ff2437,
            .2em,
            transparent .2em,
            transparent .1em),
        repeating-radial-gradient(circle at center bottom,
            #f68eff,
            #ff2437,
            .2em,
            transparent .2em,
            transparent .1em);
    background-blend-mode: difference;
    text-shadow: .1em 0 0 #fff6d0,
        .2em 0 0 #fff0af,
        .3em 0 0 #ffe676c9,
        .4em 0 0 #ffdf5071,
        .5em 0 0 #ffd41348;
}

#feline {
    color: hotpink;
    font-style: italic;
    font-family: cursive;
    text-shadow: 5px 5px 1px orange;
}

#martina {
    background-color: red;
    border-radius: 5px;
    color: blue;
    font-family: Courier;
    font-style: italic;
    text-align: center;
}

#kim {
    font-family: serif;
    font-weight: bold;
    paint-order: stroke;
    color: maroon;
    -webkit-text-stroke: 3rem lightcyan;
}

#claudio {
    transform: skew(15deg);
    opacity: 0.4;
    color: #7F76C3;
    text-shadow: 7px 5px 0px #4FC3A2;
    font-family: "Segoe script";
}

#kiara {
    font-family: 'GottaCatch-Electric';
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    color: plum;
    text-decoration: mediumseagreen wavy underline;
}

#chrissy {
    font-family: 'Andale Mono';
    color: transparent;
    -webkit-text-stroke: 1.5px #8000ff;
    text-shadow: 10px 2px 15px red;
    letter-spacing: -1px;
}

#tessa {
    font-family: Times New Roman;
    color: cadetblue;
    -webkit-text-stroke: 2px darkcyan;
    text-shadow: 17px 12px 23px coral;
    text-transform: capitalize;
    z-index: -10;
    transform: rotate (180deg);
    background-color: yellow;
    border-radius: 50%;
    text-align: center;
}

#eleni {
    color: #DFFF00;
    font-family: 'Jacquarda Bastarda 9', monospace;
    -webkit-text-stroke: 1px Lime;
    text-decoration: underline overline dotted;
    line-height: 1;
}

#charlie {
    position: relative;
    font-style: italic;
    font-family: monospace;
    color: MediumSeaGreen;
    -webkit-text-stroke: 1px orchid;
    text-shadow: 1px 3px 3px HotPink;
    transform: skew(-15deg);
    text-align: center;
    overflow: visible;
    padding: 1.5rem;
    z-index: 1;
    background: transparent;
}

#charlie::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transform: skew(0deg);
    background: radial-gradient(ellipse, rgb(249, 169, 153) 0%, rgb(253, 161, 218, 0.5) 40%, rgb(253, 161, 218, 0) 70%, rgb(253, 161, 218, 0) 100%);
    background-color: lavender;
    --g: /20.56% 20.56% radial-gradient(#000 calc(71% - 1px), #0000 71%) no-repeat;
    mask: radial-gradient(100% 100%, #000 calc(38.366% - 1px), #0000 38.366%) subtract, 100% 50% var(--g), 93.301% 75% var(--g), 75% 93.301% var(--g), 50% 100% var(--g), 25% 93.301% var(--g), 6.699% 75% var(--g), 0% 50% var(--g), 6.699% 25% var(--g), 25% 6.699% var(--g), 50% 0% var(--g), 75% 6.699% var(--g), 93.301% 25% var(--g);
}

#wyn {
    font-family: "Courier New", monospace;
    color: #00ff00;
    text-shadow: 7px 4px 8px rgb(151 164 151 / 50%);
    display: inline-block;
    padding: 0;
    line-height: 5vw;
    border-radius: 10vw;
}

#imre {
    font-family: Times New Roman;
    font-weight: bold;
    border-width: 2em;
    color: purple;
    text-shadow: 1 em 1em 1em lavender;
}

#zuhui {
    font-family: monospace;
    color: lime;
    mask-image: linear-gradient(to bottom, transparent 0%, white 70%);
}

/* #manetta {} */

pre {
    width: calc(fit-content - 20vw);
    text-wrap: wrap;
    padding: 1vh 3vh;
    background-color: lavender;
    font-size: 1.1em;
    line-height: 1.8;
}

#local, #xpub {
    position: fixed;
    bottom: 5vh;
    /* left: 20vw; */
    color: indigo;
    height: fit-content;
    width: fit-content;

    p {
        margin-bottom: 1vh;
    }
}

#local {
    left: 20vw;
}

#xpub {
    right: 20vw;
}

#xpubRing p {
    font-style: italic;
    width: 50vh;
    margin-bottom: 0;
}

#xpubRing {
    /* position: fixed;
    right: 20vw;
    bottom: 5vh; */
    text-align: right;
    /* margin-top: 5vh; */
}

#xpubRing a {
    text-decoration: none;
    font-style: italic;
    color: slateblue;
    padding: 3px 8px;
    border: 1px dotted slateblue;
    border-radius: 25px;
    margin-right: 5px;
}

#xpubRing a:hover {
    font-style: normal;
}


#localRing p {
    width: 55vh;
    margin-bottom: 0;
}

#localRing {
    margin: 0;
    text-align: left;
}

#localRing a {
    margin-right: 3vh;
    padding: 5px 8px;
}

#localRing a:hover {
    font-style: normal;
}