VAPORAME

body{ background-color: #0a0066; font-size: 0.8em; color: #161233; font-family: Calibri; padding: 0; margin: 3; background: linear-gradient(rgb(251, 220, 220, 0.15), rgb(251, 220, 220, 0.15)); }

html, body { /** background-image:url(‘xx’);*/ background-repeat:repeat; background-color: #5c5a7a; }

.header { border: 3px double #333333; background: linear-gradient(#d0cbfa, #b9b2ff); text-align: center; margin: 0 auto; margin-top: 5px; top: 0; height: 0 auto; width: 100%; font-size: 1.1em; }

.menu-links { border: 3px double #333333; background: linear-gradient(#d0cbfa, #b9b2ff); text-align: center; margin: 0 auto; margin-top: 5px; top: 0; height: 0 auto; width: 100%; font-size: 1.3em; }

.menu-links ul { padding: 0; margin: 5px; display: inline-block; font-size: 1.1em; }

.menu-links li { display: inline-block; padding: 5px; margin-left: 10px; margin-right: 10px; }

.menu-links li a { text-decoration: none; color: black; padding: 20px; }

/* Change the color of links on hover */ .menu-links a:hover { text-decoration: none; font-style: italic; }

.wrapper a:hover { font-style: italic; }

.sidebar-left ul { list-style-type: none; padding: 0; }

.sidebar-left ul li { padding-top: 5px; padding-bottom: 5px; font-size: 1em; }

.wrapper-links { justify-items: center; }

.wrapper-links table { padding: 0.09em; text-align: center; }

.wrapper-links td { border: 1px solid black; border-radius: 10px; padding: 0.5em; width: 20em; }

.wrapper-links td a { text-decoration: none; }

.dropdown-content { margin-left: 10px; }

.sidebar-right .inner { justify-items: center; }

.sidebar-right ul { list-style-type: none; padding: 0; }

.sidebar-right ul li { display: flex; justify-items: center; }

.wrapper-header { background: none; top: 0; margin: 0 auto; width: 1400px; font-size: 1.1em; display: flex; }

.wrapper-right { background: none; top: 0; margin: 0 auto; width: 70%; text-align: center; }

.wrapper { background: none; top: 0; margin: 0 auto; width: 1400px; display: flex; justify-items: center; justify-content: center; }

.sidebar-left { width: 70%; }

.sidebar-right { width: 70%; }

.main { width: 250em; font-size: 1.2em; }

.wrapper, i { color: #161233; }

.wrapper, .link a { color: #161233; }

.css, .link a { text-align: center; }

.box { border: 5px double #333; background: #f2f0ff; padding: 0; margin: 2px; }

.links { margin-top: 1em; margin-bottom: 1em; }

.title { /suppress title, since we’re putting the title as text in the header box/ display: none; }

.footer { height: 0; text-align: center; color: #f2f0ff; font-size: 1.2em; }

.footer a { color: white; }

.box h1, .box h2, .box h3 { background: #d0cbfa; font-size: 1.25em; margin: 0; padding: 0.35em 0.25em 0.3em 0.25em; text-align: center; border-bottom: 3px double #333; }

.box h4 { border: 2px solid black ; border-radius: 10px; padding: 10px; font-size: 1.1em; margin-left: 0.1em; margin-right: 0.1em; }

.h5 { text-align: center; font-size: 2em; }

.inner { padding: 0.25em 1em 0.3em 1em; }

.blog { padding: 0.25em 1em 0.3em 1em; }

/* ko-fi icon .fa-ko-fi::after { color: #ffffff; content: “\f004”; font-size: 30%; font-weight: 900; margin: 1.2em 0 0 -2.9em; position: absolute; }*/

/* push down menu */ nav.sidebar-left-menu > ul > li > ul { display: block; height:0px; visibility:hidden; opacity:0; transition:0.2s ease; } nav.sidebar-left-menu > ul > li:hover > ul { height:100px; visibility:visible; opacity:1; }

/scroll bar/ .scroll-box { width: 100%; height: 100px; border: 1px solid; }

.scroll-box { overflow: scroll; scrollbar-color: black; scrollbar-width: thin; }

.dropdown { position: relative; }

.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 80px; padding: 4px 4px; font-size: 0.7em; border: 1px solid black; }

.dropdown-content a { color: black; padding: 10px 10px; text-decoration: none; display: block; }

.dropdown:hover .dropdown-content { display: block; }

.tags { display: flex; flex-wrap: wrap; }

.tag { margin: 0.2em; border: solid 2px #6264c4; border-radius: .6em; padding: .3em 0.8em; font-size: 1em; background-color: #F8FCFD; font-weight: bold; }

.tag a { text-decoration: none; }

.image-gallery { display: inline-block; text-align: center; font-size: 0; border: 1px solid black; margin: 5px; width: 250px; }

.image-gallery img { width: 100%; height: auto; }

.anchor { margin: 0 auto; }

.projectlist ul { list-style: none; padding: 0; border: 1px solid #8f89e0; border-width: 5px; border-radius: 5px; padding: 1em; display: inline-block; }

.projectlist ul li { padding: 8px 40px; border-bottom: 5px solid #8f89e0; }

.projectlist ul li:last-child { border-bottom: none; }

.projectlist li { padding-left: 1rem; &::before { content: ”🔷 ”; } &:nth-child(2)::before { content: ”🔷 ”; } &:nth-child(3)::before { content: ”⭐ ”; } &:nth-child(4)::before { content: ”🔷 ”; } &:nth-child(5)::before { content: ”🔷 ”; } &:nth-child(6)::before { content: ”🔷 ”; } &:nth-child(7)::before { content: ”⭐ ”; } &:nth-child(8)::before { content: ”⭐ ”; } &:nth-child(9)::before { content: ”🔷 ”; } }

.projectlist a { text-decoration: none; }

/* fanfic list / :root { /* customize your style by changing the variables in these brackets / —body-background: #fff; —main-background: #fff; —text: #333; —accent: #2616b8; —accent-dark: #644cd1; —accent-light: #dbeef2; —highlight-color: #aee6ec; —fandom-button: #cfcfcf; —fic-metadata-divider: ” // ”; / change this to your liking **/

/** these can be changed to solid, dotted, dashed, double, and none. it combines with border-size in some cases / —main-border-style: solid; —link-border-style: dotted; / links only, also can be wavy **/ —hr-style: dotted;

/** some sizing, which you can change but I highly advise for you to keep the provided units (em, %, and px respectively). smaller than 1 can be used as decimals, e.g. 0.8 **/ —base-size: 1em; —line-height: 150%; —main-width: 60em; —border-size: 2px;

/** calculations for sizing, you might not want to touch these **/ —size-quarter: calc(var(—base-size) / 4); —size-half: calc(var(—base-size) / 2); —size-one-half: calc(var(—base-size) * 1.5); —size-double: calc(var(—base-size) * 2); }

.filterFic { width: auto; margin: 15px 0; display: none; }

fic-summary { padding: 10px 0; margin: 0 20px; display: block; font-size: 0.8em; }

fic-summary p { padding: 0 0 0.5em; margin: 0; }

fic-summary p:last-child { padding: 0; }

.show { display: block; }

#fandom-navigation { margin: var(—size-double) 0 0; }

.masterlist { margin: 10px 0; overflow: hidden; }

.fandomButton { border: none; outline: none; padding: var(—base-size); background-color: var(—fandom-button); display: inline-block; margin: var(—size-quarter) var(—size-quarter) var(—size-quarter) 0; font-size: var(—base-size); color: var(—text); font-family: var(—main-font); }

.fandomButton:hover { background-color: var(—accent-dark); color: white; }

.fandomButton.active { background-color: var(—accent); color: white; }

.filterFic ul { list-style-type: none; margin: 0; padding: 0; }

.filterFic ul li { display: inline; margin: 0; padding: 0; }

.filterFic ul li:after { content: var(—fic-metadata-divider); color: var(—accent); }

.filterFic ul li:last-child:after { content: ” ”; }

/* For narrow screens: slightly narrows sidebars, and makes the width

• of the main/center div flexible (sized relative to viewport width.) */ @media(max-width:800px) { .wrapper-header, .header, .menu-links { width: 100%; }

  .wrapper { display: grid; width: 100%; }

  .main { order: 1; width: 100%; }

  .sidebar-left { order: 2; width: 100%; }

  .sidebar-right { order: 3; width: 100%; }

  .wrapper-right { order: 4; width: 100%; } }