Backrooms Wiki
Advertisement

Note: After saving, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Internet Explorer: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&family=Averia+Libre:wght@300&family=IM+Fell+English+SC&family=Kavivanar&family=Libre+Barcode+128+Text&family=Lobster&family=Major+Mono+Display&family=Mate+SC&family=Pacifico&family=Qahiri&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gugi&display=swap');
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:InterlanguageFlags.css&only=styles";

.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(https://static.wikia.nocookie.net/backrooms/images/f/fe/Fandom-contest-3-tiled.png/revision/latest/scale-to-width-down/641?cb=20220302045650);
    animation: slide2 120s linear infinite;
    background-size: 620px;
    background-repeat: repeat;
    width:calc(100% - 72px);
    min-height: 150px;
    border-radius:1rem 1rem 0 0;
    position:absolute;
}

.scrollheader2{
	background: url(https://static.wikia.nocookie.net/backrooms/images/1/19/37ScrollHeader.png/revision/latest?cb=20220329005840);
    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;
}

.scrollheader3{
	background: url(https://static.wikia.nocookie.net/backrooms/images/3/30/Headerforbrmike.png/revision/latest?cb=20220413002114);
    animation: slide2 120s linear infinite;
    background-size: 1000px;
    background-repeat: repeat;
    width:calc(100% - 68px);
    min-height: 150px;
    border-radius:1rem 1rem 0 0;
    position:absolute;
}

@keyframes slide2{
  0% {
    background-position: 120px bottom;
  }
  100% {
    background-position: -500px bottom;
  }
}

.faction{
	color:#fbe7b5;
    text-shadow: 1pt 1pt 1pt rgba(251, 231, 181,0.3);
    background: #857858;
    border-radius: 1rem;
    border:2pt solid #fbe7b5;
    box-shadow: 0 0 5pt #857858;
    margin: 10px 8pt 15px 8pt;
    padding: 1.5rem 2rem 1rem 2rem;
    height:auto;
    min-height:120px;
}

.faction a{
	color:#eedbac;
	text-decoration:underline;
}

.faction a:hover{
	color:#ffc191;
}
 
 .faction h1{
 	font-size:52px;
 	line-height:0.7;
 	margin:-0.25rem 0 0.75rem 0;
 }
 
.faction img{
    height:120px;
    width:auto;
    float:left;
    margin-right:1rem;
    border-radius:1rem;
    box-shadow:0 0 1pt rgba(251, 231, 181,0.3);
}
 
.strongtitle{
    letter-spacing: 1rem; 
    font-family: 'Comfortaa', sans-serif;
    font-variant: small-caps;
}

.profilepic img{
  height:45px;
  border-radius:100%;
  padding-right:0;
  margin-right:1rem;
}

.profilepicfix{
  margin-top:0.75rem;
}

.body-content{
	padding-top:25rem;
}

.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;	
  }
  
.body-accent {
	color:#fbe7b5;
    text-shadow: 1pt 1pt 1pt rgba(251, 231, 181,0.3);
    background: #857858;
    border-radius: 1rem;
    border:2pt solid #fbe7b5;
    box-shadow: 0 0 5pt #857858;
    margin: 10px 8pt 15px 8pt;
    padding: 1rem 2rem 1pt 2rem;
}

.faction{
    padding: 1rem 2rem 1pt 2rem;
    padding-left:0.85rem;
    height:auto;
    min-height:120px;
}
 
.faction img{
    width:120px;
    height:auto;
    float:left;
    margin-right:1rem;
    border-radius:1rem;
    box-shadow:0 0 1pt rgba(251, 231, 181,0.3);
}
 
.faction h1{
    letter-spacing: 1rem; 
    font-family: 'Comfortaa', sans-serif;
}

.profilepic img{
  width:45px;
  border-radius:100%;
  padding-right:0;
  margin-right:1rem;
}

.profilepicfix{
  margin-top:0.75rem;
}

.faction img{
    float:none;
    width:120px;
    padding-right:0;
    margin:auto;
    display:block;
}

.featurebox{
    padding:0 0.5rem;
    margin:1rem 0;
    background:#EFDBA6;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #d6ce92;
    box-sizing:border-box;
}
 
.featureflavor{
    padding:0 0.5rem;
    margin:0.5rem 0;
    background:#DECB96;
    border-radius:0.6rem;
    box-shadow: 0px 0px 3px;
    border: 1.75px solid #c7c089;
    box-sizing:border-box;
    transition:0.2s;
}
.newsbox{
    padding:1px 1rem;
    margin:1rem 0;
    background: linear-gradient(90deg, rgba(206,187,135,1) 0%, rgba(214,206,146,0) 100%);
    border-radius:0.8rem;
}
.wavy-text {
    display: inline-flex;
    font-size: 14px;
    font-family: monospace;
    text-transform: uppercase;
}
 
.wavy-text span {
    animation: jiggle;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    transform: translateY(-2px);
}
 
.wavy-text span:nth-child(1) { animation-delay: 100ms }
.wavy-text span:nth-child(2) { animation-delay: 200ms }
.wavy-text span:nth-child(3) { animation-delay: 300ms }
.wavy-text span:nth-child(4) { animation-delay: 400ms }
.wavy-text span:nth-child(5) { animation-delay: 500ms }
.wavy-text span:nth-child(6) { animation-delay: 600ms }
.wavy-text span:nth-child(7) { animation-delay: 700ms }
.wavy-text span:nth-child(8) { animation-delay: 800ms }
.wavy-text span:nth-child(9) { animation-delay: 900ms }
.wavy-text span:nth-child(10) { animation-delay: 1000ms }
 
@keyframes jiggle {
    from {
        transform: translateY(-2px);
    }
    50% {
        transform: translateY(2px);
    }
    to {
        transform: translateY(-2px);
    }
}

.palebox{
  background: linear-gradient(90deg, rgba(222, 203, 150,1) 0%, #DAC692 25rem);
  border-radius:1rem;
  padding:0.25rem 1rem;
  box-shadow:0 0 4pt #C8B684;
  position:relative;
}

.float{
  width:40%;
  float:right;
  margin: 0 1.5rem 0.5rem 1.5rem;
}

.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;
     }

.right-sound{
 	max-width:40%;
 	float:right;
 	padding:0;
 	margin:0 8px 1rem 1rem;
 	border-radius:0 1rem 0 0;
 	text-align:center;
 	color:#ffffff;
    text-shadow: 1pt 1pt 1pt rgba(255, 255, 255,0.0);
    background: #ffffff;
    border:2pt solid #ffffff;
    box-shadow: 0 0 5pt #ffffff;
 }
Advertisement