/* Body Defaults */

html {
 border:0;
 height:100%;
 font-family:arial;
}

body {
 background: black;
 background-size:cover;
 background-attachment:fixed;
 background-position:center;
 margin:auto;
 position:relative;
 height: 100%;
 min-height: 100%;
 overflow-x:hidden;
}

img {
 border-style: none;
 border:none;
}

img.facebook:hover {
 background:#4267B2;
}

img.twitter:hover {
 background:#1DA1F2;
}

img.instagram:hover {
 background:#F56040;
}

img.twitch:hover {
 background:#6441a5;
}

img.youtube:hover {
 background:#FF0000;
}

h1 {
 letter-spacing: 8px;
}

#VideoBG {
 position:fixed;
 right:0;
 bottom:0;
 min-width:100%;
 min-height:100%;
 transform: translateX(calc((100% - 100vw) / 2));
}

#cookieAlert {
  font-weight: 700;
  position: fixed;
  bottom: 0;
  left: 0;
  width:330px;
  text-align:left;
  background-color: #763568;
  color: #FFF;
  padding: 8px 8px 8px 8px
}

#cookieAlert>button {
  font-weight: 700;
  color: white;
  border: 4px solid #fff;
  background-color: transparent;
  padding: 10px;
  -webkit-transition: color .15s cubic-bezier(.4, 1, .2, 1), background-color .3s cubic-bezier(.4, 1, .2, 1);
  transition: color .15s cubic-bezier(.4, 1, .2, 1), background-color .3s cubic-bezier(.4, 1, .2, 1);
}

#cookieAlert>button:hover, #cookieAlert>button:active, #cookieAlert>button:focus {
  background-color: #fff;
  color: #763568
}

/* End of Body Defaults */

/* Main Section */

#socnet {
 width:100%;
 min-width:600px;
}

#content {
 background: black;
 background-image:url('');
 width:100%;
 min-width:900px;
 min-height:600px;
 margin:auto;
 position:relative;
 left:0;
 right:0;
 top:0;
}

#header {
 background-color:none;
 background-image:url('');
 background-size:cover;
 background-repeat: no-repeat;
 height:60px;
 width:50%;
 position:relative;
 top:0;
 left:40px;
}

.logo {
 height:50px;
}

#indexmenu {
 background: black;
 background-image:url('../img/logo_white.png');
 background-size:300px;
 background-position: 1% 50%;
 background-repeat:no-repeat;
 box-shadow: 0 5px 2px -2px black;
 height:50px;
 width:100%;
 color:white;
 padding-top:5px;
 position:fixed;
 top:0px;
 /*-webkit-backdrop-filter: blur(5px); */
 /* backdrop-filter: blur(5px);	*/	
  z-index:10;
}

#menu {
 background-color:none;
 background-image:url('../img/logo_white.png');
 background-size:200px;
 background-position: 2% 50%;
 background-repeat:no-repeat;
 box-shadow: 0 5px 2px -2px black;
 height:50px;
 width:100%;
 color:white;
 padding-top:5px;
 position:fixed;
 top:0px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

a.menu {
 color:white;
 text-decoration:none;
 font-size:100%;
 text-shadow:0px 2px 10px black;
 padding:10px;
}

a.menu:hover {
 color:red;
 text-decoration:none;
 text-shadow:0px 0px 5px black;
 background-image:url('../img/menulink_hovered.png');
 background-size:cover;
 background-position:center;
}

a.menu:visited {
 text-decoration:none;
}

a.link {
 text-decoration:none;
 color:white;
}

a.link:hover {
 color:#00FFFF;
 text-decoration:none;
 text-shadow:0px 0px 5px black;
 padding-left:4px;
 padding-right:4px;
}

a.link:visited {
 text-decoration:none;
}

a.linkplain {
 text-decoration:none;
 color:white;
}

a.linkplain:hover {
 color:#00FFFF;
 text-decoration:none;
 text-shadow:0px 0px 5px black;
}

a.linkplain:visited {
 text-decoration:none;
}

a.linkblue {
 text-decoration:none;
 color:#00FFFF;
}

a.linkblue:hover {
 color:#00FFFF;
 text-decoration:none;
 text-shadow:0px 0px 5px black;
}

a.linkblue:visited {
 text-decoration:none;
}

#spacing {
 padding-top:30px;
 padding-left:2%;
}

#spacingbig {
 padding-top:30px;
 padding-left:20px;
}

#innercontent {
 -background: rgba(28, 28, 28, .6);
 background-image:url('');
 background-size:cover;
 background-position:center;
 background-attachment:fixed;
 min-height:800px;
 height:90vh;
 padding-top:0%;
 padding-bottom:50px;
 padding-left:0%;
 padding-right:0%;
}

.mainpanel {
 display:flex;
 justify-content:center;
 width:100%;
}

.mainpanel > div {
 margin:10px;
}

.panel {
 background-color:none;
 color:white;
 font-size:18px;
 padding-bottom:10px;
 text-shadow:0px -1px 0px black;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: rgb(50,50,50);
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

#cover {
 background-color:none;
 background-image:url('../img/cover.png');
 background-size:contain;
 background-position:center;
 background-repeat: no-repeat;
 height:200px;
}

#footer {
 background: black;
 background-image:url('');
 background-size:cover;
 background-position:center;
 color:white;
 width:100%;
 padding-top:5px;
 position:relative;
 left:0px;
 bottom:0px;
}

a.anchor {
 display: block;
 position: relative;
 top: -100px;
 visibility: hidden;
}

/* End of Main Section */

/* Documentation Section */

a.doclink {
 background-color:#525252;
 color:white;
 text-decoration:none;
  text-shadow:0px 1px 0px black;
 display:block;
 padding: 10px 5px;
 text-overflow: ellipsis;
 overflow:hidden;
 white-space: nowrap;
 border-bottom:2px gray solid;
}

a.doclink:hover {
 background-color:white;
 color:black;
 text-shadow:0px -1px 0px white;
}

a.doclink:active {
 background-color:gray;
 color:white;
 text-shadow:0px -1px 0px black;
}

a.docsublink {
 background-color:#2D2D2D;
 color:white;
 text-decoration:none;
  text-shadow:0px 1px 0px black;
 display:block;
 padding: 5px 10px;
 text-overflow: ellipsis;
 overflow:hidden;
 white-space: nowrap;
}

a.docsublink:hover {
 background-color:white;
 color:black;
 text-shadow:0px -1px 0px white;
}

a.docsublink:active {
 background-color:gray;
 color:white;
 text-shadow:0px -1px 0px black;
}

.docpanel {
 background-color:none;
 color:white;
 font-size:18px;
 text-align:left;
 padding-right:100px;
 padding-bottom:10px;
 text-shadow:0px -1px 0px black;
}

#resizeable {
  --resizeable-width: 400px;
  height:600;
  width: var(--resizeable-width);
  min-width: var(--min-width);
  max-width: var(--max-width);
  background-color:#2D2D2D;
  text-align:left;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
  position:sticky;
  top:80px;
}

#handle {
  float: right;
  height: 110%;
  width: 5px;
  background-color: gray;
  z-index: 1;
}

#handle:hover {
  background-color: white;
}

#handle:active {
  background-color: white;
}

#handle::after {
  content: "";
  width: 9px;
  position: absolute;
  top: 2px;
  bottom: 2px;
  margin-left: -4px;
  background-color: transparent;
  cursor: ew-resize;
  z-index: 2;
}

.docnote {
  background-color:#0058AA;
  font-style: italic;
  padding:5px;
  padding-left:16px;
  padding-right:16px;
  box-shadow: 0px 2px 10px #111111;
}

/* End of Documentation Section */

/* Mobile Section */

#desktop-only {display:block;}
#mobile-only {display:none;}

@media only screen and (max-width:1000px) {
 #desktop-only {display:none;}
 #mobile-only {display:block;}
}

.mobilemenu1 {
 background:url('http://surrealist.games/m/img/menu.png') top;
 height:50px;
 width:50px;
 position:fixed;
 top:0%;
 right:0%;
 z-index:11;
}

.mobilemenu2 {
 background:url('http://surrealist.games/m/img/menu.png') bottom; 
 z-index:12;
}

.mobilemenu1 p {
 background:none;
 width:300%;
 position:absolute;
 top:40px;
 right:0px;
 visibility:hidden;
 opacity:0;
 z-index:12;
 border-bottom: 300px solid transparent;
 border-left: 1500px solid transparent;
}

.mobilemenu2 p {
 visibility:visible;
 opacity: 1;
 -khtml-transition: opacity 0.2s;
 -khtml-border-bottom-left-radius:10px;
 -khtml-border-bottom-right-radius:10px;
 transition: opacity 0.2s;
 border-bottom-left-radius:10px;
 border-bottom-right-radius:10px;
}

a.mobilemenu {
 color:white;
 text-decoration:none;
 font-size:50%;
 text-shadow:0px 2px 10px black;
 padding:5px;
}

a.mobilemenu:hover {
 color:#00FFFF;
 text-decoration:none;
 text-shadow:0px 0px 5px black;
 background-image:url('http://surrealist.games/img/menulink_hovered.png');
 background-size:cover;
 background-position:center;
}

a.mobilemenu:visited {
 text-decoration:none;
}

#mobileitem {
 margin:0;
 padding:0;
 list-style:none;
 -khtml-border-radius:10px;
}

.mobileitem.top {
 border-top-left-radius:10px;
 border-top-right-radius:10px;
}

.mobileitem.bottom {
 border-bottom-left-radius:10px;
 border-bottom-right-radius:10px;
 border-bottom:0px;
}

a.mobileitem {
 display:block;
 padding:8px 8px 8px 8px;
 text-decoration:none;
 text-align:center;
 color:white;
 background:url('') no-repeat right center black;
 border-bottom: 1px solid #E0E0E0;
 -khtml-box-shadow:0px 3px 5px #000000;
 box-shadow:0px 3px 5px #000000;
}

a.mobileitem:hover {
 color:red;
}

/* End of Mobile Section */