/*-- REFERENTIAL - TESSISAMESS - 2021 --*/
/*-- GET THIS LAYOUT AT referential.insanejournal.com --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- 

	Find more fun stuff at:
	tessisamess.insanejournal.com
	tesscodes.dreamwidth.org
	patreon.com/tessisamess

--*/


/* REPLACEMENTS */

:root {
    /* COLORS */
    --text: #222;
    --date-tags: #bbb;
    --blockquote-bg: rgba(0, 0, 0, 0.05);
    --lightest: #fff;

    --page-bg: #ffffff;
    --content-bg: #fff;
    --borders: rgba(0, 0, 0, 0.1);

    --accent: #5197b4;
    --accent2: #000000;

    --sidebar-bg: #fff2d9;
    --header-bg: #fff;
    --char-border: #ffffff;

    --char-overlay: rgba(255, 255, 255, 0.911);
    --char-name: #468dc4;
    --char-sub: #222;
    --char-link: #fff;

    /* FONTS */
    --main-font: times new roman;
    --headings: "Special Elite", system-ui;
    --title-font: "Special Elite", system-ui;

    --body-text: 13px;
    --headings-style: uppercase;
    --title-style: none;

    --title-text: 60px;
    --subtitle-text: 20px;
    --nav-icons: 10px;
    --links-list: 12px;

    --splash-title: 113px;
    --splash-nav: 10px;
    --splash-links: 13px;

    --filter-header: 30px;
    --filter-titles: 1rem;
    --filter-text: 0.8rem;

    --character-titles: 1.2rem;
    --character-text: 0.7rem;

    --entry-titles: 19px;
    --entry-info: 10px;

    /* DIMENSIONS */
    --content-width: 625px;

    --header-icon: 100px;

    --margin: 30px;
    --padding: 30px;
    --entry-icon: 60px;

    --icons-radius: 100%;
    --nav-link-radius: 4px;

    /* DIRECTORY */

    --side-width: 200px;
    --filter-icon: 100px;
    --header-height: 200px;
    --filter-height: 40px;

    --characters-inset: 5vw;
    --character-width: 250px;
    --character-height: 300px;

    /* IMAGES */
    --private: url(https://i.imgur.com/dJgLxi8.png)center left no-repeat !important;
    --locked: url(https://i.imgur.com/tIooCJT.png)center left no-repeat !important;
    --customs: url(https://i.imgur.com/LcxM0s0.png)center left no-repeat !important;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #dcccab #65705f;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background: #65705f;
}

*::-webkit-scrollbar-thumb {
    background-color: #65705f;
    border-radius: 10px;
    border: 3px none #dcccab;
}

::selection {
    background: #b6bd77
}


/* FONTS */

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjx4wXg.woff2)format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Lato Bold';
    font-style: normal;
    font-weight: 900;
    src: url(https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh50XSwiPGQ.woff2)format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poiret One';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/poiretone/v9/UqyVK80NJXN4zfRgbdfbo55cVw.woff2)format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}


/* GENERAL */

*,
*:before,
*:after {
    box-sizing: border-box;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

body {
    margin: 0;
    padding: 0;
    background:
        repeating-linear-gradient(-45deg,
            transparent,
            transparent 25%,
            #9d9f73 0,
            #9d9f73 50%),
        repeating-linear-gradient(45deg,
            transparent,
            transparent 25%,
            #7d7f50 0,
            #7d7f50 50%), #9d9f73;

    background-size: 10em 10em;
    background-blend-mode: multiply;
    font-family: var(--headings);
    font-size: var(--body-text);
    color: var(--text);
    cursor: url(/images/icons/gauntlet.png), auto;
    text-shadow: 1px 1px 2px rgb(212, 196, 172);
}

blockquote {
    font-style: normal;
    padding: 15px;
    border-left: 3px solid var(--accent);
    background: var(--blockquote-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--headings);
    margin: 0;
    font-weight: normal;
    text-transform: var(--headings-style);
    color: var(--accent2);
}

img {
    max-width: 100%;
}

ul {
    list-style: square;
}

hr {
    height: 1px;
    border: none;
    background: var(--borders);
}

summary {
    cursor: pointer;
}

summary:focus {
    outline: none;
}

a,
a:visited,
a:active {
    color: var(--accent2);
    text-decoration: none;
    cursor: url(/images/icons/gauntlet.png), auto;
}

a:hover {
    color: var(--accent);
    text-decoration: none;
    cursor: url(/images/icons/gauntlet.png), auto;
}


/* WHOLE PAGE CONTAINERS */

#container {
    background: transparent;
    padding: var(--margin);
}

#container-inner {
    max-width: var(--content-width);
    margin: 0 auto;
}

.layout-two-column-left #alpha {
    margin: 0;
}

.layout-two-column-left #beta {
    float: none;
    width: auto;
}


/* MAIN COLUMN */

#alpha {
    background: transparent;
    border: none;
    padding: 0;
}

#alpha a,
#alpha a:visited {
    color: var(--accent);
}

#alpha a:hover {
    color: var(--accent2);
}

.content-nav {
    margin: var(--margin) 0 0 0;
    text-transform: uppercase;
}

.nav-bottom,
.entrypage {
    text-align: center;
}

#column-footer {
    clear: both;
}


/* ENTRIES */

.entry {
    margin: 0 0 var(--margin) 0;
    padding: var(--padding);
    background: var(--content-bg);
    border: 1px solid var(--borders);
    position: relative;
}

.entry-header {
    background: transparent;
    border: none;
    padding: 0;
}

.entry-header h3 {
    margin: 0;
    padding: 0;
    font-size: var(--entry-titles);
}

#alpha .entry-header a,
#alpha .entry-header a:visited {
    color: var(--accent2);
}

.entry-datetime {
    position: absolute;
    top: var(--padding);
    right: var(--padding);
    font-size: var(--entry-info);
    color: var(--date-tags);
    text-transform: uppercase;
}

.inner-entry-userpic {
    text-align: left;
    padding: 0;
}

.inner-entry-userpic img {
    position: absolute;
    top: 0;
    right: calc((var(--entry-icon) + 10px) * -1);
    width: var(--entry-icon);
    height: var(--entry-icon);
    background: var(--accent);
    border-radius: var(--icons-radius);
    padding: 5px;
}

.pic-poster {
    position: absolute;
    bottom: var(--padding);
    left: var(--padding);
    display: flex;
    font-family: var(--headings);
    font-size: var(--entry-info);
    text-transform: uppercase;
    line-height: 1;
}

.pic-poster b {
    font-weight: normal;
}

.pic-poster .ljuser~.ljuser:before {
    content: '/';
    margin: 0 4px;
}

.entry-content {
    margin-top: 10px;
}

.entry-text {
    min-height: 0;
    overflow: hidden;
    font-family: var(--main-font);
    line-height: 1.6;
    text-align: justify;
}

.ljtags {
    margin: 10px 0 0 0;
    font-family: var(--headings);
    font-size: var(--entry-info);
    text-transform: uppercase;
}

#alpha .ljtags a,
#alpha .ljtags a:visited {
    color: var(--date-tags);
}

.entry-linkbar {
    margin: 0;
    font-size: var(--entry-info);
    text-align: right;
    text-transform: uppercase;
}

.entry-linkbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.entry-linkbar li {
    display: inline;
    border: none;
    padding: 0;
    margin: 0;
}

.entry-linkbar li a {
    display: inline-block;
    margin: 10px 0 0 5px;
}


/* ARCHIVE VIEW */

.yearlinks {
    text-align: center;
    margin-bottom: 10px;
}

.year {
    list-style: none;
    margin: 0;
    padding: 0;
}

.year li {
    display: inline;
    padding: 0;
}

.lj-view-archive .entry-content {
    margin: 0;
}

.yeartable {
    border-collapse: separate;
    border: none;
    width: 100%;
}

td.monthlable,
td.viewmonth {
    letter-spacing: 2px;
    text-transform: uppercase;
    background: transparent !important;
}

td.monthlable {
    text-align: left;
}

td.viewmonth {
    text-align: right;
}

.dayname {
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    background: var(--accent) !important;
    color: var(--lightest);
}

.yeartable td {
    border: none !important;
    background: rgba(0, 0, 0, 0.05);
    padding: 5px;
}


/* TAGS & MONTH VIEW */

.lj-view-tags #alpha,
.lj-view-month #alpha {
    padding: var(--padding);
    background: var(--content-bg);
    border: 1px solid var(--borders);
}


/* SIDEBAR */

#beta {
    margin: 0 0 var(--margin) 0;
}

#beta-inner {
    font-size: var(--links-list);
    color: var(--accent2);
    text-align: center;
    text-transform: uppercase;
}

.module {
    display: none;
    padding: 0;
    background: transparent;
    margin: 0;
}

.module-customtext {
    display: block;
}

.module-customtext .module-content {
    padding: 0;
    display: flex;
}

#beta .title,
#beta .header {
    display: flex;
}

#beta .header {
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
}

#beta .header img {
    padding: 5px;
    background: var(--accent);
    border-radius: var(--icons-radius);
    width: var(--header-icon);
    height: var(--header-icon);
    margin: 0 10px 0 0;
}

#beta .title {
    align-items: center;
    font-family: var(--title-font);
    font-size: var(--title-text);
    text-transform: var(--title-style);
}

#beta .nav {
    font-family: Material Icons;
    text-transform: none;
    font-size: var(--nav-icons);
}

#beta .nav a {
    margin: 0 0 0 5px;
    background: var(--accent2);
    color: var(--lightest);
    padding: 6px;
    border-radius: var(--nav-link-radius);
    display: inline-block;
}

#beta .nav a:hover {
    background: var(--accent);
}

.module-typelist {
    display: block;
    margin: calc((var(--header-icon) / 4.5) * -1) 0 0 0;
}

.module-typelist ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.module-typelist li {
    display: flex;
    align-items: center;
}

.module-typelist li:before {
    content: '';
    width: 12px;
    height: 1px;
    background: var(--accent);
    margin: 0 2px;
}

.module-typelist li:first-of-type:before {
    display: none;
}

.module-layoutcredit {
    display: block;
    position: fixed;
    bottom: 12px;
    right: 10px;
    font-size: 8px;
}

.module-layoutcredit p {
    padding: 0;
    margin: 0;
}

.module-layoutcredit a {
    padding: 3px 10px;
    background: var(--content-bg);
    border: 1px solid var(--borders);
}


/* CONTENT FOOTER */

#content-footer {
    clear: both;
    height: 0;
}


/* ICON REPLACEMENTS */

img[src*="img/icon_private.gif"],
img[src*="img/icon_protected.gif"],
img[src*="img/icon_groups.gif"] {
    width: 0 !important;
    height: 0 !important;
    padding: 16px 0 0 18px !important;
}

img[src*="img/icon_private.gif"] {
    background: transparent var(--private);
}

img[src*="img/icon_protected.gif"] {
    background: transparent var(--locked);
}

img[src*="img/icon_groups.gif"] {
    background: transparent var(--customs);
}


/* DISABLED */

#header,
.nav-top,
#tagpage-header,
.date-header,
#sticky-note,
.lj-view-day .entry-datetime,
.outer-entry-userpic,
.mid-entry-userpic,
.pic-poster img,
.pic-poster a[href*="profile"],
.entry-metadata,
.entry-linkbar li a[href*=memadd],
.entry-linkbar li a[href*=tellafriend],
.entry-linkbar li a[href*=subscriptions],
.entry-linkbar li a[href$=html],
.module-header {
    display: none;
}


/* DIRECTORY CONTAINER */

.lj-view-recent .characters {
    background: linear-gradient(to right, var(--sidebar-bg) var(--side-width), var(--page-bg) var(--side-width));
    position: fixed;
    top: 0;
    left: 4px;
    right: 0;
    bottom: 0;
    overflow: auto;
    z-index: 3;
}

.lj-view-day .characters form {
    display: none;
}

.lj-view-day .characters:after {
    content: "Don't worry, your directory is still here! Click your entry title to access your 'edit entry' button.";
    display: block;
    text-align: center;
    padding: 40px;
    font-family: var(--headings);
    text-transform: var(--headings-style);
    font-size: var(--entry-titles);
    color: var(--accent);
}

.character form {
    position: relative;
}


/* DIRECTORY HEADER */

.characters header {
    float: left;
    clear: both;
    top: 0;
    height: var(--header-height);
    width: var(--side-width);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--borders);
    text-align: center;
    font-family: var(--title-font);
    font-size: var(--filter-header);
    line-height: 1;
}

.characters header img {
    padding-top: 35px;
    width: 40%;
    height: auto;
    transform: rotate(40deg);
    margin: 0 0 10px 0;
}

.characters header .title {
    text-transform: var(--title-style);
    margin: 0 0 10px 0;
    font-size: var(--filter-header);
}

.characters header .nav {
    font-family: Material Icons;
    text-transform: none;
    font-size: var(--nav-icons);
}

.characters header .nav a {
    margin: 0 3px;
    border: 1px solid var(--borders);
    color: var(--darkest) !important;
    padding: 6px;
    border-radius: var(--nav-link-radius);
}

.characters header .nav a:hover {
    background: var(--accent);
    color: var(--lightest) !important;
}

.navigation {
    padding: 20px;
    font-size: 0.9rem;
    line-height: 2;
    justify-items: left;
}

/* CHARACTERS */

.characters main {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    border-left: 1px solid var(--borders);
    padding: var(--characters-inset);
    color: var(--char-sub);
    text-transform: uppercase;
    text-align: center;
    font-size: var(--character-text);
}

.characters main .main-inner {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

.char {
    width: var(--character-width);
    height: var(--character-height);
    border: 10px solid var(--char-border);
    margin: 1vw;
    background-size: cover !important;
    box-shadow: 0 0 0 1px var(--borders);
}

.char[style*='(CHAR_IMG)'] {
    background: rgba(255, 255, 255, 0.2) !important;
}

.char-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 2;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    padding: 15px;
}

.char-inner h4 {
    font-size: var(--character-titles);
    color: var(--char-name);
}

.char-inner div {
    letter-spacing: 1px;
    margin: -25px 0;
}

.char-inner .ljuser {
    display: inline-block;
    min-width: 100px;
    margin: -25px 0 0 0;
    background: var(--char-link);
    border-radius: 3px;
    padding: 3px 0;
    border: 1px solid var(--accent);
}

.char:hover .char-inner {
    background: var(--char-overlay);
}

.char:hover div {
    margin: 0 0 5px 0;
}

.char:hover .ljuser {
    margin: 2px 0 0 0;
}

.char .char-inner * {
    opacity: 0;
    filter: blur(5px);
}

.char:hover .char-inner * {
    opacity: 1;
    filter: blur(0);
}


/* FILTER STYLE */

.characters strong {
    display: block;
    width: var(--side-width);
    background: var(--sidebar-bg);
    padding: 0 10px;
    letter-spacing: 3px;
    font-size: var(--filter-titles);
    font-family: var(--headings);
    color: var(--accent);
    text-align: center;
}

.characters strong:first-of-type {
    margin: 0;
}

.characters strong,
.characters input {
    float: left;
    clear: both;
    height: var(--filter-height);
    line-height: var(--filter-height);
    border-bottom: 1px solid var(--borders);
    text-transform: uppercase;
}

.characters input {
    -moz-appearance: none;
    appearance: none;
    width: var(--side-width);
    display: flex;
    cursor: pointer;
    margin: 0;
    font-family: var(--main-font);
    color: var(--text);
    letter-spacing: 2px;
    font-size: var(--filter-text);
}

.characters input:after {
    width: var(--side-width);
    background: var(--sidebar-bg);
    padding: 0 10px;
    border-bottom: 1px solid var(--borders);
}

.characters input:hover:after {
    padding: 0 10px 0 25px;
    color: var(--accent);
}

.characters input:checked:after {
    background: var(--accent2);
    color: var(--lightest);
}


/* FILTER TITLES */

.all:after {
    content: 'All';
    cursor: url(/images/icons/gauntlet.png), auto;
}

.t-free:after {
    content: 'Free';
    cursor: url(/images/icons/gauntlet.png), auto;
}

.t-paid:after {
    content: 'Paid';
    cursor: url(/images/icons/gauntlet.png), auto;
}

.t-tutorial:after {
    content: 'Tutorial';
    cursor: url(/images/icons/gauntlet.png), auto;
}

.t-pattern:after {
    content: 'Pattern';
    cursor: url(/images/icons/gauntlet.png), auto;
}

.characters input[name*='fav'][class*='t'] {
    text-transform: none;
    letter-spacing: 0;
    font-family: Material Icons;
    font-size: 13px;
    font-weight: normal;
}

.t-1:after {
    content: 'star star_outline star_outline star_outline star_outline';
}

.t-2:after {
    content: 'star star star_outline star_outline star_outline';
}

.t-3:after {
    content: 'star star star star_outline star_outline';
}

.t-4:after {
    content: 'star star star star star_outline';
}

.t-5:after {
    content: 'star star star star star';
}

.t-clothing:after {
    content: 'clothing';
    cursor: url(/images/icons/gauntlet.png), auto;
}

.t-18th:after {
    content: '18th Century';
    cursor: url(/images/icons/gauntlet.png), auto;
}

.t-kids:after {
    content: 'Kids';
    cursor: url(/images/icons/gauntlet.png), auto;
}

.t-home:after {
    content: 'Home & Decor';
    cursor: url(/images/icons/gauntlet.png), auto;
}

.t-accessories:after {
    content: 'Accessories';
    cursor: url(/images/icons/gauntlet.png), auto;
}

/*
.t-avg:after {
    content: 'Average Joe';
}

.t-anti:after {
    content: 'Antihero';
}

.t-care:after {
    content: 'Caregiver';
}

.t-create:after {
    content: 'Creative';
}

.t-hero:after {
    content: 'Hero';
}

.t-vill:after {
    content: 'Villain';
}

.t-fantasy:after {
    content: 'Fantasy';
}

.t-horror:after {
    content: 'Horror';
}

.t-mod:after {
    content: 'Modern';
}

.t-period:after {
    content: 'Period';
}

.t-scifi:after {
    content: 'Sci-Fi';
}

.t-super:after {
    content: 'Superhero';
}

.t-spn:after {
    content: 'Supernatural';
}
    */


/* FILTER - Price */

.t-paid:checked~main .free,
.t-free:checked~main .paid {
    display: none;
}


/* FILTER - Type */

.t-pattern:checked~main .tutorial,
.t-tutorial:checked~main .pattern {
    display: none;
}


/* FILTER - Category */

.t-clothing:checked~main .century,
.t-clothing:checked~main .kids,
.t-clothing:checked~main .home,
.t-clothing:checked~main .accessories,

.t-18th:checked~main .clothing,
.t-18th:checked~main .kids,
.t-18th:checked~main .home,
.t-18th:checked~main .accessories,

.t-kids:checked~main .clothing,
.t-kids:checked~main .century,
.t-kids:checked~main .home,
.t-kids:checked~main .accessories,

.t-home:checked~main .clothing,
.t-home:checked~main .century,
.t-home:checked~main .kids,
.t-home:checked~main .accessories,

.t-accessories:checked~main .clothing,
.t-accessories:checked~main .century,
.t-accessories:checked~main .kids,
.t-accessories:checked~main .home {
    display: none;
}


/* FILTER - ARCHETYPE

.t-anti:checked~main .avg,
.t-anti:checked~main .care,
.t-anti:checked~main .create,
.t-anti:checked~main .hero,
.t-anti:checked~main .vill,

.t-avg:checked~main .anti,
.t-avg:checked~main .care,
.t-avg:checked~main .create,
.t-avg:checked~main .hero,
.t-avg:checked~main .vill,

.t-care:checked~main .anti,
.t-care:checked~main .avg,
.t-care:checked~main .create,
.t-care:checked~main .hero,
.t-care:checked~main .vill,

.t-create:checked~main .anti,
.t-create:checked~main .avg,
.t-create:checked~main .care,
.t-create:checked~main .hero,
.t-create:checked~main .vill,

.t-hero:checked~main .anti,
.t-hero:checked~main .avg,
.t-hero:checked~main .care,
.t-hero:checked~main .create,
.t-hero:checked~main .vill,

.t-vill:checked~main .anti,
.t-vill:checked~main .avg,
.t-vill:checked~main .care,
.t-vill:checked~main .create,
.t-vill:checked~main .hero {
    display: none;
}


FILTER - GENRE

.t-fantasy:checked~main .horror,
.t-fantasy:checked~main .mod,
.t-fantasy:checked~main .period,
.t-fantasy:checked~main .scifi,
.t-fantasy:checked~main .shero,
.t-fantasy:checked~main .spn,

.t-horror:checked~main .fantasy,
.t-horror:checked~main .mod,
.t-horror:checked~main .period,
.t-horror:checked~main .scifi,
.t-horror:checked~main .shero,
.t-horror:checked~main .spn,

.t-mod:checked~main .fantasy,
.t-mod:checked~main .horror,
.t-mod:checked~main .period,
.t-mod:checked~main .scifi,
.t-mod:checked~main .shero,
.t-mod:checked~main .spn,

.t-period:checked~main .fantasy,
.t-period:checked~main .horror,
.t-period:checked~main .mod,
.t-period:checked~main .scifi,
.t-period:checked~main .shero,
.t-period:checked~main .spn,

.t-scifi:checked~main .fantasy,
.t-scifi:checked~main .horror,
.t-scifi:checked~main .mod,
.t-scifi:checked~main .period,
.t-scifi:checked~main .shero,
.t-scifi:checked~main .spn,

.t-shero:checked~main .fantasy,
.t-shero:checked~main .horror,
.t-shero:checked~main .mod,
.t-shero:checked~main .period,
.t-shero:checked~main .scifi,
.t-shero:checked~main .spn,

.t-spn:checked~main .fantasy,
.t-spn:checked~main .horror,
.t-spn:checked~main .mod,
.t-spn:checked~main .period,
.t-spn:checked~main .scifi,
.t-spn:checked~main .shero {
    display: none;
}

*/