License Proposal Option 7 Blackhighlighter 3
@import url('https://fonts.googleapis.com/css?family=Chicle|Overlock:400,900'); @supports(display:grid) { ::-webkit-scrollbar-thumb { background: -webkit-linear-gradient(326deg, rgba(240, 194, 215, 1), rgba(215, 195, 218, 1), rgba(181, 197, 223, 1), rgba(184, 198, 223, 1), rgba(167, 203, 223, 1), rgba(196, 221, 189, 1), rgba(218, 230, 172, 1), rgba(230, 234, 171, 1), rgba(255, 242, 167, 1)); background: linear-gradient(124deg, rgba(240, 194, 215, 1), rgba(215, 195, 218, 1), rgba(181, 197, 223, 1), rgba(184, 198, 223, 1), rgba(167, 203, 223, 1), rgba(196, 221, 189, 1), rgba(218, 230, 172, 1), rgba(230, 234, 171, 1), rgba(255, 242, 167, 1)); -webkit-background-size: 100% 100%; background-size: 100% 100%; } ::-webkit-scrollbar-track-piece { background-color: rgb(var(--bright-accent)); } ::-moz-selection { color: rgb(var(--black-monochrome)); text-shadow: none; } :root *:nth-child(4n-3)::-moz-selection { background-color: rgba(216, 151, 154, 1); } :root *:nth-child(4n-2)::-moz-selection { background-color: rgba(198, 223, 158, 1); } :root *:nth-child(4n-1)::-moz-selection { background-color: rgba(145, 191, 222, 1); } :root *:nth-child(4n)::-moz-selection { background-color: rgba(246, 186, 212, 1); } ::-moz-selection { color: rgb(var(--black-monochrome)); text-shadow: none; } ::selection { color: rgb(var(--black-monochrome)); text-shadow: none; } :root *:nth-child(4n-3)::-moz-selection { background-color: rgba(216, 151, 154, 1); } :root *:nth-child(4n-3)::selection { background-color: rgba(216, 151, 154, 1); } :root *:nth-child(4n-2)::-moz-selection { background-color: rgba(198, 223, 158, 1); } :root *:nth-child(4n-2)::selection { background-color: rgba(198, 223, 158, 1); } :root *:nth-child(4n-1)::-moz-selection { background-color: rgba(145, 191, 222, 1); } :root *:nth-child(4n-1)::selection { background-color: rgba(145, 191, 222, 1); } :root *:nth-child(4n)::-moz-selection { background-color: rgba(246, 186, 212, 1); } :root *:nth-child(4n)::selection { background-color: rgba(246, 186, 212, 1); } :root { /* Typefaces */ --body-font: 'Overlock', monospace; --header-font: 'Chicle', cursive; --title-font: 'Chicle', cursive; /* Standard Colors */ --white-monochrome: 245, 233, 239; /* Prim */ --pale-gray-monochrome: 220, 226, 243; /* Quartz */ --light-gray-monochrome: 242, 243, 220; /* Loafer */ --gray-monochrome: 185, 224, 173; /* Moss Green */ --dark-gray-monochrome: 160, 240, 205; /* Magic Mint */ --black-monochrome: 76, 0, 85; /* Ripe Plum */ --bright-accent: 250, 140, 220; /* Lavender Rose */ --medium-accent: 186, 237, 185; /* Tea Green */ --dark-accent: 228, 123, 0; /* Mango Tango */ --newpage-color: 221, 102, 17; /* Christine */ --text-outline-color: var(--bright-accent); --background-gradient-color: 215, 215, 215; --background-gradient-distance: 40rem; --pastel-rainbow: linear-gradient(to top right, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)); scrollbar-color: rgba(var(--bright-accent), 1) rgba(var(--gray-monochrome), 1); --logo-image: url("https://scp-wiki.wdfiles.com/local--files/theme:laughter-and-knives-theme/mzl_logo.svg"); } hr { border-top: none; background: /* Bright Rainbow Gradient */ -webkit-gradient(linear, left bottom, right top, from(rgba(216, 151, 154, 0.75)), color-stop(rgba(255, 240, 148, 0.75)), color-stop(rgba(198, 223, 158, 0.75)), color-stop(rgba(145, 191, 222, 0.75)), to(rgba(246, 186, 212, 0.75))); background: /* Bright Rainbow Gradient */ -webkit-linear-gradient(bottom left, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)); background: /* Bright Rainbow Gradient */ -o-linear-gradient(bottom left, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)); background: /* Bright Rainbow Gradient */ -moz-linear-gradient(bottom left, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)); background: /* Bright Rainbow Gradient */ linear-gradient(to top right, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)); -webkit-filter: blur(0.04rem); filter: blur(0.04rem); } #container-wrap-wrap { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0rem, rgba(0, 0, 0, 0) 7.5rem, rgba(var(--black-monochrome), 1) 7.5rem, rgba(var(--gray-monochrome), 1) 7.625rem, rgba(var(--gray-monochrome), 1) -webkit-calc(100% - 0.125rem), rgba(var(--gray-monochrome), 1) -webkit-calc(100% - 0.125rem), rgba(var(--black-monochrome), 1) 100%), -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0rem, rgba(0, 0, 0, 0) 9.375rem, rgba(var(--white-monochrome), 0.5) 9.375rem, rgba(var(--pale-gray-monochrome), 0.5) 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0rem, rgba(0, 0, 0, 0)), color-stop(7.5rem, rgba(0, 0, 0, 0)), color-stop(7.5rem, rgba(var(--black-monochrome), 1)), color-stop(7.625rem, rgba(var(--gray-monochrome), 1)), color-stop(rgba(var(--gray-monochrome), 1)), color-stop(rgba(var(--gray-monochrome), 1)), to(rgba(var(--black-monochrome), 1))), -webkit-gradient(linear, left top, left bottom, color-stop(0rem, rgba(0, 0, 0, 0)), color-stop(9.375rem, rgba(0, 0, 0, 0)), color-stop(9.375rem, rgba(var(--white-monochrome), 0.5)), to(rgba(var(--pale-gray-monochrome), 0.5))); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0rem, rgba(0, 0, 0, 0) 7.5rem, rgba(var(--black-monochrome), 1) 7.5rem, rgba(var(--gray-monochrome), 1) 7.625rem, rgba(var(--gray-monochrome), 1) -webkit-calc(100% - 0.125rem), rgba(var(--gray-monochrome), 1) -webkit-calc(100% - 0.125rem), rgba(var(--black-monochrome), 1) 100%), -o-linear-gradient(top, rgba(0, 0, 0, 0) 0rem, rgba(0, 0, 0, 0) 9.375rem, rgba(var(--white-monochrome), 0.5) 9.375rem, rgba(var(--pale-gray-monochrome), 0.5) 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0rem, rgba(0, 0, 0, 0) 7.5rem, rgba(var(--black-monochrome), 1) 7.5rem, rgba(var(--gray-monochrome), 1) 7.625rem, rgba(var(--gray-monochrome), 1) -moz-calc(100% - 0.125rem), rgba(var(--gray-monochrome), 1) -moz-calc(100% - 0.125rem), rgba(var(--black-monochrome), 1) 100%), -o-linear-gradient(top, rgba(0, 0, 0, 0) 0rem, rgba(0, 0, 0, 0) 9.375rem, rgba(var(--white-monochrome), 0.5) 9.375rem, rgba(var(--pale-gray-monochrome), 0.5) 100%); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0rem, rgba(0, 0, 0, 0) 7.5rem, rgba(var(--black-monochrome), 1) 7.5rem, rgba(var(--gray-monochrome), 1) 7.625rem, rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem), rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem), rgba(var(--black-monochrome), 1) 100%), -o-linear-gradient(top, rgba(0, 0, 0, 0) 0rem, rgba(0, 0, 0, 0) 9.375rem, rgba(var(--white-monochrome), 0.5) 9.375rem, rgba(var(--pale-gray-monochrome), 0.5) 100%); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0rem, rgba(0, 0, 0, 0) 7.5rem, rgba(var(--black-monochrome), 1) 7.5rem, rgba(var(--gray-monochrome), 1) 7.625rem, rgba(var(--gray-monochrome), 1) -moz-calc(100% - 0.125rem), rgba(var(--gray-monochrome), 1) -moz-calc(100% - 0.125rem), rgba(var(--black-monochrome), 1) 100%), -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0rem, rgba(0, 0, 0, 0) 9.375rem, rgba(var(--white-monochrome), 0.5) 9.375rem, rgba(var(--pale-gray-monochrome), 0.5) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0rem, rgba(0, 0, 0, 0) 7.5rem, rgba(var(--black-monochrome), 1) 7.5rem, rgba(var(--gray-monochrome), 1) 7.625rem, rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem), rgba(var(--gray-monochrome), 1) calc(100% - 0.125rem), rgba(var(--black-monochrome), 1) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0rem, rgba(0, 0, 0, 0) 9.375rem, rgba(var(--white-monochrome), 0.5) 9.375rem, rgba(var(--pale-gray-monochrome), 0.5) 100%); -webkit-background-size: 100% 9.375rem, 100% 100%; -moz-background-size: 100% 9.375rem, 100% 100%; -o-background-size: 100% 9.375rem, 100% 100%; background-size: 100% 9.375rem, 100% 100%; background-repeat: no-repeat; } #skrollr-body { background: /* Bright Rainbow Gradient */ -webkit-gradient(linear, left bottom, right top, from(rgba(216, 151, 154, 1)), color-stop(rgba(255, 240, 148, 1)), color-stop(rgba(198, 223, 158, 1)), color-stop(rgba(145, 191, 222, 1)), to(rgba(246, 186, 212, 1))); background: /* Bright Rainbow Gradient */ -webkit-linear-gradient(bottom left, rgba(216, 151, 154, 1), rgba(255, 240, 148, 1), rgba(198, 223, 158, 1), rgba(145, 191, 222, 1), rgba(246, 186, 212, 1)); background: /* Bright Rainbow Gradient */ -o-linear-gradient(bottom left, rgba(216, 151, 154, 1), rgba(255, 240, 148, 1), rgba(198, 223, 158, 1), rgba(145, 191, 222, 1), rgba(246, 186, 212, 1)); background: /* Bright Rainbow Gradient */ -moz-linear-gradient(bottom left, rgba(216, 151, 154, 1), rgba(255, 240, 148, 1), rgba(198, 223, 158, 1), rgba(145, 191, 222, 1), rgba(246, 186, 212, 1)); background: /* Bright Rainbow Gradient */ linear-gradient(to top right, rgba(216, 151, 154, 1), rgba(255, 240, 148, 1), rgba(198, 223, 158, 1), rgba(145, 191, 222, 1), rgba(246, 186, 212, 1)); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; } div#container-wrap { background-image: -webkit-repeating-linear-gradient(45deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.1) 0.35vh, rgba(88, 88, 88, 0.2) 0.5vh); background-image: -o-repeating-linear-gradient(45deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.1) 0.35vh, rgba(88, 88, 88, 0.2) 0.5vh); background-image: -moz-repeating-linear-gradient(45deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.1) 0.35vh, rgba(88, 88, 88, 0.2) 0.5vh); background-image: repeating-linear-gradient(45deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 0.25vh, rgba(88, 88, 88, 0.1) 0.35vh, rgba(88, 88, 88, 0.2) 0.5vh); -webkit-background-size: 100% 7.5rem; -moz-background-size: 100% 7.5rem; -o-background-size: 100% 7.5rem; background-size: 100% 7.5rem; background-repeat: no-repeat; } a { --wght: 900; font-weight: 900; } #header h1 a::before { content: "MAN ZOO LEAGUE"; letter-spacing: 0.1em; color: rgb(var(--light-gray-monochrome)); } #header h2 { font-size: -webkit-calc(var(--base-font-size) * 0.9); font-size: -moz-calc(var(--base-font-size) * 0.9); font-size: calc(var(--base-font-size) * 0.9); } #header h2 span::before { --wght: 900; content: "Well well well, how the turn tables"; color: rgb(var(--bright-accent)); font-weight: 900; } #top-bar * { --text-shadow: rgb(var(--text-outline-color)); font-size: -webkit-calc(var(--base-font-size)); font-size: -moz-calc(var(--base-font-size)); font-size: calc(var(--base-font-size)); color: rgb(var(--light-gray-monochrome)); text-shadow: 1px 1px 0 var(--text-shadow), -1px 1px 0 var(--text-shadow), 1px -1px 0 var(--text-shadow), -1px -1px 0 var(--text-shadow), 0px 1px 0 var(--text-shadow), 0px -1px 0 var(--text-shadow), -1px 0px 0 var(--text-shadow), 1px 0px 0 var(--text-shadow), 2px 2px 0 var(--text-shadow), -2px 2px 0 var(--text-shadow), 2px -2px 0 var(--text-shadow), -2px -2px 0 var(--text-shadow), 0px 2px 0 var(--text-shadow), 0px -2px 0 var(--text-shadow), -2px 0px 0 var(--text-shadow), 2px 0px 0 var(--text-shadow), 1px 2px 0 var(--text-shadow), -1px 2px 0 var(--text-shadow), 1px -2px 0 var(--text-shadow), -1px -2px 0 var(--text-shadow), 2px 1px 0 var(--text-shadow), -2px 1px 0 var(--text-shadow), 2px -1px 0 var(--text-shadow), -2px -1px 0 var(--text-shadow); } #top-bar > div.top-bar > ul > li > a, #top-bar > div.top-bar > ul > li > ul > li > a, #side-bar > div > div > a { position: relative !important; background: transparent !important; border: 0px solid rgba(0, 0, 0, 0); } #top-bar li:hover ul, #top-bar li:focus-within ul, #top-bar li.sfhover ul, #top-bar li ul { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #search-top-box-form input[type="submit"] { background: rgb(var(--bright-accent)) !important; } #top-bar div.mobile-top-bar > ul > li > a, #top-bar div.top-bar > ul > li > a { --wght: 900; color: rgb(var(--swatch-menutxt-dark-color)); font-weight: 900; } #top-bar div.top-bar > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > ul > li > a::before, #top-bar div.top-bar > ul > li > ul > li > a:hover::before, #side-bar div.menu-item a::before, #side-bar div.menu-item a:hover::before { background-color: rgba(0, 0, 0, 0); background: var(--pastel-rainbow); } #top-bar div.mobile-top-bar > ul > li > ul > li > a, #top-bar div.top-bar > ul > li > ul > li > a { --wght: 900; color: rgb(var(--swatch-menutxt-dark-color)); font-weight: 900; } #search-top-box-form input[type="submit"]:hover, #search-top-box-form input[type="submit"]:focus { background: /* Bright Rainbow Gradient */ -webkit-gradient(linear, left bottom, right top, from(rgba(216, 151, 154, 0.75)), color-stop(rgba(255, 240, 148, 0.75)), color-stop(rgba(198, 223, 158, 0.75)), color-stop(rgba(145, 191, 222, 0.75)), to(rgba(246, 186, 212, 0.75))); background: /* Bright Rainbow Gradient */ -webkit-linear-gradient(bottom left, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)); background: /* Bright Rainbow Gradient */ -o-linear-gradient(bottom left, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)); background: /* Bright Rainbow Gradient */ -moz-linear-gradient(bottom left, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)); background: /* Bright Rainbow Gradient */ linear-gradient(to top right, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)); -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; } #side-bar, #side-bar:hover { font-variant: unset; background: /* Bright Rainbow Gradient */ -webkit-gradient(linear, left bottom, right top, from(rgba(216, 151, 154, 0.75)), color-stop(rgba(255, 240, 148, 0.75)), color-stop(rgba(198, 223, 158, 0.75)), color-stop(rgba(145, 191, 222, 0.75)), to(rgba(246, 186, 212, 0.75))); background: /* Bright Rainbow Gradient */ -webkit-linear-gradient(bottom left, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)); background: /* Bright Rainbow Gradient */ -o-linear-gradient(bottom left, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)); background: /* Bright Rainbow Gradient */ -moz-linear-gradient(bottom left, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)); background: /* Bright Rainbow Gradient */ linear-gradient(to top right, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)); -webkit-background-size: 200% 200%; -moz-background-size: 200% 200%; -o-background-size: 200% 200%; background-size: 200% 200%; } #side-bar .heading { background-color: rgb(var(--gray-monochrome)); } #side-bar .heading p, #side-bar .side-block > .collapsible-block .collapsible-block-link { text-shadow: inherit; text-transform: none; font-family: var(--header-font); font-size: 125%; color: rgb(var(--swatch-menutxt-dark-color)); } #side-bar div.menu-item a, #side-bar div.menu-item .text { --text-shadow: rgb(var(--text-outline-color)); --wght: 900; font-size: -webkit-calc(var(--base-font-size)); font-size: -moz-calc(var(--base-font-size)); font-size: calc(var(--base-font-size)); text-shadow: 1px 1px 0 var(--text-shadow), -1px 1px 0 var(--text-shadow), 1px -1px 0 var(--text-shadow), -1px -1px 0 var(--text-shadow), 0px 1px 0 var(--text-shadow), 0px -1px 0 var(--text-shadow), -1px 0px 0 var(--text-shadow), 1px 0px 0 var(--text-shadow), 2px 2px 0 var(--text-shadow), -2px 2px 0 var(--text-shadow), 2px -2px 0 var(--text-shadow), -2px -2px 0 var(--text-shadow), 0px 2px 0 var(--text-shadow), 0px -2px 0 var(--text-shadow), -2px 0px 0 var(--text-shadow), 2px 0px 0 var(--text-shadow), 1px 2px 0 var(--text-shadow), -1px 2px 0 var(--text-shadow), 1px -2px 0 var(--text-shadow), -1px -2px 0 var(--text-shadow), 2px 1px 0 var(--text-shadow), -2px 1px 0 var(--text-shadow), 2px -1px 0 var(--text-shadow), -2px -1px 0 var(--text-shadow); font-weight: 900; } .page-rate-widget-box { --box-shadow: rgba(var(--gray-monochrome), 0.5); background: /* Bright Rainbow Gradient */ -webkit-gradient(linear, left bottom, right top, from(rgba(216, 151, 154, 0.75)), color-stop(rgba(255, 240, 148, 0.75)), color-stop(rgba(198, 223, 158, 0.75)), color-stop(rgba(145, 191, 222, 0.75)), to(rgba(246, 186, 212, 0.75))) !important; background: /* Bright Rainbow Gradient */ -webkit-linear-gradient(bottom left, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)) !important; background: /* Bright Rainbow Gradient */ -o-linear-gradient(bottom left, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)) !important; background: /* Bright Rainbow Gradient */ -moz-linear-gradient(bottom left, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)) !important; background: /* Bright Rainbow Gradient */ linear-gradient(to top right, rgba(216, 151, 154, 0.75), rgba(255, 240, 148, 0.75), rgba(198, 223, 158, 0.75), rgba(145, 191, 222, 0.75), rgba(246, 186, 212, 0.75)) !important; -webkit-background-size: 50% 50%; -moz-background-size: 50% 50%; -o-background-size: 50% 50%; background-size: 50% 50%; -webkit-box-shadow: 1px 1px 1px var(--box-shadow); -moz-box-shadow: 1px 1px 1px var(--box-shadow); box-shadow: 1px 1px 1px var(--box-shadow); border: dashed 0.0625rem rgb(var(--black-monochrome)); -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; } .page-rate-widget-box > span.rate-points, .page-rate-widget-box > span.rateup, .page-rate-widget-box > span.ratedown, .page-rate-widget-box > span.cancel, .page-rate-widget-box > span.rate-points > a, .page-rate-widget-box > span.rateup > a, .page-rate-widget-box > span.ratedown > a, .page-rate-widget-box > span.cancel > a { color: rgb(var(--bright-accent)); mix-blend-mode: unset; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .page-rate-widget-box > span.rate-points:hover, .page-rate-widget-box > span.rate-points:active { color: rgb(var(--bright-accent)) !important; mix-blend-mode: unset !important; } .page-rate-widget-box > span.rateup:hover, .page-rate-widget-box > span.rateup:active, .page-rate-widget-box > span.ratedown:hover, .page-rate-widget-box > span.ratedown:active, .page-rate-widget-box > span.cancel:hover, .page-rate-widget-box > span.cancel:active { color: rgb(var(--black-monochrome)); background: -webkit-linear-gradient(326deg, rgba(240, 194, 215, 1), rgba(215, 195, 218, 1), rgba(181, 197, 223, 1), rgba(184, 198, 223, 1), rgba(167, 203, 223, 1), rgba(196, 221, 189, 1), rgba(218, 230, 172, 1), rgba(230, 234, 171, 1), rgba(255, 242, 167, 1)); background: -o-linear-gradient(326deg, rgba(240, 194, 215, 1), rgba(215, 195, 218, 1), rgba(181, 197, 223, 1), rgba(184, 198, 223, 1), rgba(167, 203, 223, 1), rgba(196, 221, 189, 1), rgba(218, 230, 172, 1), rgba(230, 234, 171, 1), rgba(255, 242, 167, 1)); background: -moz-linear-gradient(326deg, rgba(240, 194, 215, 1), rgba(215, 195, 218, 1), rgba(181, 197, 223, 1), rgba(184, 198, 223, 1), rgba(167, 203, 223, 1), rgba(196, 221, 189, 1), rgba(218, 230, 172, 1), rgba(230, 234, 171, 1), rgba(255, 242, 167, 1)); background: linear-gradient(124deg, rgba(240, 194, 215, 1), rgba(215, 195, 218, 1), rgba(181, 197, 223, 1), rgba(184, 198, 223, 1), rgba(167, 203, 223, 1), rgba(196, 221, 189, 1), rgba(218, 230, 172, 1), rgba(230, 234, 171, 1), rgba(255, 242, 167, 1)); -webkit-background-size: 50% 50%; -moz-background-size: 50% 50%; -o-background-size: 50% 50%; background-size: 50% 50%; mix-blend-mode: unset !important; } #page-title { --text-shadow: rgb(var(--black-monochrome)); color: rgb(var(--bright-accent)); letter-spacing: 0.5em; text-align: center !important; text-shadow: .063rem .063rem .063rem var(--text-shadow); } #page-content { font-size: -webkit-calc(var(--base-font-size) * 1.1); font-size: -moz-calc(var(--base-font-size) * 1.1); font-size: calc(var(--base-font-size) * 1.1); } #page-content div.warning { --wght: 900; position: relative; font-weight: 900; height: 15rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; -moz-box-pack: center; justify-content: center; } #page-content div.top, #page-content div.bottom { position: absolute; width: 100%; } #page-content div.top { z-index: 4; } #page-content div.bottom { --text-shadow: rgb(var(--text-outline-color)); z-index: 3; text-shadow: 1px 1px 0 var(--text-shadow), -1px 1px 0 var(--text-shadow), 1px -1px 0 var(--text-shadow), -1px -1px 0 var(--text-shadow), 0px 1px 0 var(--text-shadow), 0px -1px 0 var(--text-shadow), -1px 0px 0 var(--text-shadow), 1px 0px 0 var(--text-shadow), 2px 2px 0 var(--text-shadow), -2px 2px 0 var(--text-shadow), 2px -2px 0 var(--text-shadow), -2px -2px 0 var(--text-shadow), 0px 2px 0 var(--text-shadow), 0px -2px 0 var(--text-shadow), -2px 0px 0 var(--text-shadow), 2px 0px 0 var(--text-shadow), 1px 2px 0 var(--text-shadow), -1px 2px 0 var(--text-shadow), 1px -2px 0 var(--text-shadow), -1px -2px 0 var(--text-shadow), 2px 1px 0 var(--text-shadow), -2px 1px 0 var(--text-shadow), 2px -1px 0 var(--text-shadow), -2px -1px 0 var(--text-shadow); } #page-content div.top > span:nth-child(1), #page-content div.top > span:nth-child(3), #page-content div.bottom > span:nth-child(1), #page-content div.bottom > span:nth-child(3) { position: relative; z-index: 5; background: /* Bright Rainbow Gradient */ -webkit-gradient(linear, left bottom, right top, from(rgba(216, 151, 154, 1)), color-stop(rgba(255, 240, 148, 1)), color-stop(rgba(198, 223, 158, 1)), color-stop(rgba(145, 191, 222, 1)), to(rgba(246, 186, 212, 1))); background: /* Bright Rainbow Gradient */ -webkit-linear-gradient(bottom left, rgba(216, 151, 154, 1), rgba(255, 240, 148, 1), rgba(198, 223, 158, 1), rgba(145, 191, 222, 1), rgba(246, 186, 212, 1)); background: /* Bright Rainbow Gradient */ -o-linear-gradient(bottom left, rgba(216, 151, 154, 1), rgba(255, 240, 148, 1), rgba(198, 223, 158, 1), rgba(145, 191, 222, 1), rgba(246, 186, 212, 1)); background: /* Bright Rainbow Gradient */ -moz-linear-gradient(bottom left, rgba(216, 151, 154, 1), rgba(255, 240, 148, 1), rgba(198, 223, 158, 1), rgba(145, 191, 222, 1), rgba(246, 186, 212, 1)); background: /* Bright Rainbow Gradient */ linear-gradient(to top right, rgba(216, 151, 154, 1), rgba(255, 240, 148, 1), rgba(198, 223, 158, 1), rgba(145, 191, 222, 1), rgba(246, 186, 212, 1)); -webkit-background-size: 300% 300%; -moz-background-size: 300% 300%; -o-background-size: 300% 300%; background-size: 300% 300%; background-repeat: repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #page-content div.top > span:nth-child(1), #page-content div.bottom > span:nth-child(1) { font-size: -webkit-calc(var(--base-font-size) * 2.5); font-size: -moz-calc(var(--base-font-size) * 2.5); font-size: calc(var(--base-font-size) * 2.5); } #page-content div.top > span:nth-child(3), #page-content div.bottom > span:nth-child(3) { font-size: -webkit-calc(var(--base-font-size) * 1.25); font-size: -moz-calc(var(--base-font-size) * 1.25); font-size: calc(var(--base-font-size) * 1.25); width: 75%; display: block; margin: 0 auto; } #page-content div.bobble-bg { position: absolute; background: url(http://kontainer.djkakt.us/local--files/theme:laughter-and-knives-theme/bobble.png); -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; background-repeat: no-repeat; background-position: center center; top: 0; width: 100%; height: 15rem; -webkit-animation: spin 10s linear infinite; -moz-animation: spin 10s linear infinite; -o-animation: spin 10s linear infinite; animation: spin 10s linear infinite; -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } #page-content div.warning:hover > div.bobble-bg { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } div.content-log { display: inline-block; border: dashed 0.0625rem rgb(var(--black-monochrome)); -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; background: -webkit-linear-gradient(326deg, rgba(240, 194, 215, 1), rgba(215, 195, 218, 1), rgba(181, 197, 223, 1), rgba(184, 198, 223, 1), rgba(167, 203, 223, 1), rgba(196, 221, 189, 1), rgba(218, 230, 172, 1), rgba(230, 234, 171, 1), rgba(255, 242, 167, 1)); background: -o-linear-gradient(326deg, rgba(240, 194, 215, 1), rgba(215, 195, 218, 1), rgba(181, 197, 223, 1), rgba(184, 198, 223, 1), rgba(167, 203, 223, 1), rgba(196, 221, 189, 1), rgba(218, 230, 172, 1), rgba(230, 234, 171, 1), rgba(255, 242, 167, 1)); background: -moz-linear-gradient(326deg, rgba(240, 194, 215, 1), rgba(215, 195, 218, 1), rgba(181, 197, 223, 1), rgba(184, 198, 223, 1), rgba(167, 203, 223, 1), rgba(196, 221, 189, 1), rgba(218, 230, 172, 1), rgba(230, 234, 171, 1), rgba(255, 242, 167, 1)); background: linear-gradient(124deg, rgba(240, 194, 215, 1), rgba(215, 195, 218, 1), rgba(181, 197, 223, 1), rgba(184, 198, 223, 1), rgba(167, 203, 223, 1), rgba(196, 221, 189, 1), rgba(218, 230, 172, 1), rgba(230, 234, 171, 1), rgba(255, 242, 167, 1)); -webkit-background-size: 300% 300%; -moz-background-size: 300% 300%; -o-background-size: 300% 300%; background-size: 300% 300%; background-repeat: repeat; margin: auto; width: auto; padding: 1rem; background-blend-mode: multiply; } div.content-log.inset { background: rgba(255, 255, 255, 0.35); } div.content-log.bobble * { --mono-wght: 900; font-family: var(--mono-font), monospace; font-variation-settings: "wght" var(--mono-wght), "slnt" var(--slnt), "CASL" var(--CASL), "CRSV" var(--CRSV), "MONO" var(--MONO); font-weight: 900; } div.content-log.bobbleinset { --mono-wght: 900; background: rgba(255, 255, 255, 0.35); font-family: var(--mono-font), monospace; font-weight: 900; } div.content-log.bobbleinset, div.content-log.bobbleinset * { font-variation-settings: "wght" var(--mono-wght), "slnt" var(--slnt), "CASL" var(--CASL), "CRSV" var(--CRSV), "MONO" var(--MONO); } .yui-navset .yui-nav .selected a { color: rgb(var(--black-monochrome)) !important; } table.wiki-content-table th { background: var(--pastel-rainbow); color: rgb(var(--black-monochrome)); } .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected, .yui-navset .yui-nav a:hover, .yui-navset .yui-nav a:focus, .yui-navset .yui-nav .selected a:hover { color: rgb(var(--black-monochrome)); background-color: rgba(0, 0, 0, 0); } .yui-navset .yui-nav a, .yui-navset .yui-nav .selected a { position: relative; overflow: hidden; } .yui-navset .yui-nav a::before, .yui-navset .yui-nav .selected a::before { content: " "; width: 300%; height: 100%; position: absolute; top: 0; right: 120%; opacity: 1; z-index: 0; -webkit-transform: skew(50deg, 0); -ms-transform: skew(50deg, 0); -o-transform: skew(50deg, 0); -moz-transform: skew(50deg, 0); transform: skew(50deg, 0); background-color: rgba(0, 0, 0, 0); -webkit-transition: right 500ms cubic-bezier(0.4, 0, 0.2, 1); -o-transition: right 500ms cubic-bezier(0.4, 0, 0.2, 1); -moz-transition: right 500ms cubic-bezier(0.4, 0, 0.2, 1); transition: right 500ms cubic-bezier(0.4, 0, 0.2, 1); background: var(--pastel-rainbow); } .yui-navset .yui-nav a:hover::before, .yui-navset .yui-nav a:focus::before, .yui-navset .yui-nav .selected a:hover::before { right: -3rem; } .yui-navset .yui-nav .selected, .yui-navset .yui-navset-top .yui-nav .selected { background: var(--pastel-rainbow); } @media only screen and (max-width: 768px) { #header { background-position: left -webkit-calc(4vw + 5.5rem - 10.4rem) top -webkit-calc(4% - var(--offset-from-page-top) / 2), top center; background-position: left -moz-calc(4vw + 5.5rem - 10.4rem) top -moz-calc(4% - var(--offset-from-page-top) / 2), top center; background-position: left calc(4vw + 5.5rem - 10.4rem) top calc(4% - var(--offset-from-page-top) / 2), top center; -webkit-background-size: -webkit-calc(8.75rem + var(--offset-from-page-top)), 100% 7.5rem; -moz-background-size: -moz-calc(8.75rem + var(--offset-from-page-top)), 100% 7.5rem; -o-background-size: calc(8.75rem + var(--offset-from-page-top)), 100% 7.5rem; background-size: calc(8.75rem + var(--offset-from-page-top)), 100% 7.5rem; background-repeat: no-repeat, repeat; } #header h2 { font-size: -webkit-calc(var(--base-font-size) * 0.7); font-size: -moz-calc(var(--base-font-size) * 0.7); font-size: calc(var(--base-font-size) * 0.7); } } @-webkit-keyframes rainbow { 0% { background-position: 0% 82% } 50% { background-position: 100% 19% } 100% { background-position: 0% 82% } } @-moz-keyframes rainbow { 0% { background-position: 0% 82% } 50% { background-position: 100% 19% } 100% { background-position: 0% 82% } } @-o-keyframes rainbow { 0% { background-position: 0% 82% } 50% { background-position: 100% 19% } 100% { background-position: 0% 82% } } @keyframes rainbow { 0% { background-position: 0% 82% } 50% { background-position: 100% 19% } 100% { background-position: 0% 82% } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(1turn); transform: rotate(1turn); } } @-moz-keyframes spin { 100% { -webkit-transform: rotate(1turn); -moz-transform: rotate(1turn); transform: rotate(1turn); } } @-o-keyframes spin { 100% { -webkit-transform: rotate(1turn); -o-transform: rotate(1turn); transform: rotate(1turn); } } @keyframes spin { 100% { -webkit-transform: rotate(1turn); -moz-transform: rotate(1turn); -o-transform: rotate(1turn); transform: rotate(1turn); } } }
I see a lot of support for options 2 and 4. How would you gusy feel about this amalgamation of the two?
Option 2 & 4 combo
Addendum 1333.1: Additional Notes
Pros
Inherits parent page's color scheme and style
Box indicates it is separate from content
Symbol literally means "Citation here"Cons
People may complain about aesthetics?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Cite this page as:
"SCP-1333" by CityToast, from the [http://scp-wiki.net SCP Wiki. Source: http://www.scp-wiki.net/scp-1333. Licensed under CC-BY-SA.
For more information, see Licensing Guide.
Licensing Disclosures
Images:
Images: (or audio, if applicable)
- "Robbie Knievel - Airborn Texas Motor Speedway" by Bo Nash, 2008, CC-BY-SA 2.0 (via Flickr)
- "Warbirds Display Wanaka" by Bernard Spragg, CC-by-SA 2.0 (Flickr)
computer metamorphic safe scp self-replicating transmission visual
page revision: 28, last edited: 27 May 2020, 16:52 (5 days ago)
Stop watching site www.scp-wiki.net[?]
