Mystery Inc Code

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Zen+Loop|Niconne|Pirata+One|Festive');
@font-face { font-family: "gloss"; src: url('https://dl.dropboxusercontent.com/s/e097emqjup6jer5/Gloss_And_Bloom.ttf'); }
@font-face{font-family:'rothe';src:url('https://static.tumblr.com/86jccts/XUcqsc9je/rothe.ttf');}
@font-face { font-family: "cloudy night"; src: url('https://dl.dropboxusercontent.com/s/f8t8cw7oo7duqnc/Cloudy%20Night.ttf'); }


body {
background-color: #000;
background-image: linear-gradient(to left, #11001a, #16002e, #180024, #2a0040);
background-position: top right;
background-size: 100%;
background-repeat:no-repeat;
}

#discordia {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
}

::-webkit-scrollbar-track {
background-color:;
}

::-webkit-scrollbar-thumb {
background-color:;
}

::-webkit-scrollbar {
width:0px;
height:0px;
}

#overlay {
background: url('https://i.imgur.com/Xpyzkhp.gif)repeat;opacity:0.2;z-index:-1;height:100%;width:100%;position:absolute;top:0;right:0;left:0;bottom:0;%7D');
z-index: -1;
position: fixed;
background-repeat: repeat;
background-size: 20%;
background-position: bottom right;
opacity: 1;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}

#container {
position: absolute;
left: 0%;
top: 16%;
height: 405px;
width: 1320px;
background: #121211;
background-image: url('https://www.freeiconspng.com/uploads/mountain-png-23.png');
background-size: 106%;
background-repeat: no-repeat;
background-position: bottom right;
box-shadow: 0px 0px 3px 3px #222;
}

#triangle {
position: absolute;
z-index: 1;
right: 220px;
bottom: 5px;
height: 70px;
width: 70px;
border: px solid #000;
background-image: url('https://64.media.tumblr.com/3018a70c9b78d9c8e229f1ff4ccf4ef6/tumblr_p54zdriwhX1x67ynoo3_400.jpg');
background-size: 100%;
background-repeat: no-repeat;
border-radius: 10%;
opacity: 0.5;
filter: grayscale(100%);
}

#triangle2 {
position: absolute;
z-index: 1;
right: 137px;
bottom: 5px;
height: 70px;
width: 70px;
border: px solid #000;
background-image: url('https://64.media.tumblr.com/f22cf47ad3b53d6de287e54ef70188ab/tumblr_pocxpaKzZJ1smhvqc_500.jpg');
background-size: 100%;
background-repeat: no-repeat;
border-radius: 10%;
opacity: 0.5;
filter: grayscale(100%);
}

#triangle3 {
position: absolute;
z-index: 1;
right: 55px;
bottom: 5px;
height: 70px;
width: 70px;
border: px solid #000;
background-image: url('https://64.media.tumblr.com/a7e80e8349a86c6f50adfdb1e7dafe2b/fe5295f3f7011d2e-f8/s1280x1920/0cdf879b02c2f75ac315ecc7815018f8ac3a8c50.jpg');
background-size: 100%;
background-repeat: no-repeat;
border-radius: 10%;
opacity: 0.5;
filter: grayscale(100%);
}

#triangle4 {
position: absolute;
z-index: 1;
right: 345px;
bottom: 5px;
height: 70px;
width: 70px;
border: px solid #000;
background-image: url('https://64.media.tumblr.com/9e00387d7288f134bdbd4aab491296c7/6f8a3b03d8e92fdf-71/s640x960/463719cd700474e44e30d98e155feed9e698cf8c.jpg');
background-size: 100%;
background-repeat: no-repeat;
border-radius: 10%;
opacity: 0.5;
filter: grayscale(100%);
}

#triangle5 {
position: absolute;
z-index: 1;
right: 429px;
bottom: 5px;
height: 70px;
width: 70px;
border: px solid #000;
background-image: url('https://i.pinimg.com/originals/f9/26/c9/f926c920700894750021f9e34a3f39d1.jpg');
background-size: 100%;
background-repeat: no-repeat;
border-radius: 10%;
opacity: 0.5;
filter: grayscale(100%);
}

#triangle6 {
position: absolute;
z-index: 1;
right: 514px;
bottom: 5px;
height: 70px;
width: 70px;
border: px solid #000;
background-image: url('https://i.dailymail.co.uk/i/pix/2017/09/22/01/44920B6900000578-4908560-_When_I_look_back_now_I_realise_how_toxic_my_mindset_was_But_whe-a-18_1506040237358.jpg');
background-size: 100%;
background-repeat: no-repeat;
border-radius: 10%;
opacity: 0.5;
filter: grayscale(100%);
}

#name {
position: absolute;
z-index: 2;
font-family: 'gloss';
font-size: 70px;
color:#fff;
left: 9px;
top: -75px;
background-image: url('https://cdn.discordapp.com/attachments/507785399167352853/865757025308114984/testcath2.png');
background-size: 100%;
background-position: center;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: normal;
line-height: 100px;
width: 600px;
}

#nameback {
position: absolute;
z-index: 1;
font-family: 'gloss';
font-size: 70px;
color:#000;
top: -75px;
left: 9px;
text-shadow: -1px 0px 0px #ccc, 0px 1px 0px #ccc, 1px 0px 0px #ccc, 0px -1px 0px #ccc;
font-weight:bold;
background:#;
line-height: 100px;
width: 600px;
}

#quote {
position: absolute;
font-family: 'cloudy night';
font-size: 45px;
color:#fff;
top: 30px;
left: 297px;
text-align:center;
z-index: 2;
text-shadow:2px 2px 2px #ccc;
line-height: 0px;
width: 500px;
}

#quote2 {
position: absolute;
font-family: 'cloudy night';
font-size: 45px;
color:#fff;
bottom: 100px;
right: -85px;
text-align:center;
z-index: 2;
text-shadow:2px 2px 2px #ccc;
line-height: 0px;
width: 500px;
}

#tab1 {
position: absolute;
z-index: 3;
left: 2px;
top: 10px;
height: 60px;
width: 60px;
background-image: url('http://simpleicon.com/wp-content/uploads/magic_wand.png');
background-size: 80%;
background-repeat: no-repeat;
}

#tab2 {
position: absolute;
z-index: 3;
left: 82px;
top: 10px;
height: 60px;
width: 60px;
background-image: url('http://simpleicon.com/wp-content/uploads/magic_wand.png');
background-size: 80%;
background-repeat: no-repeat;
}

#tab3 {
position: absolute;
z-index: 3;
left: 167px;
top: 10px;
height: 60px;
width: 60px;
background-image: url('http://simpleicon.com/wp-content/uploads/magic_wand.png');
background-size: 80%;
background-repeat: no-repeat;
}

#tab4 {
position: absolute;
z-index: 3;
left: 252px;
top: 10px;
height: 60px;
width: 60px;
background-image: url('http://simpleicon.com/wp-content/uploads/magic_wand.png');
background-size: 80%;
background-repeat: no-repeat;
}

#tab5 {
position: absolute;
z-index: 3;
left: 332px;
top: 10px;
height: 60px;
width: 60px;
background-image: url('http://simpleicon.com/wp-content/uploads/magic_wand.png');
background-size: 80%;
background-repeat: no-repeat;
}

#leftbox {
position: absolute;
z-index: 1;
left: 6px;
bottom: 6px;
width: 160px;
padding: 5px;
height: 320px;
background: #111;
border: 3px solid #000;
box-shadow: 0px 0px 0.5px 0.5px #222;
overflow-y: auto;
color: #fff;
font-family: 'Zen Loop';
font-size: 13px;
line-height: 17px;
}

#rightbox {
position: absolute;
z-index: 1;
left: 190px;
bottom: 6px;
width: 160px;
height: 320px;
background: #111;
padding: 5px;
border: 3px solid #000;
box-shadow: 0px 0px 0.5px 0.5px #222;
overflow-y: auto;
color: #fff;
font-family: 'Zen Loop';
font-size: 13px;
line-height: 16px;
}

#longbox {
position: absolute;
z-index: 1;
left: 374px;
bottom: 6px;
width: 325px;
height: 120px;
background: #111;
padding: 5px;
border: 3px solid #000;
box-shadow: 0px 0px 0.5px 0.5px #222;
overflow-y: auto;
color: #fff;
font-family: 'Zen Loop';
font-size: 13px;
line-height: 16px;
}

#smolleft {
position: absolute;
z-index: 1;
left: 374px;
bottom: 150px;
width: 150px;
height: 176px;
background: #111;
padding: 5px;
border: 3px solid #000;
box-shadow: 0px 0px 0.5px 0.5px #222;
overflow-y: auto;
color: #fff;
font-family: 'Zen Loop';
font-size: 13px;
line-height: 16.5px;
}

#smolright {
position: absolute;
z-index: 1;
left: 548px;
bottom: 150px;
width: 150px;
text-align: center;
height: 176px;
background: #111;
padding: 5px;
border: 3px solid #000;
box-shadow: 0px 0px 0.5px 0.5px #222;
overflow-y: auto;
color: #fff;
font-family: 'Zen Loop';
font-size: 13px;
line-height: 16.5px;
}

h1 {
font-family: 'Festive';
font-size: 15px;
text-align: center;
background-image: url('https://media.discordapp.net/attachments/507785399167352853/865757412836245514/testskull2.png');
background-size: 80%;
background-repeat: repeat;
background-position: center;
line-height: 11px;
margin-top: 3px;
margin-bottom: 4px;
}

.glow {
 font-size: 15px;
 color: #fff;
 text-align: center;
 -webkit-animation: glow 1s ease-in-out infinite alternate;
 -moz-animation: glow 1s ease-in-out infinite alternate;
 animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
 from {
 text-shadow: 0 0 1px #f7bd19, 0 0 2px #f7bd19, 0 0 3px #f7bd19, 0 0 4px #f7bd19, 0 0 5px #dba307, 0 0 6px #dba307, 0 0 7px #dba307;
 }

 to {
 text-shadow: 0 0 2px #dba307, 0 0 3px #dba307, 0 0 4px #dba307, 0 0 5px #dba307, 0 0 6px #dba307, 0 0 7px #dba307, 0 0 8px #dba307;
 }
}


b {
font-family: 'rothe';
color: #666;
font-size: 12px;
}

a {
font-family: 'Niconne';
color: #917f37;
text-decoration: none;
font-size: 12px;
}

a:hover {
color: gray;
}

#music {
position: absolute;
z-index: 5;
bottom: 410px;
right: 130px;}

#music1{
position: absolute;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;}

#music1:hover #music2{}

#music1:hover #music3{}

#music1:hover #musiclist{ opacity:1;}

#music3 {
position: fixed;
width:70px;
height:45px;
background-size: 100%;
background-image: url('https://monophy.com/media/IfrucYnEVfvlhrgdYd/monophy.gif');
background-repeat: no-repeat;
overflow:hidden;
background-color: transparent;
opacity: 0.9;
filter: grayscale(0%);
}

.friend {
width: 40px;
height: 30px;
opacity: 1;
filter: grayscale(100%);
border: 1px dashed #695e75;
border-Radius: 10%;
margin-right: .5px;
margin-top: 4px;
margin-bottom:-5px;
opacity: 0.8;
-webkit-transition:opacity 0.7s linear;
 -webkit-transition:all 0.6s ease-out;
 -moz-transition:all 0.6s ease-out;
 transition:all 0.6s ease-out;
}

.friend:hover {
opacity: 0.7;
border: 1px dashed #eee;
margin-right: .5px;
margin-top: 4px;
margin-bottom:-5px;
-webkit-transition:opacity 0.7s linear;
 -webkit-transition:all 0.6s ease-out;
 -moz-transition:all 0.6s ease-out;
 transition:all 0.6s ease-out;
filter: grayscale(20%);
}

</style>
<div id="discordia" oncontextmenu="return false;"></div>
<div id="overlay"></div>
<div id="container">
<a href="//roleplay.chat/profile.php?user=Winn+Odjig" target="_blank"><div id="triangle"></div></a>
<a href="https://roleplay.chat/profile.php?user=Olibhear+Findlay" target="_blank"><div id="triangle2"></div></a>
<a href="https://roleplay.chat/profile.php?user=Dauphine" target="_blank"><div id="triangle3"></div></a>
<a href="https://roleplay.chat/profile.php?user=Dahlia+C.+Vablatsky" target="_blank"><div id="triangle4"></div>
<a href="//roleplay.chat/profile.php?user=Tay" target="_blank"><div id="triangle5"></div></a>
<a href="//roleplay.chat/profile.php?user=Bellaire" target="_blank"><div id="triangle6"></div></a>
<div id="name">Mystery Inc.</div>
<div id="nameback">Mystery Inc.</div>
<div id="quote">Harry Potter for Adults</div>
<div id="quote2">administrators...</div>
<a href="#2"><div id="tab1"></div></a>
<a href="#3"><div id="tab2"></div></a>
<a href="#4"><div id="tab3"></div></a>
<a href="#5"><div id="tab4"></div></a>
<a href="#1"><div id="tab5"></div></a>
<div id="leftbox">
<h1 class="glow">About</h1>


</div>
<div id="rightbox">
<h1 class="glow">Setting</h1></div>
<div id="smolleft">
<h1 class="glow">Events</h1>

</div>
<div id="smolright">
<h1 class="glow">Roster</h1>
<a href="//roleplay.chat/profile.php?user=Olibhear+Findlay" target="_blank"><img src="https://64.media.tumblr.com/cb0ab471053130aa185b8a2b4a4103e0/8eb7c442323a0fd4-b5/s400x600/bb35aa5d7a8cbbc6aed9adc2d49f285b87296d8e.gif" title="Room Admin." class="friend"></a>
<a href="//roleplay.chat/profile.php?user=Dauphine" target="_blank"><img src="https://64.media.tumblr.com/c8a2ccf26f71390865823812c8c83c5c/tumblr_inline_oyxtylxUv01tq4j4w_250.gifv" title="Room Admin." class="friend"></a>
<a href="//roleplay.chat/profile.php?user=Winn+Odjig" target="_blank"><img src="https://64.media.tumblr.com/79879f3932e13967ba4ffa74d9af3ef4/tumblr_inline_ph0zetkOz61r6zkut_250.gif" title="Room Admin." class="friend"></a>
<a href="//roleplay.chat/profile.php?user=Dahlia+C.+Vablatsky" target="_blank"><img src="https://data.whicdn.com/images/307033152/original.gif" title="Room Moderator." class="friend"></a>
<a href="https://roleplay.chat/profile.php?user=Tay" target="_blank"><img src="https://images.squarespace-cdn.com/content/v1/5851f79ad482e9e62dbffcc2/1564851502023-CBDF90S6FIGW61Z5WZZY/woosung-face-mv.gif?format=2500w" title="Room Moderator." class="friend"></a>
<a href="https://roleplay.chat/profile.php?user=Bellaire" target="_blank"><img src="https://66.media.tumblr.com/5b7e70e9271391bf563a7b7da0c49b0c/bb87914687dd6907-b8/s540x810/2f27a7bcd2d703d2a7de4e2fcd89c7f42209ce35.gif" title="Room Moderator." class="friend"></a>
<a href="https://roleplay.chat/profile.php?user=Saetang" target="_blank"><img src="https://66.media.tumblr.com/552b21c34b1ddc7e05513d8ebd8cebbc/tumblr_pz9ornUApv1r9iwxmo3_400.gif" title="Admin Alt." class="friend"></a>
<a href="https://roleplay.chat/profile.php?user=Rosetta+Fontaine" target="_blank"><img src="https://64.media.tumblr.com/b0a980acb6e65fbbbb4427bda1ae34d2/2ee5323f6d73f371-d0/s400x600/3e07d8bfcc1b277453cb4694ac19c6fe5b629b0b.gif" title="Admin Alt." class="friend"></a>
<a href="https://roleplay.chat/profile.php?user=Misun" target="_blank"><img src="https://78.media.tumblr.com/0963aa7339f57e7cb58f218f46faf332/tumblr_oc8j1fI9kN1rknxaso3_250.gif" title="Admin Alt." class="friend"></a>
<a href="https://roleplay.chat/profile.php?user=Frannie" target="_blank"><img src="https://64.media.tumblr.com/f87f3c88000e79d3dbbb9df1ccd571dd/995a8b5d27479804-c8/s250x400/d707202d46a302c9bb18fa45a5764ce7ed3f2dd5.gif" title="Moderator Alt." class="friend"></a>
<a href="//roleplay.chat/profile.php?user=Moretti" target="_blank"><img src="https://img.wattpad.com/b1466cf1896daf8a50abf8b4366d601ee9b74416/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f664b7a427678324d6b6d367054513d3d2d3932363437353132352e313632353136313437303139323334333333373839383032333338362e676966" title="Moderator Alt." class="friend"></a>
<a href="https://roleplay.chat/profile.php?user=Kit" target="_blank"><img src="https://64.media.tumblr.com/c61217905fe4cc4e8b85d01a928d6cf2/f60178df9b552cd4-fa/s250x400/780257190726c9a0ae07a7f71eb8b8492397c622.gif" title="Admin Alt." class="friend"></a>
<a href="https://roleplay.chat/profile.php?user=Kelvin" target="_blank"><img src="https://data.whicdn.com/images/315082904/original.gif" title="Admin Alt." class="friend"></a>
<a href="https://roleplay.chat/profile.php?user=Adelaide+Morgenstern" target="_blank"><img src="https://i.pinimg.com/originals/42/cd/d1/42cdd1874ee93a633c0d3566be027d90.gif" title="Moderator Alt." class="friend"></a>
<a href="https://roleplay.chat/profile.php?user=Vince" target="_blank"><img src="https://data.whicdn.com/images/326404644/original.gif" title="Moderator Alt." class="friend"></a>
<a href="https://roleplay.chat/profile.php?user=strauss" target="_blank"><img src="https://31.media.tumblr.com/9fa4d07df94e6ca5019bdf2767cd5427/tumblr_ml7vb7rjg71s8oqhdo1_500.gif" title="Member." class="friend"></a>
<a href="//roleplay.chat/profile.php?user=Astrid+the+Baker" target="_blank"><img src="https://i.pinimg.com/originals/a3/b6/58/a3b658e244288c25fae584fd7ef671a0.gif" title="Member." class="friend"></a>
<a href="//roleplay.chat/profile.php?user=ekaterina" target="_blank"><img src="https://c.tenor.com/sFtAwi2SDUkAAAAM/abbey-lee-kershaw.gif" title="Member." class="friend"></a>
<a href="//roleplay.chat/profile.php?user=holden" target="_blank"><img src="https://64.media.tumblr.com/1c7f082fe04b1394daad103e4bd9a87e/tumblr_inline_pdzhtwHhXX1v1d82y_400.gif" title="Member." class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/ea9029349e1a2b21257d7fbf115206c2/tumblr_ppy921boEz1wudf7oo7_r2_400.gif" title="Info here" class="friend">
</a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/ea9029349e1a2b21257d7fbf115206c2/tumblr_ppy921boEz1wudf7oo7_r2_400.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/ea9029349e1a2b21257d7fbf115206c2/tumblr_ppy921boEz1wudf7oo7_r2_400.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/ea9029349e1a2b21257d7fbf115206c2/tumblr_ppy921boEz1wudf7oo7_r2_400.gif" title="Info here" class="friend"></a>
<a href=" " target="_blank"><img src="https://64.media.tumblr.com/ea9029349e1a2b21257d7fbf115206c2/tumblr_ppy921boEz1wudf7oo7_r2_400.gif" title="Info here" class="friend"></a>
</div>
<div id="longbox">
<div style="height: 120px; overflow-y: hidden;">
<a name="1"></a>
<div style="height: 120px; overflow: auto;">
<div style="margin: 8 auto; width: 24.8em;">
<h1 class="glow">Room Rules</h1>
<B>Credit.</B> Coded by <a href="" target="_blank">Chuu</a> as a room profile for Wizarding World: Mystery Inc's exclusive use! Name and quote fonts were imported from <a target="_blank" href="https://heochanz.tumblr.com/fonts." target="_blank">heochanz's</a> tumblr, so check out their page! Header and bold fonts were borrowed from tumblr user <a target="_blank" href="https://octomoosey.tumblr.com/filterfont" target="_blank">Octomoosey</a>. Check them out, too! The music code was borrowed from a <a target="_blank" href="https://roleplay.chat/profile.php?user=testbed" target="_blank">friend</a> of mine and is used with permission. :)<br>

</div></div>

<a name="2"></a>
<div style="height: 120px; overflow: auto;">
<div style="margin: 8 auto; width: 24.8em;">
<h1 class="glow">History</h1>
WIP.
</div></div>

<a name="3"></a>
<div style="height: 120px; overflow: auto;">
<div style="margin: 8 auto; width: 24.8em;">
<h1 class="glow">Persona</h1>
Gwen is a girl with ample faux confidence that can be attributed to a reckless disposition.
</div></div>

<a name="4"></a>
<div style="height: 120px; overflow: auto;">
<div style="margin: 8 auto; width: 24.8em;">
<h1 class="glow">Headcanons</h1>
</div></div>

<a name="5"></a>
<div style="height: 120px; overflow: auto;">
<div style="margin: 8 auto; width: 24.8em;">
<h1 class="glow">RP Log</h1>
</div></div></div></div>

<div id="music">
<div id="music1">
<div id="music3">

<audio controls style="opacity: 0;"><source src="https://www.dropbox.com/s/yoofg4q002mff8j/Harry%20Potter%20Music%20%26%20Ambience%20Rainy%20Night%20at%20Hogwarts.mp3?raw=1"></audio><script src="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js" data-cf-settings="efa4bf266fe8bb445bebb0cb-|49" defer=""></script>

</div>