/* welcome to my fucking zone */
/* rule number 1: dont call color variables here. 
if you're calling a color, you probably want it to go on a specific stylesheet 
so that it wont fuck up on other layouts ... */

/* main layout */

@font-face {
  font-family: "Forest Runes";
  src: url("/ForestRunes-Regular.ttf") format("truetype");
}

html,
body {
  margin: 0;
  padding: 0;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  height: 100%;
}

body {
    background-image: var(--bgimg);
}

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0;
  align-items: stretch;
  min-height: 100%;
}
.mastercontainer {
  width: 60%;
  min-width: 950px;
  margin: 0 auto;
  text-align: center;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.main {
  padding: 0;
  margin: 0;
  align-items: stretch;
  display: flex;
  flex: 9;
  height: auto;
}
/* used to be included in .main, now separate */
.banner {
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 200px;
}
.content,
.main {
  border: none;
}

.content p {
  margin: 10px;
  padding: 5px;
}

/* navigation */

.nav,
.right,
.left {
  padding: 0;
  margin: 0;
  text-align: initial;
  background-image: none;
}

.left {
  min-width: 180px;
  flex: 2;
}

.right {
  flex: 2;
  min-width: 160px;
}

.subtitle {
  width: 100%;
  padding: 5px 0;
  text-align: right;
}

.subtitle img {
  float: left;
  padding-left: 5px;
  padding-right: 10px;
  vertical-align: middle;
}

.dropbtn {
  text-align: left;
  cursor: pointer;
  width: 100%;
  border:0;
}

.droplinks {
  border-width: 0 0 0 6px;
  border-style: double;
}

.droplinks,
.links {
  display: block;
  padding: 0;
}

.dropdown,
.links a,
.dropdown a,
.dropbtn {
  display: block;
}

.dropdown-content {
  display: none;
  position: relative;
  z-index: 1;
}

.dropdown-content a {
  text-decoration: none;
  display: block;
}

section > p {
  padding-left: 5px;
  padding-right: 5px;
  margin: 0;
  background-image: none;
}

.links {
  background-image: none;
  margin-top: 0;
}

.links,
.droplinks,
.dropbtn,
.dropdown-content a,
.droplinks a,
.right {
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  background-image: none;
}

.links a,
.droplinks a {
  text-decoration: none;
}

.links p {
  border-width: 0 0 1px 4px;
  border-style: solid;
}

.links a,
.dropbtn {
  padding-left: 5px;
}

.links p,
.dropbtn {
  margin: 0;
  line-height: 2em;
}

.droplinks a {
  margin: 0;
  padding: 0;
}

.left select {
  width: 150px;
}

.dropdown-content {
  width: 100%;
  background-image: none;
}

.dropdown-content a {
  padding: 5px;
  background-image: none;
}

.dropbtn {
  margin: 0;
  background-image: none;
}

.dropbtn::after {
  content: " ...";
}

/* content */

.content ul,
.content li {
  margin: 0;
  padding: 0;
  background-image: none;
}

.content {
  width: 100%;
  text-align: left;
}

.content h1 {
  padding: 10px;
  margin: 5px 0;
  background-image: none;
  text-align: center;
}

.content h2 {
  border-width: 4px 4px 4px 0;
  background-image: none;
  margin: 5px 0;
  padding: 5px 20px;
  border-collapse: collapse;
}

.content h3 {
  padding-left: 25px;
  background-image: none;
  margin: 0 20px 0 0;
  width: 100%;
}

.content h4 {
  padding-left: 25px;
  background-image: none;
  margin: 0 20px 0 0;
  width: 50%;
  min-width: 400px;
}

.content ul {
  margin: 0;
  padding-left: 25px;
  text-align: left;
}

.content li {
  padding: 10px 10px 10px 20px;
}

.content ul {
  margin-left: 10px;
  margin-bottom: 10px;
}

/* tags on recent updates */

.rectags,
.datestamp {
  line-height: 40px;
  border-width: 0 0 1px 0;
  border-style: none none solid none;
  min-height: 40px;
  vertical-align: middle;
}

.rectags {
  text-align:center;
}

.rectags a {
  margin:3px;
}

.datestamp {
  border-width: 4px;
  border-style: double;
  font-style: italic;
  padding: 5px 0;
}

/* under-banner directory info */

.drctry p {
  background-image: none;
  line-height: 1.2rem;
  font-style: italic;
  text-align: right;
  padding: 5px 15px;
}

.drctry {
  margin: 15px 0;
}

.drctry img {
  vertical-align: middle;
  padding: 3px;
}

/* blog related */
.sigwrapper {
  width:100%;
  height:60px;
  margin:5px 0;
}
.signature {
  font-style: italic;
  text-align: right;
  padding-bottom: 0;
  padding-top: 6px;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 6px;
  width:185px;
  height:60px;
  float:right;
  position:relative;
}

.sigimg {
  -webkit-mask-image: url('/img/res/gen/sigfull.png');
  width:185px;
  height:60px;
}

.flavortable {
  width: 80%;
  min-width: 500px;
  margin: 20px auto;
  border-collapse: collapse;
  border-width:4px;
}

.flavtd {
  padding-left: 15px;
  border-width: 0 0 1px 0;
  border-style: solid;
  padding:5px;
}

.flavortable iframe {
  width: 400px;
}

.blogimg {
  text-align: center;
  width: 100%;
  padding: 0 !important;
}

.blogimg img {
  max-width: 300px;
  height: auto;
}

.flavortable tr {
  vertical-align: middle;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;

}

.flavortable {
  border-collapse: collapse;
  border-width:1px;
}

.blognavbar {
  margin: 10px 0;
  min-height:50px;
  align-items:center;
  align-content:center;
  font-size:20px;
  display:flex;
  flex-wrap:wrap;
  text-align: center;
}

.blognavbar a {
  padding:15px;
  border-radius:10px;
  flex:1;
}

.blognavbar .inactive {
  padding:15px;
  border-radius:10px;
  flex:1;
}

.title {
  padding: 5px 20px;
  text-align: center;
}

.artnav {
  padding: 10px;
  margin-bottom: 10px;
}

.artdate {
  text-align:right;
  font-style:italic;
  padding:5px;
  border-radius:10px;
}
.my-pagination {
  font-size: 1.7rem;
}

.abouttable {
  width:100%;
  border-collapse: collapse;
}

.abouttable td {
  border:1px solid var(--midlight);
  padding:15px;
}

.abouttable th {
  padding:15px;
}

/* code tag styling */

.simplecontainer {
  display:flex;
  align-items:center;
  align-content:center;
  padding:5px 20px;
  margin:10px;
  overflow:auto;
  border-radius:10px;
}

code, pre {
  font-family: courier new, serif;
  overflow:auto;
  padding:0;
  margin:0;
  width:100%;
  white-space: pre-wrap;
}

/* review tables */
.reviewsummary {
  float: right;
  width: 200px;
  margin: 10px;
  border-spacing: 0;
  border-width: 1px;
  border-style: solid;
}
.reviewsummary td {
  width: 100px;
  padding: 5px;
  border: none;
}
.reviewsummary td:nth-child(even) {
  border: none;
  width: 100px;
}
.reviewtitle a {
  text-align: center;
}

/* skip to nav or content */

.skip-to-nav-link, .skip-to-content-link {
  background: var(--middark);
  height: 30px;
  width:100%;
  padding-top: 8px;
  padding-bottom: 8px;
  color:var(--light);
}

.skip-to-nav-link {
  display:none; /* hide unless mobile... */
}

.skip-to-content-link {
  top:-1px;
  left:-1px;
  transform: translateY(-100%);
  transition: transform 0.3s;
  position:absolute;
}

.skip-to-content-link a, .skip-to-nav-link a {
  color:var(--light);
}

.skip-to-content-link:focus, .skip-to-nav-link:focus {
  transform: translateY(0%);
}

/* latest blog posts */

.updtbl {
  width: 100%;
  border: none;
  padding: 0;
  border-collapse: collapse;
}

.updico {
  width: 100px;
  text-align: center;
  vertical-align: top;
}

.updsubj {
  padding: 5px 20px;
  vertical-align: middle;
  text-align: left;
  line-height: 20px;
}

.updtbl th {
  text-align: left;
  padding: 5px 5px 5px 25px;
  height: 25px;
}

/* for columns in-page whenever i need to put shit side by side ie on the gammargb page */

.colcont {
  width: 100%;
  display: flex;
}

.col ul,
.summ ul,
.col li,
.sum li {
  list-style-type: none !important;
  margin: 0;
  padding: 0;
}

.col li::before {
  content: "" !important;
}

.col h2,
.summ h2 {
  padding-bottom: 5px;
  background-image: none !important;
}
.col li,
.summ li {
  margin: 5px;
}

.col ul p,
.summ ul p {
  padding: 0;
  margin: 2px 0px;
}

.col {
  flex: 2;
}

/* spoiler tags that reveal on hover */

.spoilers {
  background-color:black;
  color:black;
  padding:2px;
  transition:1s;
}

.spoilers:hover {
  color:white;
  transition:.3s;
}

/* for the front page recent arts */

.recentart img,
.randomart img {
  transition: all 0.1s linear;
  margin: 5px auto;
  height: auto;
  border-width: 1px;
  border-style: solid;
}

.randomart img {
  width: 100%;
  max-width: 120px;
}

.recentart a {
  height: 100%;
  width:auto;
  min-height:80px;
  max-height:150px;
}

.recentart {
  width: 100%;
  flex-wrap:nowrap;
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  align-items:stretch;
  margin: 0 auto;
  overflow: hidden;
}

.recentart img:hover,
.blogimg img:hover,
.display img:hover,
.right img:hover {
  opacity: 0.7;
  transition: all 0.1s linear;
}

.blogimg img,
.display img,
.right img {
  transition: all 0.1s linear;
}

.recententry {
  height: auto;
  box-sizing: border-box;
  text-align: center;
  min-height:80px;
  max-height:150px;
}
.recententry a {
  margin: 0;
}

.recentart,
.randomart {
  width: 100%;
  height: auto;
  display: flex;
  text-align: center;
  justify-content: center;
}

.randomart {
  flex-wrap: wrap;

  margin: 0 auto;
}

.randomart {
  flex-direction:column;
}

/* thumbnail photo frames for art galleries */

/* 

note: 

thmtble's width is defined inline wherever it's called for flexibility

ie on 2d/3d galleries its at width 100% because it wraps better that way

on the art index it's at width 500px because it keeps it neater

i will probably hate that later. 

*/

.thmtble {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  text-align: center;
  justify-content: center;
}
.thmb {
  margin: 2px;
  text-align: center;
  width: 150px;
  height: 150px;
}
.thmb:hover {
  transition: all 0.1s linear;
}
.thmb p,
.thmb a {
  padding: 0 !important;
  margin: 0 !important;
}
.thmb img {
  opacity: 0.8;
  transition: all 0.1s linear;
  float: left;
}
.thmb img:hover {
  opacity: 1;
  transition: all 0.1s linear;
}

/* for individual art pages 

'display is the main image. 'descont/desc' art for the comments. imgnext/prev/etc are navigation through the gallery it's a part of ie 2d or 3d.*/

.display {
  text-align: center;
}
.display img {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
}

.descont {
  justify-content: center;
  width: 100%;
  display: flex;
  margin-bottom: 5px;
  margin-top: 5px;
}
.desc {
  border: none;
  width: 100%;
  min-height: 100px;
  padding: 10px;
}

.imgnext {
  border-radius: 40px 0px 0px 40px;
}
.imgprev {
  border-radius: 0px 40px 40px 0px;
}
.imgnav,
.imgprev,
.imgnext {
  text-align: center;
  padding: 10px;
  margin-bottom: 20px;
}
.desc p {
  padding: 9px;
  margin: 0;
}
.titl {
  padding-bottom: 10px !important;
  text-align: left;
  vertical-align: middle;
}
.date:before {
  font-style: initial;
}
.cmnt {
  text-align: left;
}

details {
  border-radius:10px;
  margin: 15px 20px;
}

details p {
  padding: 15px;
}

summary {
  padding:5px;
  text-decoration:underline;
}

/* tableturf */
table.tbltrf {
  border: 0;
  background-color: #1d1d1d;
  text-align: center;
  border-collapse: collapse;
}
table.tbltrf tr {
  height: 8px;
}
table.tbltrf td,
table.tbltrf th {
  border: 2px solid #727272;
  width: 8px;
  height: 8px;
}
table.tbltrf tbody td {
  font-size: 2px;
  color: #1d1d1d;
}
.borders {
  background-color: #47378f;
  border: none;
}
.asp {
  background-color: #f18b00;
  border: 2px solid #942500 !important;
}
.arg {
  background-color: #ecfa03;
  border: 2px solid #f18b00 !important;
}
.dsp {
  background-color: #00b9dc;
  border: 2px solid #09078f !important;
}

/* footer */

.footer {
  margin: 0;
  padding: 5px 0;
  text-align: center;
  line-height:150%;
}
.footer p {
  margin: 0;
  padding: 0;
}

/* furryring */
.webring-links,
.furryring {
  font-size: 9px !important;
}

/* front page box */

.fancybox {
  margin: 10px;
  text-align: left;
  border-radius: 10px;
  padding: 10px 0;
  border-collapse: collapse;
}

/* comments shoutbox etc */

#c_widget {
  box-sizing: border-box;
  height: 100%;
  overflow: auto;
  background-attachment: fixed;
  font-size: 14px;
  width: 100%;
}

#c_widget button,
#c_widget input[type="submit"] {
  padding: 8px;
  margin: 15px;
  font-size: 20px;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  text-transform: lowercase;
}
/* Input section */
#c_inputDiv {
  margin-bottom: 15px;
  width: 100%;
}

#c_widgetTitle {
  margin-bottom: 10px;
  padding: 5px;
  text-transform: lowercase;
  font-style: italic;
  font-weight: bold;
  text-align: left;
}

.c-inputWrapper {
  display: block;
  text-align: right;
}
.c-input {
  padding: 4px;
  color: black;
  outline: none;
}

.c-textInput {
  width: calc(100% - 20px);
  max-width: 900px;
  resize: none;
  color: black;
}

#c_submitButton {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

#c_submitButton:hover {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

#c_replyingText {
  text-align: right;
}

/* Comment section */
.c-comment {
  text-align: left;
  font-size: 16px;
}

.c-reply {
  display: block;
  width: 90%;
  margin: 0 0 10px auto;
  padding: 15px 5px 15px 0;
  border-width: 0 0 0 3px;
  border-style: solid;
}
.c-reply:last-child {
  margin-bottom: 0;
}
.c-replyContainer {
  margin-top: 0;
  padding: 0;
}

#c_container {
  padding: 0px 4px;
}

.c-name {
  display: inline-block;
  margin: 0;
  margin-right: 10px;
  padding: 0;
  padding-right: 20px;
  text-align: left;
  border: none;
  width:100%;
}
.c-comment h3 {
  text-align: left;
  margin: 0 0 15px 0;
  border-width:1px 0 1px 0;
  padding:10px 0;
  border-style:solid;
  border-radius:0 !important;
}
.c-site {
  text-transform: lowercase;
  text-decoration: none;
  text-align: right;
  padding-left: 5px;
}
.c-site:hover {
  color: var(--light);
}
.c-timestamp {
  float: right;
  opacity: 75%;
  text-align: left;
}

.c-timestamp {
  padding-right: 5px;
  font-style: italic;
}
.c-text {
  text-align: left;
  margin: 0;
  padding: 10px;
  margin: 0 10px;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  text-align: justify;
}

/* Pagination */
#c_pagination {
  text-align: center;
}
.c-replyButton {
  margin-top: 10px;
  margin-right: 4px;
}
.c-expandButton {
  margin-top: 10px;
  margin-left: 4px;
}
.c-paginationButton {
  margin-right: 4px;
  margin-left: 4px;
}

#c_form {
  width: 100%;
}

/* text sizes */

/* small */

.smallink,
.drctry p,
.footer p {
  font-size: 0.9rem;
}

/* 1.5x */

h4,
.content h4,
.subtitle,
details,
details p {
  font-size: 1.2rem;
}

/* 2x */

h3,
.updtbl .heading,
.updtbl th,
.content h3,
.c-comment h4 {
  font-size: 1.4rem;
}

/* 3x */

h2,
.content h2,
.title {
  font-size: 1.7rem;
}

/* normal */

body,
.links a,
.dropbtn,
.content ul,
.content li,
.flavortable tr,
.blogtags,
.blogtags a,
.flavortable td,
.desc,
.cmnt {
  font-size: 1rem;
}

.divider {
  border-style: double;
  border-width: 4px;
  width: 50%;
}

/* special bold class idr where this goes */
.b {
  padding:7px;
  border-width:1px;
  border-style:solid;
  font-weight:bold;
}

/* for signature */

svg path {
  fill: var(--light); 
}

/* splash css */

.splashcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
  font-size:16px;
  font-family:Verdana, Geneva, Tahoma, sans-serif;
  height:100%;
}

.splash {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:row;
  width:40%;
  min-width:300px;
}

.spcont {
  width:50%;
  padding:20px;
  border-radius:20px;
  min-width:300px;
}

.spcont h1 {
  font-size:18px;
  font-weight:bold;
}

form label {
  font-weight:bold;
}

.enterlink {
  padding:8px;
  font-size:24px;
  border-radius:7px;
}

.enterlink:hover {
  padding:8px;
}

.spimg {
  width:50%;
  height:auto;
  display:flex;
  align-items:center;
}


.arrow {
  width: 0; 
  height: 0; 
  float:left;
  position:relative;
}

/* might be vestigal bits of splash css */
.endbox {
  padding: 50px;
  background-color:var(--middark);
  border-radius:10px;
  color:var(--light);
  box-shadow: 10px 10px rgba(0,0,0,0.5);
}

.endbox a {
  color:var(--midlight);
}

.endbox a:hover {
  color:var(--light);
}

.spcont form select {
  margin-bottom:15px;
  margin-top:5px;
}

/* and now, ze mobile... */

@media only screen and (max-width: 1100px) {
  .skip-to-nav-link {
  display:block;
}
  .mastercontainer {
    width: 100%;
    margin: 0;
    border: none;
  }

  .main {
    width: 70%;
    border: none;
  }
  .right {
    min-width: 200px;
    width: 15%;
    border: none;
  }

  .left {
    min-width: 200px;
    width: 15%;
    border: none;
  }

  .left select {
    font-size: 18px;
  }

  .splash {
  flex-direction:row;
  width:80%;
  min-width:400px;
}

.spcont {
  width:80%;
  min-width:300px;
}

.spimg {
  width:40%;
  height:auto;
}

.spimg img {
  width:100%;
  height:auto;
}

form select {
  height:50px;
  border-radius:3px;
  font-size:23px;
}
}

@media only screen and (max-width: 970px) {
  html,
  body,
  .container,
  .mastercontainer,
  .left,
  .right,
  .main {
    border: none !important;
  }
  html,
  body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 16px;
  }
  .container,
  .mastercontainer,
  .main {
    display: flex;
    flex-flow: column wrap;
    width: 100%;
    float: none;
    height: auto;
    margin: 0;
    min-width: 200px;
    border: none;
  }

  .container,
  .mastercontainer {
    min-width: initial;
  }

  .banner {
    order: 1;
    min-height: 100px;
  }
  .main {
    order: 1;
  }
  .left {
    order: 2;
    flex-grow: 1;
    width: 100%;
    display: block;
    margin: 0;
    height: auto;
  }
  .nav,
  .right {
    flex-grow: 1;
    width: 100%;
    display: block;
    margin: 0;
    height: auto;
    order: 3;
  }
  .reviewsummary {
    width: 100%;
  }
  .reviewsummary td:nth-child(1) {
    text-align: center;
  }

  .desc,
  #c_form,
  .recentart {
    width: 100%;
  }

  .display img {
    max-width: 100%;
    max-height: 100%;
  }

  .links,
  .links a,
  .dropbtn {
    font-size: 1.1rem;
  }

  .links a,
  .dropbtn {
    padding: 1px;
  }

  .smallink {
    font-size: 1rem;
  }

  .drctry {
    display: none;
  }

  .flavortable {
    max-width: initial;
    min-width: initial;
    border: none !important;
  }

  .flavtd {
    padding: 5px 20px;
    width: 100%;
  }

  .main {
    flex: 1;
  }

  .content p {
    padding: 0;
    margin-bottom:20px;
  }

  .blogtags {
    font-size: 20px;
  }

  .left select {
    width: 80%;
    font-size: 20px;
  }

  .rectags,
  .c_widget button {
    padding: 10px;
    font-size: 18px;
    margin: 0 10px;
  }

  .updsubj,
  body,
  .fancybox,
  .content,
  .c-text {
    font-size: 16px;
  }

  .recentart {
  width: 100%;
  flex-wrap:wrap;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  align-content:space-between;
  row-gap:10px;
  margin: 0 auto;
  overflow:hidden;
  }

  .recententry {
  width:50%;
  height:50%;
  border:none;
  }

  .recententry img, .recententry a {
  height:100%;
  width:auto;
  border:none;
  }

  .artdate {
  padding:4px !important;
  }

  .splash {
  display: flex;
  flex-flow: column wrap;
  width: 100%;
  float: none;
  height: auto;
  margin: 0;
  min-width: 200px;
  border: none;
  padding:0;
  }

  .splashcontainer {
  height:auto;
  }

  .spcont {
  order:2;
  }
  
  .spimg {
  order:1;
  width:100%;
  display:flex;
  align-items:flex-end;
  text-align:center;
  align-content:center;
  justify-content:center;
  }

  .spimg img {
  width:100%;
  height:auto;
  text-align:center;
  margin:0 auto;
  }

  .arrow {
    float:none;
  margin:0 auto;
  display:block;
  position:absolute;
  }

  .spcont form select {
    width:50%;
  }

}