@font-face {
  font-family: "Russo One";
  src: url("fonts/RussoOne.ttf") format("truetype");
}


@font-face {
  font-family: "davidabecker";
  src: url("fonts/davidabecker.ttf") format("truetype");
}

:root {
  --font-family: 'Source Sans Pro', sans-serif;
  --font-size:small;
  --border: 1px solid red;
  --bg-color: rgba(0, 0, 0, .75);
  --text-color: white;
  --content-bg: transparent;
  --content-padding: 0;
  --bg-image: url('https://i.pinimg.com/736x/07/92/23/07922336128666b4ab44dff42a9debe0.jpg');  
}

body {
  height:100%;
  width:100%;
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size);
  background-color: var(--bg-color);
  color: var(--text-color);
  background-image: var(--bg-image);
  background-attachment: fixed;
  background-position: bottom;
  background-size: 100vw;
}

h1 {
  font-family: 'Russo One';
  color: #f1e15a;
  font-size: 50px;
  margin: 5px 10px 5px 10px;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
h2 {
  font-family: 'Russo One';
  color: #0070ba;
  font-size: 30px;
  margin: 10px 5px 10px 5px;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
h3 {
  font-family: 'Russo One';
  color: #f1e15a;
}

a {
  color: #0070ba;
}
a:hover {
  color: #0070ba;
  text-shadow: -1px 0 red, 0 1px red, 1px 0 red, 0 -1px red;
}
a:focus {
  color: red;
}


.main{
  position: relative;
    left: 20vw;
  width: 60vw;
  /*border: 1px dashed white;*/
}

.header{
  background-color: transparent;
  text-align: center;
  position: static;
  justify-content: center;
  width: auto;
  height: 71px;
  margin: auto;
}

.content{
  background: var(--bg-color);
  border: var(--border);
  position: static;
  text-align: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0 10px 10px 10px;
}

.footer{
  background-color: transparent;
  text-align: center;
  justify-content: center;
  position: static;
  width: auto;
  height:  auto;
  padding: 0;
}

.lsidebar{
  position: fixed;
    top: 0;
    left: 0;
  padding: 90px 0 0 0;
  width: 20vw;
  height:100vh;
  background-position: top -30px left;
  background-size: 111%;
  background-repeat: no-repeat;
}

.links{
  position: static;
    top: 0;
    left: 0;
  border-top-right-radius: 75%;
  border-bottom-right-radius: 75%;
  width: auto;
  height: auto;
}

.rlink{
  background-color: transparent;
  text-align: right;
  position: static;
  width: auto;
  height: 60px;
  margin: 0px;
  padding:0;
  border:1px solid transparent;
}

.buttons{
  background-color: transparent;
  position: fixed;
    bottom: 0px;
    width: 20vw;
  height: 40vh;
  margin: 0 auto;
}

.rsidebar{
  position: absolute;
    top: 76px;
    right: 0;
  padding: auto;
  width: calc(20vw - 15px);
  align-items: center;
}

.blinkies{
  overflow: hidden;
  border: var(--border);
  width: min-content;
  height: 450px;
  margin: auto;
}

.email{
  position: fixed;
    bottom: 0;
    right: 0;
  background-color: transparent;
  height: auto;
  width: 8vw;
  margin: 0;
  z-index: 4;
}

.sitebutton{
  position: fixed;
    bottom: 3px;
    right: calc(8vw + 13px);
  background-color: transparent;
  height: auto;
  width: 81px;
  margin: 0;
  z-index: 4;
}

.grid {
  display: grid;
  grid-template-areas:
    'box1 box2';
  gap: 15px;
  background-color: transparent;
  text-align:center;
  justify-content: center;
  position: static;
  width: 100%;
  height: min-content;
  margin: 15px 0 0 0;
}

.boxesl{
  grid-area: box1;
  display: flex;
  flex-flow: column wrap;
  flex-basis: content;
  justify-content: space-between;
  height:min-content;
  width: calc(30vw - 7.5px);
  gap:15px;
  float:left;
}

.boxesr{
  grid-area: box2;
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  height:min-content;
  width: calc(30vw - 7.5px);
  gap:15px;
  float:right;
}

.intbox{
  background: var(--bg-color);
  border: var(--border);
  height: 100%;
  position: relative;
}

.review{
  background-color: var(--bg-color);
  text-align:center;
  justify-content: center;
  position: static;
  width: 100%;
  height: min-content;
  margin: 15px 0 0 0;
}

.reviewtable{
  width: 100%;
  border-collapse:collapse;
  border-spacing:0;
  table-layout: auto;
}

.reviewtable td{
  overflow:hidden;
  padding:10px;
  word-break:normal;
}
  
.reviewtable th{
  overflow:hidden;
  padding:10px;
  word-break:normal;
}

.reviewtable .reviewtable-0lax{
  border: var(--border);
  text-align:left;
  vertical-align:top;
}


tr{
  margin:0;
}
td{
  padding: 10px 10px 10px 10px;
}
 
 

.bottoma { vertical-align: text-bottom;}
.middlea { vertical-align: middle;}

.indent {
  position: relative;
  left: 5px;
}
.rightindent {
  position: relative;
  right: 5px;
}

.topblinkiemargin{
  margin: -13px 0 0 0;
}
.blinkiemargin{
  margin: -5px 0 0 0;
}
.bottomblinkiemargin{
  margin: -5px 0 0 0;
}

.currentlyl{
 text-align:left; 
}  
  
.currentlyr{  
  text-align:right;
}

  /* Transitions */

@keyframes appear
{
	0% { opacity: 0 }
	100% { opacity: 1 }
}

@-webkit-keyframes appear
{
	0% { opacity: 0 }
	100% { opacity: 1 }
}

@keyframes fade-in-out
{
	0%,100% { opacity: 0 }
	50% { opacity: 1 }
}

@-webkit-keyframes fade-in-out
{
	0%,100% { opacity: 0 }
	50% { opacity: 1 }
}

@keyframes rumble 
{
	0%, 100% {}
	50% { transform: translateY(-0.2em) }
}

@-webkit-keyframes rumble 
{
	0%, 100% {}
	50% { -webkit-transform: translateY(-0.2em) }
}

@keyframes shudder 
{
	0%, 100% {}
	50% { transform: translateX(0.2em) }
}
@-webkit-keyframes shudder 
{
	0%, 100% {}
	50% { -webkit-transform: translateX(0.2em) }
}

mark
{
	color:rgba(0,0,0,0.6);
	background-color: #ff9;
}

ins
{
	color:rgba(0,0,0,0.6);
	background-color: hsla(45,100%,90%,0.5); /* Yellowed correction fluid */
	border-radius:0.5em;
	box-shadow: 0em 0em 0.2em hsl(45,100%,80%);
	text-decoration:none;
}

del
{
	background-color: #000; /* Censored text */
	text-decoration:none;
}

center
{
	text-align:center;
	margin: 0 auto;
	width: 60%;
}

blink
{
	text-decoration: none;
	animation: fade-in-out 1s steps(1,end) infinite alternate;
	-webkit-animation: fade-in-out 1s steps(1,end) infinite alternate;
}

/* Secondary text styles, for general use by Twine authors */

.outline
{
	color: white;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.shadow
{
	text-shadow: 0.08em 0.08em 0.08em #000;
}

.condense
{
	letter-spacing: -0.08em;
}

.expand
{
	letter-spacing: 0.1em;
}

.box
{
	border: 1px solid #222;
	border-radius: 0.1em;
}

.blur
{
	color:transparent;
	text-shadow: 0em 0em 0.08em #000;
}

.blurrier
{
	color:transparent;
	text-shadow: 0em 0em 0.2em #000;
}

.blurrier::selection {
	background-color:transparent;
	color:transparent;
}

.blurrier::-moz-selection {
	background-color:transparent;
	color:transparent;
}

.smear
{
	color:transparent;
	text-shadow: 0em 0em 0.02em rgba(0,0,0,0.75), -0.2em 0em 0.5em rgba(0,0,0,0.5), 0.2em 0em 0.5em rgba(0,0,0,0.5);
}

.mirror
{
	display:inline-block;
	transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
}

.upside-down
{
	display:inline-block;
	transform: scaleY(-1);
	-webkit-transform: scaleY(-1);
}

/* Animated effects follow */

.fade-in-out
{
	text-decoration: none;
	animation: fade-in-out 2s ease-in-out infinite alternate;
	-webkit-animation: fade-in-out 2s ease-in-out infinite alternate;
}