@font-face {
    font-family: "Nebula Sans";
    src: local("Nebula Sans"),
    local("Nebula Sans Medium"),
    local(NebulaSans-Medium),
    url("./fonts/woff2/NebulaSans-Medium.woff2") format("woff2"),
    url("./fonts/woff/NebulaSans-Medium.woff") format("woff"),
    url("./fonts/otf/NebulaSans-Medium.otf") format("opentype");
}
@font-face {
    font-family: "Nebula Sans";
    font-style: italic;
    src: local("Nebula Sans Medium Italic"),
    local(NebulaSans-MediumItalic),
    url("./fonts/woff2/NebulaSans-MediumItalic.woff2") format("woff2"),
    url("./fonts/woff/NebulaSans-MediumItalic.woff") format("woff"),
    url("./fonts/otf/NebulaSans-MediumItalic.otf") format("opentype");
}
@font-face {
    font-family: "Nebula Sans";
    font-weight: bold;
    src: local("Nebula Sans Bold"),
    local(NebulaSans-Bold),
    url("./fonts/woff2/NebulaSans-Bold.woff2") format("woff2"),
    url("./fonts/woff/NebulaSans-Bold.woff") format("woff"),
    url("./fonts/otf/NebulaSans-Bold.otf") format("opentype");
}
@font-face {
    font-family: "Nebula Sans";
    font-weight: bold;
    font-style: italic;
    src: local("Nebula Sans Bold Italic"),
    local(NebulaSans-BoldItalic),
    url("./fonts/woff2/NebulaSans-BoldItalic.woff2") format("woff2"),
    url("./fonts/woff/NebulaSans-BoldItalic.woff") format("woff"),
    url("./fonts/otf/NebulaSans-BoldItalic.otf") format("opentype");
}
@font-feature-values "Nebula Sans" {
    @styleset {
        a: 1;
        g: 2;
        l: 3;
    }
}
@font-face {
    font-family: "Space Mono";
    src: local("Space Mono"),
    local("Space Mono Regular"),
    local(SpaceMono-Regular),
    url("./fonts/woff2/SpaceMono-Regular.woff2") format("woff2"),
    url("./fonts/woff/SpaceMono-Regular.woff") format("woff"),
    url("./fonts/ttf/SpaceMono-Regular.ttf");
}
@font-face {
    font-family: "Space Mono";
    font-style: italic;
    src: local("Space Mono Italic"),
    local(SpaceMono-Italic),
    url("./fonts/woff2/SpaceMono-Italic.woff2") format("woff2"),
    url("./fonts/woff/SpaceMono-Italic.woff") format("woff"),
    url("./fonts/ttf/SpaceMono-Italic.ttf");
}
@font-face {
    font-family: "Space Mono";
    font-weight: bold;
    src: local("Space Mono Bold"),
    local(SpaceMono-Bold),
    url("./fonts/woff2/SpaceMono-Bold.woff2") format("woff2"),
    url("./fonts/woff/SpaceMono-Bold.woff") format("woff"),
    url("./fonts/ttf/SpaceMono-Bold.ttf");
}
@font-face {
    font-family: "Space Mono";
    font-style: italic;
    font-weight: bold;
    src: local("Space Mono Bold Italic"),
    local(SpaceMono-BoldItalic),
    url("./fonts/woff2/SpaceMono-BoldItalic.woff2") format("woff2"),
    url("./fonts/woff/SpaceMono-BoldItalic.woff") format("woff"),
    url("./fonts/ttf/SpaceMono-BoldItalic.ttf");
}
@font-face {
    font-family: "sqbb";
    src: local(sqbb),
    url("./fonts/woff2/sqbb.woff2") format("woff2"),
    url("./fonts/woff/sqbb.woff") format("woff"),
    url("./fonts/ttf/sqbb.ttf") format("truetype");
}
@keyframes floatInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 100%;
        transform: translateX(0);
    }
}

@keyframes floatInBottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 100%;
        transform: translateY(0);
    }
}

@keyframes floatInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 100%;
        transform: translateX(0);
    }
}

@keyframes hover {
    from {
        translate: 0 10px;
    }
    to {
        translate: 0 -10px;
    }
}

@keyframes hover2 {
    from {
        translate: 0 10px;
    }

    to {
        translate: 0 0px;
    }
}

@keyframes rotate {
    from {
        rotate: 1deg;
    }
    to {
        rotate: -1deg;
    }
}

@keyframes halfhover {
    from {
        transform: translateY(5px);
    }
    to {
        transform: translateY(-5px);
    }
}

body {
    background-color: #16171b;
    background-image: url("imgs/M93_Eguivar.jpg"), radial-gradient(circle at 50% -20%,rgb(18, 39, 39) 50%,rgb(30, 15, 40));
    background-position: center;
    background-attachment: fixed;
    background-size: contain;
    background-blend-mode: lighten;
    color: #b7b6c1;
    font-family: 'Nebula Sans', 'Whitney SSm', 'Open Sans', sans-serif;
    font-variant-alternates: styleset(a, g, l);
    overflow-x: hidden;
}
a.linkImg {
    text-decoration: none;
}
svg {
    transition: 0.2s;
    fill: #b7b6c1;
}

.sLink {
    transition: 0.2s;
}

svg.toyhouse:hover, a.toyhouse:hover svg {fill: #008cba;}
a.toyhouse {background-image: linear-gradient(to left, #008cba, #008cba);}
a.toyhouse:hover {color: #008cba;}

svg.artfight:hover, a.artfight:hover svg {fill: #58c9e7;}
a.artfight {background-image: linear-gradient(to left, #58c9e7, #58c9e7);}
a.artfight:hover {color: #58c9e7;}

svg.modrinth:hover, a.modrinth:hover svg {fill: #1bd96a;}
a.modrinth {background-image: linear-gradient(to left, #1bd96a, #1bd96a);}
a.modrinth:hover {color: #1bd96a;}

svg.gitgay:hover, a.gitgay:hover svg {fill: #b66de4;}
a.gitgay {background-image: linear-gradient(to left, #b66de4, #b66de4);}
a.gitgay:hover {color: #b66de4;}

svg.github:hover {
    fill: #5e6c7a;
}
svg.website:hover {
    fill: #3067ff;
}

svg.codeberg:hover, a.codeberg:hover svg {fill: #2185d0;}
a.codeberg {background-image: linear-gradient(to left, #2185d0, #2185d0);}
a.codeberg:hover {color: #2185d0;}

svg.geohash:hover {
    fill: #9bdf7f;
}
svg.ao3:hover, a.ao3:hover svg {fill: #970000;}
a.ao3 {background-image: linear-gradient(to left, #970000, #970000);}
a.ao3:hover {color: #970000;}

svg.discord:hover, a.discord:hover svg {fill: #5865F2;}
a.discord {background-image: linear-gradient(to left, #5865F2, #5865F2);}
a.discord:hover {color: #5865F2;}

svg.tumblr:hover, a.tumblr:hover svg {fill: #00a9ea;}
a.tumblr {background-image: linear-gradient(to left, #00a9ea, #00a9ea);}
a.tumblr:hover {color: #00a9ea;}

svg.pronounscc:hover, a.pronounscc:hover svg {fill: #a874fd;}
a.pronounscc {background-image: linear-gradient(to left, #a874fd, #a874fd);}
a.pronounscc:hover {color: #a874fd;}

svg.youtube:hover, a.youtube:hover svg {fill: #ff0033;}
a.youtube {background-image: linear-gradient(to left, #ff0033, #ff0033);}
a.youtube:hover {color: #ff0033;}

svg.email:hover, a.email:hover svg {fill: #23ffd6;}
a.email:hover {color: #23ffd6;}

.cornerLinks {
    margin: 13px 0 10px;
    float: right;
    text-align: right;
}
.tags span {
    display: inline-block;
    border: 1px solid #bf72e9;
    color: #bf72e9;
    background-color: rgba(191, 114, 233, 0.2);
    padding: 7px;
    margin: 5px;
    margin-left: 0;
    border-radius: 10px;
}
.tags span.date, .dateButton {
    border-color: #15b99b;
    color: #15b99b;
    background-color: rgba(25, 218, 182, 0.2);
    font-variant-numeric: tabular-nums;
}
.tags span.old, .toggleButton.old {
    border-color: #78787E;
    color: #78787E;
    background-color: rgba(120, 120, 126, 0.2)
}
.toggleButton {
    border-color: #bf72e9;
    color: #bf72e9;
    background-color: rgba(191, 114, 233, 0.2);
}
.toggleButton, .dateButton {
    cursor: pointer;
    margin-top: 5px;
}
.toggleButton.bOn, .dateButton.bOn {
    border-color: #13ff75;
    color: #13ff75;
    background-color: rgba(27, 217, 106, 0.2);
}
.toggleButton.bOff, .dateButton.bOff {
    border-color: #d8273e;
    color: #d8273e;
    background-color: rgba(216, 39, 62, 0.2);
}
.restrictWidth {
    width: 100%;
    max-width: 1300px;
    margin-inline: auto;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    padding: 0;
    position: absolute;
}
.title {
    font-family: sqbb, sans-serif;
    color: #23ffd6;
    font-size: 5em;
    text-align: center;
    padding-top: 10px;
}
.t1, .t2, .t3, .t4, .t5, .t6, .t7, .t8 {
    animation: halfhover 3s ease-in-out infinite alternate;
    display: inline-block;
}
.t1 {animation-delay: -1.75s;}
.t2 {animation-delay: -1.5s;}
.t3 {animation-delay: -1.25s;}
.t4 {animation-delay: -1s;}
.t5 {animation-delay: -0.75s;}
.t6 {animation-delay: -0.5s;}
.t7 {animation-delay: -0.25s;}

p, label, textarea, input, button {
    font-size: 1.1em;
    font-family: 'Nebula Sans', 'Whitney SSm', 'Open Sans', sans-serif;
    font-variant-alternates: styleset(a, g, l);
}
p {
    margin: 16px 0 0;
    line-height: 150%;
}
a {
    text-decoration: none;
    color: #23ffd6;
    background-image: linear-gradient(to left, #23ffd6, #23ffd6);
    background-size: 0 0.1em, 100% 0.1em;
    
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
}
a:hover, a:active {
    background-size: 100% 0.1em;
}
a.t88x31, a.linkImg, a.badge, a.hiddenLink {
    background: none !important;
}
a.t88x31 {
    height: 31px;
    margin: 1px;
    display: inline-block;
    transition: none;
}
/*a:hover, a:active {
    text-decoration: underline;
}*/
a.t88x31 img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}
.hiddenLink, a.hiddenLink:hover, a.hiddenLink:active {
    color: #b7b6c1;
    text-decoration: none;
    cursor: text;
}
small {
    font-size: 0.7em;
    display: block;
}
h1 small {
    display: inline;
    font-size: 0.5em;
}
p small {
    display: inline;
}
h1, h2, h3, h4 {
    font-family: "Space Mono", monospace;
    font-weight: normal;
    margin: 10px 0;
}
code {
    font-family: "Space Mono", monospace;
}
pre {
    text-align: left;
    overflow-x: auto;
    margin: 5px auto;
    background-color: #151c22;
    border-radius: 5px;
}
textarea {
    resize: none;
    width: 100%;
    margin-right: 300px;
}
label {
    display: block;
    margin-top: 16px;
    margin-bottom: 10px;
}
form {
    padding: 0 10%;
}
input {
    max-width: 90%;
}
form button {
    float: right;
}
.qDate {
    float: right;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.qName {
    display: inline-block;
    color: #78787e;
}
.askQ {
    margin-top: 10px;
    margin-left: 5px;
    border-left: 5px solid #78787e;
    padding: 10px;
    padding-left: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #151c22;
}

.gBorder.leftImg {
    margin-left: 120px;
}
.leftImg .gBox {
    padding-left: 90px;
    min-height: 190px;
}
.gBorder.rightImg {
    margin-right: 120px;
}
.rightImg .gBox {
    padding-right: 125px;
    min-height: 190px;
    text-align: right;
}
.sonaImg {
    height: 300px;
    position: absolute;
    margin-top: -50px;
}
.leftImg .sonaImg {
    left: 10px;
}
.rightImg .sonaImg {
    right: 10px;
}
.leftImg .cornerLinks {
    float: right;
}
.rightImg .cornerLinks {
    float: left;
}

/* gradient border boxes */
.gBox {
    padding: 6px 16px 16px;
    background-color: #141f27;
    background-image: url("imgs/spectre.png");
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
}
.gBorder {
    padding: 5px;
    margin: 20px 25px 25px;
    border-radius: 15px;
    background: #23ffd6;
    background: linear-gradient(180deg, #23ffd6 10%, #7699e7 60%, #bf72e9 90%); /* will be theme-dependent */
    background-attachment: fixed;
    /* do animations on gBoxes here */
}
.gBorder.qBox {
    margin: 20px 10% 50px;
}
.gBorder.imgBorder {
    margin: 0;
    float: right;
    height: fit-content;
    margin-left: 5px;
}
.gBorder.imgBorder img {
    border-radius: 10px;
    background-color: #151c22;
    display: block;
}

/* sidebar stuff */
#mainContent {
    position: absolute;
    right: 0px;
    left: 255px;
}
#sidebar {
    width: 220px;
    top: 25px;
    min-height: 270px;
    left: 25px;
    /*animation-name: floatInLeft;
    animation-duration: 1s;*/
}
#sidebar p, #sitemap {
    margin: 7px 0;
}
#sidebar small {
    text-align: center;
}
.sidewrap {
    min-height: 100%;
    margin-bottom: -100px;
}
#sitemap {
    list-style: none;
    padding: 0;
}
#sitemap li {
    margin: 5px;
}
#taur {
    position: relative;
    left: -20px;
    bottom: -15px;
    height: 100px;
    z-index: 1000;
    float: left;
}
#taurPad {
    height: 80px;
}
@media (max-width: 600px) {
    .gBorder.qBox {
        margin: 20px 25px 50px;
    }
    .notSmall {
        font-size: 0.9em;
        padding-top: 5px;
    }
    #mainContent {
        position: relative;
        width: 100%;
        left: 0;
    }
    #sidebar {
        width: auto;
        top: 0;
        left: 0;
        margin: 25px;
    }
    #sitemap li {
        display: inline;
        margin: 0 10px;
    }
}