Commoncss留档三月

@import "/load.php?mode=articles&articles=u:dev:MediaWiki:UCPEditorMinimal.css&only=styles";
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:BalancedVE.css&only=styles";
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:Highlight.css&only=styles";
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:PrettyUserTags.css&only=styles";
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:AjaxPoll.Modern.css&only=styles";
@import url('https://fonts.googleapis.com/css2?family=Long+Cang&family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@200;500;700&family=ZCOOL+XiaoWei&family=Zhi+Mang+Xing&display=swap');
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:CustomSlider.css&only=styles";
@import url("http://scpsandboxcn.wikidot.com/local--files/typeface/Typeface-VonwaonBitmap-12px.css");
@import url('https://fonts.font.im/css?family=Shadows+Into+Light');
/\* 111 \*/
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap');
@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Math&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rufina&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@300&display=swap');

.page-header\_\_bottom{
 display:none;
}
.document {

```
   background: white;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   margin: 26px auto 0;
   max-width: 550px;
   min-height: 300px;
   padding: 24px;
   padding-top: 50px;
   position: relative;
   width: 80%;

```

}
.document p{

```
   z-index:999;

```

}
.document:before,
.document:after {

```
   content: "";
   height: 98%;
   position: absolute;
   width: 100%;
   z-index:-1;

```

}

.document:before {

```
   background: #fafafa;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
   left: -5px;
   top: 4px;
   transform: rotate(-2.1deg);

```

}

.document:after {

```
   background: #f6f6f6;
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   right: -3px;
   top: 1px;
   transform: rotate(1.1deg);

```

}

.darkdocument {

```
   background: rgb(30, 30, 30);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   margin: 26px auto 0;
   max-width: 550px;
   min-height: 300px;
   padding: 24px;
   padding-top: 50px;
   position: relative;
   width: 80%;
   color: #EDEDED;

```

}

.darkdocument:before,
.darkdocument:after {

```
   content: "";
   height: 98%;
   position: absolute;
   width: 100%;
   z-index: -1;

```

}

.darkdocument:before {

```
   background: rgb(50, 50, 50);
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
   left: -5px;
   top: 4px;
   transform: rotate(-2deg);

```

}

.darkdocument:after {

```
   background: rgb(50, 50, 50);
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   right: -3px;
   top: 1px;
   transform: rotate(1deg);

```

}

.fakeButton {

```
   width: 30%;
   min-width: 125px;
   margin-left: auto;
   margin-right: auto;
   border: solid 0.3rem rgb(var(--gray-monochrome));
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100% auto;

```

}

@media (max-width: 1020px) {

```
   .document,.darkdocument {
    width: 95%;
   }

```

}
/\*\* Connect \*\*/
.mainpage-connect .staff {

```
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -ms-flex-direction: row;
 flex-direction: row;
 -ms-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-box-pack: justify;
 -ms-flex-pack: justify;
 justify-content: space-between;
 list-style: outside none none;
 margin: 0px;

```

}

.mainpage-connect .staff li {

```
 border-radius: 4px;
 border: 1px solid rgba(125, 129, 139, 0.38);
 box-sizing: border-box;
 margin: 0px 0px 20px;
 padding: 15px 20px;
 text-align: center;
 width: calc(50% - 10px);

```

}

.mainpage-connect .staff img {

```
 border-radius: 50%;
 height: auto;
 width: 95px;

```

}

.mainpage-connect .staff .name {

```
 line-height: 18px;
 margin-top: 10px;

```

}

.mainpage-connect .staff .name a,
.mainpage-connect .staff .name a:active,
.mainpage-connect .staff .name a:visited {

```
 color: var(--theme-page-text-color);
 font-weight: bold;
 text-decoration: none;

```

}

.mainpage-connect .staff .name a:hover {

```
 color: #545454;

```

}

.mainpage-connect .mainpage-more {

```
 margin-top: 10px;

```

}

@media screen and (max-width: 1023px) {

```
 .mainpage-connect .staff li {
   width: auto;
 }

```

```
 .mainpage-connect .staff .notablet {
   display: none;
 }

```

}
/\* Rainbow Username \*/
@keyframes RainbowUserName{
 from {

```
   -webkit-filter:hue-rotate(15deg);
           filter:hue-rotate(15deg);
   }
 to {
   -webkit-filter:hue-rotate(360deg);
           filter:hue-rotate(360deg);
   }

```

}

@keyframes rainbowanimate{
 0% {color:red;}
 28% {color:orange;}
 42% {color:yellow;}
 56% {color:green;}
 70% {color:blue;}
 84% {color:indigo;}
 100% {color:violet;}
}

a[href\*=":Apreaky"],

```
a[href*="/Apreaky"],
a[href$=":Apreaky"]:not(.wds-community-header),
a[href$="/Apreaky"]:not(.wds-community-header) {
   color: blue !important;
   font-family: 'Noto Serif SC' !important;
   animation: RainbowUserName 5s infinite !important;
   font-size: 10px !important;
   text-shadow: 0 0 12px powderblue;
   font-weight: bold;

```

}

/\*Animated Load\*/
@keyframes textanimation {
 from{opacity:0;}
 to {opacity:100}
}
body,
.Message\_\_content,
.wds-dropdown,
.wds-tabs\_\_tab,
.wds-dropdown\_\_toggle,
.client-js{
 animation-name:textanimation;
 animation-duration:1s;
 animation-iteration-count:1;
 animation-delay:0s;
}

/\*headerbox\*/

.headerbox{
 color:#fbe7b5;
 text-shadow: 0 0 1pt rgb(251, 231, 181);
 padding:1rem 0;

```
   background: linear-gradient(180deg, rgba(133, 120, 88,0.5) 0%, rgba(251, 231, 181,1) 75%);
   float:none;
   width:auto;
   margin:auto;
   border-radius:1rem 1rem 0 0;

```

}

.scrollheader{
 background: url();

```
   animation: slide2 120s linear infinite;
   background-size: 800px;
   background-repeat: repeat;
   width:calc(100% - 72px);
   min-height: 150px;
   border-radius:1rem 1rem 0 0;
   position:absolute;

```

}

.scrollheader2{
 background: url();

```
   animation: slide2 120s linear infinite;
   background-size: 800px;
   background-repeat: repeat;
   width:calc(100% - 72px);
   min-height: 150px;
   border-radius:1rem 1rem 0 0;
   position:absolute;

```

}

@keyframes slide2{

```
 0% {
   background-position: 120px bottom;
 }
 100% {
   background-position: -500px bottom;
 }

```

}

.right-image{

```
	max-width:40%;
	float:right;
	padding:0;
	margin:0 8px 1rem 1rem;
	border-radius:0 1rem 0 0;
	text-align:center;
	color:#fbe7b5;
   text-shadow: 1pt 1pt 1pt rgba(251, 231, 181,0.3);
   background: #857858;
   border:2pt solid #fbe7b5;
   box-shadow: 0 0 5pt #857858;
}

```

.right-image img{

```
 	width:calc(100% + 2rem);
 	height:auto;
 	margin-bottom:1rem;
 	margin-left:-1rem;
 	transition:0.08s;
 	border-radius:0 1rem 0 0;
 }

```

.right-image img:hover{

```
 	transition-delay:0.35s;
 	transform: scale(1.5) translateX(-3rem);
 	border-radius:0;
 }
 .right-image p{
   padding:0 1rem;
 }

```

.titleblock {

```
       background-color: rgb(239, 219, 166);
       color:rgb(12, 12, 12);
       padding: 0.5rem 1rem 0.10rem;
       margin: 1.5rem 0rem 0.5rem 0rem;
       box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
       border: solid rgb(206, 187, 135) 2px;
    }

    .titlebox{
      color: rgb(12, 12, 12);
      position: relative;
      top: -1.6rem;
      background-color: rgb(222, 203, 150);
      padding: 0.25rem 1rem;
      line-height: 0.1rem;
    }

```

/\*进度条\*/

body {

```
 font-family: "Montserrat", sans-serif;
 background: #2c303a;

```

}

.container {

```
 margin: 100px auto;
 width: 500px;
 text-align: center;

```

}

.progress2 {

```
 padding: 6px;
 border-radius: 30px;
 background: rgba(0.25, 0, 0, 0);
 box-shadow: inset 0 1px 2px rgba(0, 0 ,0, 0.25 ), 0 1px rgba(255, 255, 255, 0.08);

```

}

.progress-bar2 {

```
 height: 18px;
 border-radius: 30px;
 background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
 transition: 0.4s linear;
 transition-property: width, background-color;

```

}

.progress-moved .progress-bar2 {

```
 width: 100%;
 background-color: #B0C4DE;
 animation: progressAnimation 6s contentfix 5s;

```

}

@keyframes progressAnimation {

```
 0% {
   width: 5%;
   background-color: #B0C4DE;
 }
 100% {
   width: 100%;
   background-color: #B0C4DE;
 }

```

}

/\*Scanner\*/

body {

```
 height: 100vh;
 position: relative;

```

}

.ocrloader p::before {

```
 content: *;*
 display:inline-block;
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background: #18c89b;
 position: relative;
 right: 4px;

```

}
.ocrloader p {

```
 color: #18c89b;
 position: absolute;
 bottom: -30px;
 left: 38%;
 font-size: 16px;
 font-weight: 600;
 animation: blinker 1.5s linear infinite;
 font-family: sans-serif;
 text-transform: uppercase;

```

}

.ocrloader {

```
 width: 360px;
 height: 225px;
 position: absolute;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 top: 40%;
 backface-visibility: hidden;

```

}

.ocrloader span {

```
 position: absolute;
 left: 35px;
 top: 0;
 width: 85%;
 height: 5px;
 background-color: #18c89b;
 box-shadow: 0 0 10px 1px #18c89b,
             0 0 1px 1px #18c89b;
 z-index: 1;
 transform: translateY(95px);
 animation: move 1.7s cubic-bezier(0.15,0.54,0.76,0.74);
 animation-iteration-count: infinite;

```

}

.ocrloader:before,
.ocrloader:after,
.ocrloader em:after,
.ocrloader em:before {

```
 border-color: #18c89b;
 content: "";
 position: absolute;
 width: 45px;
 height: 46px;
 border-style: solid;
 border-width: 0px;

```

}
.ocrloader:before {

```
 left: 0;
 top: 0;
 border-left-width: 5px;
 border-top-width: 5px;
 border-radius: 5px 0 0 0;

```

}
.ocrloader:after {

```
 right: 0;
 top: 0;
 border-right-width: 5px;
 border-top-width: 5px;
 border-radius: 0 5px 0 0;

```

}
.ocrloader em:before {

```
 left: 0;
 bottom: 0;
 border-left-width: 5px;
 border-bottom-width: 5px;
 border-radius: 0 0 0 5px;

```

}
.ocrloader em:after {

```
 right: 0;
 bottom: 0;
 border-right-width: 5px;
 border-bottom-width: 5px;
 border-radius: 0 0 5px 0;

```

}

@keyframes move {

```
 0%,
 100% {
   transform: translateY(190px);
 }
 50% {
   transform: translateY(0%);
 }
 75% {
   transform: translateY(160px);
 }

```

}

@keyframes blinker {

```
 50% { opacity: 0; }

```

}

/\*Beholder-I 隐藏内容\*/

.box {

```
 width:550px;
 height:80px;
 margin:20px;
 background:#F5DEB3;
 outline:0.5px solid;
 outline-offset:10px;
 position:relative;

```

}
.box::before {

```
 content:"";
 position:absolute;
 top:0;
 bottom:0;
 left:0;
 width:20px;
 background:#D2B48C;/*#18c89b;*/
 box-shadow:0 0 70px 20px #D2B48C;
 clip-path:inset(0);
 animation:
   x 0.5s ease-in-out 0.5s 4 alternate,
   y 1s   ease-in-out 0.5s 2,
   z 5s ease-in-out 2.3s,
   x1 1.1s linear 7.3s forwards,
   x2 5s linear 2.3s forwards;

```

}

@keyframes x {

```
 to {
   transform:translateX(-100%);
   left:100%;
 }

```

}

@keyframes y {

```
  33% {
    clip-path:inset(0 0 0 -100px);
  }
  50% {
    clip-path:inset(0 0 0 0);
  }
  83%{
    clip-path:inset(0 -100px 0 0);
  }

```

}

@keyframes z {
 30% {
 width: 100%;
 content:"";
 }
 50% {
 width: 100%;
 content:"核苷酸序列核对成功，已绕过模因标记。";
 font-family:"Noto Serif SC";
 font-size:13pt
 }
 80% {
 width: 100%;
 }
 100% {
 width: 100%;
 content:"欢迎您，%%name%%。";
 font-family:"Noto Serif SC";
 font-weight:bolder;
 font-size:13pt
 }
}

@keyframes x2 {
 20% {
 height:70px;
 background-color: rgb(245,222,179);
 }
 50% {
 height:60px;
 background-color: rgb(245,222,179);
 }
 70% {
 height:50px;
 background-color: rgb(245,222,179);
 }
 100% {
 height:45px;
 background-color: rgb(245,222,179);
 }
}

@keyframes x1 {
 0% {
 width: 100%;
 content:"欢迎您，%%name%%。";
 font-family:"Noto Serif SC";
 font-weight:bolder;
 font-size:13pt
 }
 100% {
 width: 100%;
 content:"%%name%%，请单击您的密钥以读取隐藏信息。";
 font-family:"Noto Serif SC";
 font-weight:bolder;
 font-size:13pt
 }
}

.username {

```
 animation:
   username 0.5s linear 5s 1 forwards;

```

}
@keyframes username {
 100% {
 content:"";
 }
}
.typearea {
 width: 100%;
 animation: type 4s steps(60, end);
}
@keyframes type {

```
 from { width: 0; }

```

}
.type-wrap-wrapper {position: relative;text-align: left;}.type-wrapper {background: #555;}

@media screen and (prefers-reduced-motion: no-preference) {

```
   #page-title, #breadcrumbs, #page-content > * {
     animation-name: fadeIn;
     animation-duration: 1s;
     animation-iteration-count: 1;
     animation-timing-function: ease-out;
     animation-fill-mode: backwards;
   }
 }
 #page-title { animation-delay: 0s; }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translate(0,30px);
   }
   to {
     opacity: 1;
     transform: translate(0,0);
   }
 }

```

1. extrac-div-1 {

```
   position: fixed;
   width: 100vw;
   height: 100vh;
   pointer-events: none;
   background: repeating-linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.15) 50%,rgba(0,0,0,0));
   background-size: auto 8px;
   opacity: 0.7;

```

}

1. extrac-div-2 {

```
   position: fixed;
   width: 100vw;
   height : 1rem;
   top: 0;
   pointer-events: none;
   background: linear-gradient(to bottom, rgba(229, 140, 36) 0%,rgba(229, 140, 36,1) 50%,rgba(229, 140, 36,0.98) 51%,rgba(229, 140, 36) 100%);
   opacity : .1;
   animation: scanm 6s linear infinite;

```

}
@keyframes scanm {

```
 0%   { top: -1rem; opacity : .05;}
 25% { top: 50%; opacity: .03;}
 37.5% { top: 75%; opacity: 0.06;}
 50% { top: 100%; opacity: .03;}
 100% { top: 100%;}

```

}

1. extrac-div-3 {

```
   position: fixed;
   width: 100vw;
   height: 100vh;
   pointer-events: none;
   background-image: radial-gradient(circle, rgb(229, 140, 36) 4%, rgb(0,0,0) 45%, rgb(229, 140, 36) 95%);
   opacity: 0.25;
   mix-blend-mode: color-dodge;
   background-repeat: no-repeat;
   background-size: cover;
   z-index: 30;

```

}

1. page-content > :nth-child(1) { animation-delay: calc(1 \* var(--fade-in-delay)); }
2. page-content > :nth-child(2) { animation-delay: calc(2 \* var(--fade-in-delay)); }
3. page-content > :nth-child(3) { animation-delay: calc(3 \* var(--fade-in-delay)); }
4. page-content > :nth-child(4) { animation-delay: calc(4 \* var(--fade-in-delay)); }
5. page-content > :nth-child(5) { animation-delay: calc(5 \* var(--fade-in-delay)); }
6. page-content > :nth-child(6) { animation-delay: calc(6 \* var(--fade-in-delay)); }
7. page-content > :nth-child(7) { animation-delay: calc(7 \* var(--fade-in-delay)); }
8. page-content > :nth-child(8) { animation-delay: calc(8 \* var(--fade-in-delay)); }
9. page-content > :nth-child(9) { animation-delay: calc(9 \* var(--fade-in-delay)); }
10. page-content > :nth-child(10) { animation-delay: calc(10 \* var(--fade-in-delay)); }
11. page-content > :nth-child(11) { animation-delay: calc(11 \* var(--fade-in-delay)); }
12. page-content > :nth-child(12) { animation-delay: calc(12 \* var(--fade-in-delay)); }
13. page-content > :nth-child(13) { animation-delay: calc(13 \* var(--fade-in-delay)); }
14. page-content > :nth-child(14) { animation-delay: calc(14 \* var(--fade-in-delay)); }
15. page-content > :nth-child(15) { animation-delay: calc(15 \* var(--fade-in-delay)); }
16. page-content > :nth-child(n+15) { animation-delay: calc(16 \* var(--fade-in-delay)); }

1. skrollr-body {

```
  background-image:
   radial-gradient(circle, rgb(var(--black-monochrome)) 50%, transparent 0);
  background-repeat: repeat;
  background-size: 0.25em 0.25em;
  width: 100%;
  height: 7.5rem;

```

}

1. side-bar .side-block div a img {

```
  filter: grayscale(100%);

```

}

1. container {

```
  background-image: radial-gradient(circle, rgb(var(--medium-accent), 0.05) 50%, transparent 0);
  background-size: 0.25em 0.25em;
  background-repeat: repeat;
  background-attachment: fixed;

```

}

div#page-options-bottom-2 > a, div#page-options-bottom > a {

```
  border-radius: 0em;
  -moz-border-radius: 0em;
  border: none;

```

}

div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover {

```
  border: none;

```

}

1. header, #top-bar {

```
  background-attachment: scroll;

```

}

1. header {

```
  background-image: none;

```

}

a:hover::before {

```
  content: "> ";

```

}

1. header::before {

```
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background-image: var(--logo-image);
  background-size: auto 16rem;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.4;

```

}

1. header h1, #header h1 a {

```
  position: absolute;
  top: 1rem;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 0;

```

}

1. header h2, #header h2 span, #header h2 span::before {

```
  position: absolute;
  top: 2rem;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;

```

}

1. header h1 a::before, #header h2 span::before {

```
  text-shadow: .063rem 0.1rem 0.1rem #0c0c0c;

```

}

a.newpage {

```
  background: transparent;
  text-decoration: none

```

}

a.newpage {

```
  color: rgb(var(--newpage-color))

```

}

blockquote {

```
  box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);

```

}

.lightstyled-quote {

```
  background-color:rgb(var(--bright-accent));

```

color:rgb(0, 0, 0);

```
  border-left: 0.5rem solid rgba(var(--dark-gray-monochrome));
  padding: 0.1rem 1rem;
  margin: 0.5rem 0 0.5rem 0.25rem;
  box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);

```

}

.darkstyled-quote {

```
  background-color:rgb(var(--dark-gray-monochrome));
  border-left: 0.5rem solid rgba(var(--bright-accent));
  color:rgb(var(--white-monochrome));
  padding: 0.1rem 1rem;
  margin: 0.5rem 0 0.5rem 0.25rem;
  box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25);

```

}

.darkstyled-quote a{
color: rgb(var(--swatch-menubg-medium-color));
}

.lightblock {

```
  background-color:rgb(var(--bright-accent));

```

color:rgb(0, 0, 0);

```
  padding: 0.01rem 1rem;
  margin: 0.5rem 0 0.5rem 0.25rem;
  box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);

```

}

.darkblock {

```
  background-color:rgb(var(--dark-gray-monochrome));
  color:rgb(var(--white-monochrome));
  padding: 0.01rem 1rem;
  margin: 0.5rem 0 0.5rem 0.25rem;
  box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);

```

}

.dark-borderblock {

```
   background-color:rgb(var(--dark-gray-monochrome));
   color:rgb(var(--white-monochrome));
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border: solid 0.3rem rgb(var(--bright-accent));
}

.light-borderblock {
   background-color:rgb(var(--bright-accent));
   color:rgb(0, 0, 0);
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border: solid 0.3rem rgb(var(--dark-gray-monochrome));
}
.border-logoblock{
   padding: 0.01rem 1rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   color:rgb(var(--white-monochrome));
   margin: 0.5rem 0 0.5rem 0.25rem;
   display: block;
   position: relative;
   background-color: rgb(var(--dark-gray-monochrome));
    border: solid 0.3rem rgb(var(--bright-accent));
   }

   .border-logoblock::after{
   content: "";
   float: center;
   border: solid 2px #0000;
   background: url(http://myrandfox.wikidot.com/local--files/theme:database-new/logo) center/25% no-repeat;
   opacity: 0.25;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   position: absolute;
   z-index: 1;
   }

   .logoblock{
   padding: 0.01rem 1rem;
   color:rgb(var(--white-monochrome));
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   margin: 0.5rem 0 0.5rem 0.25rem;
   display: block;
   position: relative;
   background-color: rgb(var(--dark-gray-monochrome));
   }

   .logoblock::after{
   content: "";
   float: center;
   border: solid 2px #0000;
   background: url(http://myrandfox.wikidot.com/local--files/theme:database-new/logo) center/25% no-repeat;
   opacity: 0.25;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   position: absolute;
   z-index: 1;
   }

```

.titleblock {

```
       background-color: rgb(var(--dark-gray-monochrome));
       color:rgb(var(--white-monochrome));
       padding: 0.5rem 1rem 0.10rem;
       margin: 1.5rem 0rem 0.5rem 0rem;
       box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5);
       border: solid rgb(var(--bright-accent)) 2px;
    }

    .titlebox{
      color: rgb(var(--dark-gray-monochrome));
      position: relative;
      top: -1.6rem;
      background-color: rgb(var(--bright-accent));
      padding: 0.25rem 1rem;
      line-height: 0.1rem;
    }

```

.borderblock {

```
   background-color:rgb(var(--dark-gray-monochrome));
   color:rgb(255, 255, 255);
   padding: 0.01rem 1rem;
   margin: 0.5rem 0 0.5rem 0.25rem;
   box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25);
   border: solid 0.3rem rgb(var(--bright-accent));
}

```

.darkblock a {
color: rgb(var(--swatch-menubg-medium-color));
}