/* Start of Background Animation BY Anastasia Goodwin https://codepen.io/agoodwin/pen/NMJoER */

@keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to {
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}
@-webkit-keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to {
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

@-moz-keyframes move-background {
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to {
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

@-webkit-keyframes move-background {
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to {
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

button:focus {outline:0;}

.background-container{
	position: fixed;
	top: 0;
	left:0;
	bottom: 0;
	right: 0;
  z-index: -3;
}

.stars {
  background: black url("/images/1.png") repeat;
  position: absolute;
  top: 0;
  bottom: 0;
	left: 0;
	right: 0;
	display: block;
  z-index: 0;
}

.twinkling{
	width:10000px;
	height: 100%;
	background: transparent url("/images/2.png") repeat;
	background-size: 1000px 1000px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;

  -moz-animation:move-background 70s linear infinite;
  -ms-animation:move-background 70s linear infinite;
  -o-animation:move-background 70s linear infinite;
  -webkit-animation:move-background 70s linear infinite;
  animation:move-background 70s linear infinite;

}

.clouds{
	width:10000px;
	height: 100%;
	background: transparent url("/images/3.png") repeat;
	background-size: 1000px 1000px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;

  -moz-animation:move-background 150s linear infinite;
  -ms-animation:move-background 150s linear infinite;
  -o-animation:move-background 150s linear infinite;
  -webkit-animation:move-background 150s linear infinite;
  animation:move-background 150s linear infinite;
}
.backgroundImg {
  height: 70vh;
  width:70vh;
  position: absolute;
  z-index: 3;
  right: 20px;
}

.logoImg {
  position: fixed;
  left: 7px;
  top: 8px;
  width: 30px;
  z-index: 3;
}

/* End of Background Animation */

.neon:hover {
  color: black;

  /* text-shadow: 2px 2px black; */

  text-shadow:
    0 0 5px #FF5E00,
    0 0 10px #FF5E00,
    0 0 20px #FF5E00,
    0 0 40px #FF5E00,
    0 0 80px #FF5E00,
    0 0 90px #FF5E00,
    0 0 100px black,
    0 0 150px black;
}

.neonFX {
  -webkit-filter: drop-shadow(0px 0px 5px #802F00);
  filter: drop-shadow(0px 0px 5px #802F00);
}

header, section, footer, aside, nav, main, article, figure {
  display: block;
}
body {
  font-family: Verdana,sans-serif;
  font-size: 0.9em;
  margin: 0px;
  background-color: black;
}

header{
  /* padding: 10px; */
  color: white;
  background-color: black;
  position:fixed;
  left:0px;
  top:0px;
  width: 100%;
  width: -moz-available;          /* WebKit-based browsers will ignore this. */
  width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
  width: fill-available;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
}

footer {
    padding: 4px;
    position: fixed;
    bottom: 0px;
    width: 100%;
    color: #802F00;
    background-color: black;
    text-align: center;
    font-size: x-small;
}

footer a {
  color: #802F00;
}

footer a:hover {
  color: #FF5E00;
}

section {
  margin: 5px;
  padding: 10px;
  padding-top: 60px;
}

article {
  border: 2px solid #802F00;
  margin: 5px;
  padding: 2px;
}

article.articleRow {
  height: inherit;
  /* min-height: 444px; */
  margin-bottom: 5px;
}

article:hover {
  border: 2px solid #FF5E00;
}

article a {
  color: #FF5E00;
  text-decoration: none;
  background-color: rgba(28, 28, 28, 0.89);
  border-radius: 5px;
  margin: 2px;
  padding: 6px;
  word-break: break-word;
}

article a:hover {
  color: black;
  text-decoration: none;
  background-color: rgba(255, 94, 0, 0.8);
}

.articleDiv {
  color: #FF5E00;
  text-decoration: none;
  background-color: rgba(28, 28, 28, 0.89);
  border-radius: 5px;
  margin: 2px;
  padding: 6px;
  word-break: break-word;
}

.articleDiv:hover {
  color: black;
  text-decoration: none;
  background-color: rgba(255, 94, 0, 0.8);
}

.loginHeader {
  color: #FF5E00;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: xx-large;
  padding: 13px;
  border-radius: 5px;
  width: fit-content;
}

.articleHeader {
  color: #FF5E00;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: x-large;
  padding: 3px;
  border-radius: 5px;
}

.tagStyle {
  color: #FF5E00;
  text-decoration: none;
  background-color: rgba(28, 28, 28, 0.89);
  border-radius: 5px;
  padding: 6px;
  font-size: xx-large;
  display: unset;
}

.tagStyle:hover {
  color: black;
  text-decoration: none;
  background-color: rgba(255, 94, 0, 0.8);
  border-color: #FF5E00;
}

.flexboxContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.flexboxContainer2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.flexboxContainer3 {
    height: 100vh;
    height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    height: fill-available;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}

.flexboxContainer4 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Start of NAV styling */
/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #FF5E00;
  text-align: center;
  padding: 11px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #802F00;
  /* background-color: #FF5E00; */
  color: #FF5E00;
  /* color: black; */
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #FF5E00;
  color: black;
}

.topnav a.active:hover {
  background-color: #802F00;
  color: #FF5E00;
}

.icon {
  background-color: #FF5E00;

  /* background-color: #802F00; */
}

a.icon {
    color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 785px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 785px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/* END of NAV styling */

.form-control {
  display: block;
  /* width: -webkit-fill-available; */
  width: 46%;
  margin: 6px;
  height: 34px;
  padding: 3px 9px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #FF5E00;
	background-color: black;
	background-image: none;
	border: 1px solid #802F00;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.fullWidth {
  width: 100%;
  width: -moz-available;          /* WebKit-based browsers will ignore this. */
  width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
  width: fill-available;
}

.notFullWidth {
  width: 46%;
}

/* When the screen is less than 750 pixels wide. */
@media screen and (max-width: 785px) {
  .fullWidthToggle {
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
  }
}

.form-control:focus {
	border-color: #FF5E00;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(37, 242, 10, .075), 0 0 8px rgba(102, 175, 233, .6);
	box-shadow: inset 0 1px 1px rgba(37, 242, 10, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control::-moz-placeholder {
	color: #777;
	opacity: 1;
}
.form-control:-ms-input-placeholder {
	color: #777;
}
.form-control::-webkit-input-placeholder {
	color: #777;
}

/* input.button.fullWidth { */
.button {
  color: #FF5E00;
  text-decoration: none;
  background-color: rgba(28, 28, 28, 0.89);
  border-radius: 5px;
  margin: 6px;
  padding: 6px;
  border-color: #802F00;
  font-size: x-large;
}

/* input.button.fullWidth:hover { */
.button:hover {
  color: black;
  text-decoration: none;
  background-color: rgba(255, 94, 0, 0.8);
  border-color: #FF5E00;
}

label {
  color: #FF5E00;
  /* float: left; */
  font-size: xx-large;
}


/* NEW STYLES -- NEW STYLES -- NEW STYLES */

.top-title-label-erase-container {
  margin-left: 6px;
  margin-right: 6px;
}

i.bi {
  color: #FF5E00;
  font-size: 16px;
}

.form-control:focus {
  border-color: #FF5E00;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 89, 0, 1);
  background-color: rgb(13, 13, 13);
  color: #FF5E00;
}

.btn.btn-dark {
  color: #FF5E00;
}

.btn.btn-dark:hover {
  background-color: #FF5E00;
  color: black;
}

.btn.btn-dark:hover .bi {
  color: black;
}

.display-alert {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 11px;
  font-size: 17px;
  color: #FF5E00;
}