@font-face { font-family: Geneva; src: url('/fonts/GENEVA.ttf'); }
@font-face { font-family: Noto Sans; src: url('/fonts/noto-sans.regular.ttf'); }

:root {
  --cur-main: url('/assets/FRMain.png'), auto;
  --cur-point: url('/assets/FRSelect.png'), auto;
  --red:#731d08;
  --border:#9e988a;
}

* {
  padding:0;
  margin:0;
  cursor:var(--cur-main);
}

body {
  background:black url('/imgs/frbg.png') center top/auto no-repeat fixed;
  color:black;
  width:100vw;
  height:100vh;
  font-family:Verdana, sans-serif;
  font-size:12px;
  overflow-y:auto;
}

a {
  cursor:var(--cur-point);
  color:white;
  text-decoration:none;
}





#header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  width:950px;
  height:186px;
  margin:0 auto;
  text-align:center;
  background-image:url('/imgs/frbanner.png');
  background-repeat:no-repeat;
}

#header img {
  margin-top:30px;
  width:600px;
  height:auto;
}
.bar {
  display:flex;
  align-items:center;
  position:absolute;
  bottom:0;
  width:100%;
  height:31px;
  border-top:1px solid black;
  background-color:var(--red);
  color:#e8cc9f;
  font-size:10px;
  font-weight:bold;
}
#info {
  margin-top:-2px;
}
.clock {
  display:inline;
  margin-left:10px;
}
.bar span {
  margin-left:10px;
}
.bar span::before {
  content:'|';
  padding-right:10px;
}





#page {
  position:absolute;
  top:186px;
  left:0;
  right:0;
  width:950px;
  height:auto;
  margin:0 auto 50px auto;
  background-color:white;
  border-radius:0 0 10px 10px;
  overflow:hidden;
}

#container {
  display:flex;
}





#sidebar {
  flex-basis:auto;
  flex-grow:0;
  flex-shrink:0;
  align-items:stretch;
  width:200px;
  background-color:#dad6c8;
}
#sidebar a {
  color:var(--red);
  font-weight:bold;
}
#sidebar a:hover {
  text-shadow:0 0 5px #fff, 0 0 5px #ffe590, 0 0 5px #fff;
}
#sidebar h1 {
  font-family:'Noto Sans';
  font-size:29px;
  line-height:28px;
  letter-spacing:-1px;
  color:white;
  -webkit-text-stroke-width:0.5px;
  -webkit-text-stroke-color:white;
  text-shadow:2px -2px 0px rgba(115,29,8,0.41), -2px -1px 0px rgba(115,29,8,0.90), -2px 0px 0px rgba(115,29,8,0.99), -2px 1px 0px rgba(115,29,8,0.89), -2px 2px 0px rgba(115,29,8,0.42), -1px -2px 0px rgba(115,29,8,0.89), -1px -1px 0px rgba(115,29,8,1.00), -1px 0px 0px rgba(115,29,8,1.00), -1px 1px 0px rgba(115,29,8,1.00), -1px 2px 0px rgba(115,29,8,0.91), 0px -2px 0px rgba(115,29,8,1.00), 0px -1px 0px rgba(115,29,8,1.00), 0px 0px 0px rgba(115,29,8,1.00), 0px 1px 0px rgba(115,29,8,1.00), 0px 2px 0px rgba(115,29,8,0.99), 1px -2px 0px rgba(115,29,8,0.87), 1px -1px 0px rgba(115,29,8,1.00), 1px 0px 0px rgba(115,29,8,1.00), 1px 1px 0px rgba(115,29,8,1.00), 1px 2px 0px rgba(115,29,8,0.83), 2px -2px 0px rgba(115,29,8,0.35), 2px -1px 0px rgba(115,29,8,0.87), 2px 0px 0px rgba(115,29,8,0.98), 2px 1px 0px rgba(115,29,8,0.89), 2px 2px 0px rgba(115,29,8,0.41);
  filter:drop-shadow(-1px 1px 1px grey);
  margin:10px 0 10px 10px;
}
#sidebar h1::before {
  content:url('/imgs/menuicon.png');
  margin-right:7px;
  vertical-align:middle;
}
#sidebar ul {
  list-style-type:none;
  margin-left:40px;
}

#main {
  width:100%;
  background-image:url('/imgs/forumbg.png');
  background-repeat:no-repeat;
}





#content {
  margin:25px;
}

#forum {
  display:flex;
  width:100%;
  height:auto;
  min-height:220px;
  margin:0 auto 25px auto;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 0 5px rgba(128, 128, 128, 0.5);
  background-color:white;
  overflow:hidden;
}

.vista {
  flex-basis:auto;
  flex-grow:0;
  flex-shrink:0;
  align-items:stretch;
  width:144px;
  text-align:center;
  background-color:#f2eee5;
  background-image:url('/imgs/vista.png');
  background-size:auto;
  background-repeat:no-repeat;
  border-right:1px solid var(--border);
}
.vista img {
  width:60px;
  height:auto;
  margin-top:20px;
  margin-bottom:1px;
  border:1px solid black;
}
.username {
  font-weight:bold;
  font-size:10.5px;
  line-height:16px;
  color:white;
  text-shadow:2px -2px 0px rgba(115,29,8,0.41), -2px -1px 0px rgba(115,29,8,0.90), -2px 0px 0px rgba(115,29,8,0.99), -2px 1px 0px rgba(115,29,8,0.89), -2px 2px 0px rgba(115,29,8,0.42), -1px -2px 0px rgba(115,29,8,0.89), -1px -1px 0px rgba(115,29,8,1.00), -1px 0px 0px rgba(115,29,8,1.00), -1px 1px 0px rgba(115,29,8,1.00), -1px 2px 0px rgba(115,29,8,0.91), 0px -2px 0px rgba(115,29,8,1.00), 0px -1px 0px rgba(115,29,8,1.00), 0px 0px 0px rgba(115,29,8,1.00), 0px 1px 0px rgba(115,29,8,1.00), 0px 2px 0px rgba(115,29,8,0.99), 1px -2px 0px rgba(115,29,8,0.87), 1px -1px 0px rgba(115,29,8,1.00), 1px 0px 0px rgba(115,29,8,1.00), 1px 1px 0px rgba(115,29,8,1.00), 1px 2px 0px rgba(115,29,8,0.83), 2px -2px 0px rgba(115,29,8,0.35), 2px -1px 0px rgba(115,29,8,0.87), 2px 0px 0px rgba(115,29,8,0.98), 2px 1px 0px rgba(115,29,8,0.89), 2px 2px 0px rgba(115,29,8,0.41);
}
.info {
  display:flex;
  justify-content:space-evenly;
  align-items:normal;
  flex-wrap:wrap;
  width:120px;
  margin:10px auto;
  color:var(--red);
  font-size:10px;
  font-weight:bold;
}
.info img {
  align-self:center;
  border:none;
  margin:0;
  width:auto;
}
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip img {
  cursor:var(--cur-point);
}
.tooltiptext {
  position:absolute;
  visibility:hidden;
  width:100px;
  left:10%;
  top:100%;
  background-color:white;
  color:var(--red);
  text-align:center;
  padding:5px 0;
  border-radius:6px;
  box-shadow:0 0 5px rgba(128, 128, 128, 0.5);
}
.tooltip:hover .tooltiptext {
  visibility:visible;
}

.post {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

#title {
  margin-top:10px;
  margin-inline:15px;
  padding-bottom:10px;
  color:var(--red);
  font-weight:bold;
  border-bottom:1px solid lightgrey;
}
#title span {
  font-size:11px;
  color:var(--border);
  font-style:italic;
  font-weight:bold;
}
#title span::before {
  content:'| ';
  padding:0 5px 0 5px;
}

#message {
  height:auto;
  margin-top:15px;
  margin-inline:15px;
  text-align:justify;
}

#signature {
  display:flex;
  flex-direction:row;
  width:520px;
  justify-content:center;
  align-items:center;
  height:100px;
  margin-inline:15px;
  border-top:1px solid lightgrey;
  font-size:10px;
}
#signature b {
  color:#8b024b;
}
#signature a {
  color:#D86EB7;
}
#signature .center {
  text-align:center;
}
#signature hr {
  margin:2px 0;
}
.col1 {
  width:auto;
}
.col2 {
  width:90px;
  text-align:center;
}
.col3 {
  width:auto;
}
.col4 {
  width:185px;
  text-align:center;
  letter-spacing:-0.5px;
}
.col4 br {
  margin:0;
}
.col5 {
  width:auto;
}





h1 {
  font-family:Verdana, sans-serif;
  font-size:22px;
  line-height:0;
  color:var(--red);
  margin-bottom:30px;
}

hr {
  border-top:none;
  border-right:none;
  border-left:none;
  border-bottom:1px solid lightgrey;
}

p {
  margin-bottom:15px;
}

ol {
  padding-left:40px;
  margin:15px 0;
}
ol li {
  margin:7px 0;
}

blockquote {
  margin-left:64px;
  margin-bottom:15px;
}

.spoiler {
  background-color:black;
  color:black;
}
.spoiler::selection {
  color:white;
}

.quote {
  border:1px solid #874430;
  margin:8px 0;
  width:100%;
  height:auto;
}
.quote_head {
  background-color:#874430;
  color:white;
  font-weight:bold;
  padding:4px 8px;
}
.quote_head span::after {
  content:':';
}
.quote_body {
  background-color:#f8f3d4;
  color:black;
  font-family:monospace;
  font-size:13px;
  padding:8px 16px;
  height:auto;
}