/* 
    Generic page setup styling
*/

* {
    box-sizing: border-box;
}

@font-face { font-family: JetBrains; src: url('/fonts/JetBrainsMono-Regular.otf'); } 

body {
  margin-top: 100px;
        margin: 0 auto;
	background-color: #FFC300;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  opacity: 0.9;
  animation-name: background-overlay-animation;
  animation-duration: 300s;
	animation-iteration-count: 1;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;

        font-family: JetBrains;
	color: #33cccc;
	font-size: 20px;
}
.header {
  position: sticky;
  top: 0;
 padding: 0px 0px;
  background: #000;
  color: #f1f1f1;
}
div.form
{
    display: block;
    text-align: center;
}
form
{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
h1 {
    font-family: JetBrains;
    font-size: 25px;
    text-align: center;
    background-color: #0C0001;
    color: #22cccc;
    margin: 0;
}

h2 {
    text-align: center;
    margin: 0;
}

h3 {
    text-align: right;
    margin: 0 2% 0 0;
}

#page {
    width: 75%;
    margin: auto;
}

#container {
    padding: 1em 2em;
    background: #403e3d;
}

a.x:link, a.x:visited {
    	color: #95c5d9;
        font-family: JetBrains;
	font-size: medium;
	text-decoration: none;
}
a.end:link, a.end:visited {
	color: #b22222;
        font-family: JetBrains;
	font-size: medium;
	text-decoration: none;
}
a:link, a:visited {
        font-family: JetBrains;
    	color: #95c5d9;
	font-size: medium;
}
a:hover {
    	color: #95c5d9;
}
a:active {
    	color: purple;
	text-decoration: underline;
}
.subcontainer{ 
    display: grid;  
    grid-gap: 5px;  
    grid-template-columns: repeat(autofit, minmax(100px, 1fr));
    grid-template-rows: repeat(2, 100px);  
}

.subs table, th, td{ 
	background: #999; 
	border: 5px #000 solid; 
	padding: 4px; 
	text-align: center; 
	font-weight: bold;
}

.postcontainer{ 
    display: grid;  
    grid-gap: 25px;  
    grid-template-columns: repeat(1, 100%);
/*    grid-template-columns: repeat(1, minmax(100px, 1fr)); */
/*    grid-template-columns: repeat(1, minmax(2fr, 1fr)); */
/*    grid-template-rows: repeat(2, 400px);  */
}

.post{
	 display: table;
	 padding: 25px;
/*	 margin: auto;*/
	 margin-left: 250px; 
	 margin-right: 150px; 
	 margin-top: 10px; 
	 margin-bottom: 10px; 
	 background: rgba(12,0,17,0.8);
/*	 background:#0C0101; */
/*	 background:#C06C84; */
         font-size: normal;
         font-family: JetBrains;
	 border: 2px #33CCCC solid;
	 border-radius: 15px;
}
.postreply{
	 display: table;
	 padding: 15px;
	 margin-left: 35px; 
	 margin-right: 150px; 
	 margin-top: 5px; 
	 margin-bottom: 5px; 
/*	 margin: 25px; */
	 background: rgba(12,0,12,0.8);
/*	 background:#C06C84; */
         font-size: medium;
         font-family: JetBrains;
	 border: 1px #33C0CC solid;
	 border-radius: 10px;
}
.postreply2{
	 display: table;
	 padding: 15px;
	 margin-left: 350px; 
	 margin-right: 150px; 
	 margin-top: 5px; 
	 margin-bottom: 5px; 
/*	 margin: 25px; */
	 background: rgba(12,0,12,0.8);
/*	 background:#C06C84; */
/*         font-size: medium;*/
         font-family: JetBrains;
	 border: 1px #33C0CC solid;
	 border-radius: 10px;
}
.newpost table, th, td{
/*	display: flex; */
/*  	justify-content: center; */
	 background: #00080C; 
	 border: 3px #000 solid; 
	 padding: 4px; 
	 text-align: center; 
	 font-weight: bold;
}

#footer{
	display:flex; 
	flex-flow:row wrap;
	font-size: medium;
}

.alignleft {
	 background: #00080C; 
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  width: 33.33333%;
  text-align: left;
}
.aligncenter {
	 background: #00080C; 
  position: fixed;
  left: 33%;
  bottom: 0;
  width: 100%;
  width: 33.33333%;
  text-align: center;
}
.alignright {
	 background: #00080C; 
position: fixed;
  left: 66%;
  bottom: 0;
  width: 100%;
  width: 33.33333%;
  text-align: right;
}
details {
    	color: #95c5d9;
	font-size: medium;
	 margin-left: 350px; 
  padding: 0.5em 0.5em 0;
  transition: margin 350ms ease-out;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
  transition: margin 250ms ease-out;
}

details[open] {
  padding: 0.5em;
  color: #95c5d9;
  font-size: medium;
  margin-bottom: 0.5em;
  animation: open .1s ease;
}

@keyframes open {
  0% {opacity: 0; margin-left: 150px}
  100% {opacity: 1; margin-left: 0px}
}