@import url('https://fonts.googleapis.com/css2?family=Tourney:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300;400;600;700&display=swap');

*::-webkit-scrollbar {
    display: none;
}
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@keyframes rgbfg{
  0%{color: #f44336; border-color: #f44336;}
  25%{color: #ffc107; border-color: #ffc107;}
  50%{color: #4caf50; border-color: #4caf50;}
  75%{color: #3f7fff; border-color: #3f7fff;}
  100%{color: #f44336; border-color: #f44336;}
}

@keyframes rgbborder{
  0%{border-color: #f44336;}
  25%{border-color: #ffc107;}
  50%{border-color: #4caf50;}
  75%{border-color: #3f7fff;}
  100%{border-color: #f44336;}
}

@keyframes rgbbg{
  0%{background-color: #f44336;}
  25%{background-color: #ffc107;}
  50%{background-color: #4caf50;}
  75%{background-color: #3f7fff;}
  100%{background-color: #f44336;}
}

body{
  background: #111;
  animation: rgbborder 5s linear infinite;
  font: 400 large "Open Sans", sans-serif;
  border: 5px solid;
  margin: 0;
  text-align: left;
  background-size: cover;
	color: silver;
}

#background{
  height: 100%;
  width: 100%;
  background-size: 1000% 1000%;
  margin: -5px;
  position: fixed;
  z-index: -100;
}

header#main-header{
  background: rgba(0, 0, 0, 0.75);
  width: 80vw;
  opacity: 0.9;
  margin: auto;
  margin-top: calc(4vh + 12px);
  padding: 15px;
  border: 3px double;
  animation: rgbborder 5s linear infinite;
	text-align: center;
}

header#main-header h1{
  margin-top: calc(2vh + 6px);
  font:200 calc(2em + 2vw) Tourney, cursive;
  margin-bottom: calc(2vh + 6px);
  cursor: default;
  user-select: none;
	animation: rgbfg 5s linear infinite;
}

header#main-header a{
	text-decoration: none;
}

.glowing{
  text-shadow: 0 0 3px;
}

footer#main-footer{
  background: rgba(0, 0, 0, 0.75);
  width: 80vw;
  opacity: 0.9;
  margin: auto;
  margin-bottom: calc(6vh + 18px);
  padding: 15px;
  border: 3px double;
  font-weight: 300;
  font-size: medium;
  animation: rgbborder 5s linear infinite;
	text-align: center;
	user-select: none;
}

main{
  background: rgba(0, 0, 0, 0.75);
  width: 80vw;
  opacity: 0.9;
  margin: 2vh auto;
  padding: 15px;
  border: 3px double;
  font-weight: 300;
  animation: rgbborder 5s linear infinite;
  display: flex;
  flex-direction: row;
  overflow: auto;
}

@media (max-width: 800px) {
	body{
		font-size: medium;
	}
  main{
    flex-direction: column;
  }
  #main-aside{
    max-height: 50vh;
  }
	.img-right{
		display: block;
		width: 100%;
		margin: 1vh 0;
	}
	video{
		width:320px;
	}
}

h1, h2, h3, h4, h5, h6{
  font-family: Titillium Web, sans-serif;
  font-weight: 600;
}

h1{ 
  font-size: 2em; 
}

h2{ 
  font-size: 1.5em; 
}

h3{ 
  font-size: 1.25em; 
}

h4{ 
  font-size: 1em; 
}

#main-body{
 border: 1px solid;
  margin: 2px;
  overflow: auto;
  padding: 1vh 1vw 5vh 1vw;
  flex-grow: 2;
	animation: rgbborder 5s linear infinite;
}

#main-aside{
  border: 1px solid;
  margin: 2px;
  overflow: auto;
  padding: 12px 24px;
  min-width: calc(100px + 10vw);
  flex-grow: 1;
	animation: rgbborder 5s linear infinite;
}

.main-nav-link{
  display: inline-block;
  padding: 2px 4px;
  margin: 0;
  font-weight: 300;
  user-select: none;
}

.main-nav-link a{
  color: inherit;
  text-decoration: none;
}

.main-nav-link a:hover{
  text-shadow: 0 0 2px;
}

.main-nav-link a:active{
  color: gray;
}

.bold {
  font-weight: 600;
}

.italic {
	font-style: italic;
}

.section-header{
  margin-bottom: calc(3px + 1vh);
  margin-left: auto;
  margin-right: auto;
	text-align: center;
}

.hoverreveal{
	opacity: 0;
	transition: 1s;
}

.hoverreveal:hover{
	opacity: 1;
}

.indent{
	margin-left: 1vw !important;
}

a{
  color: white;
	transition: 0.25s;
}

a:hover{
	text-shadow: 0 0 1px white;
}

a:active{
	color: #bfbfbf;
	text-decoration: none;
}

#welcome-body-wrapper p{ 
  margin: 2vh 0;
}

#welcome-body-wrapper{
  width: 70%;
  margin: auto;
}

#main-list{
	list-style-type: none;
	padding-left: 12px;
}

.list-title{
	color: white;
	font-weight: 400;
	font-size: 1.125em;
}

.sub-list{
	margin-top: 5px;
	margin-bottom: 5px;
	padding-left: 30px;
	list-style: disc outside;
	display: none;
}

.sub-list li{
	padding-left: 5px;
}

.sub-list li::marker{
	content: "➢ ";
	font-size: small;
}

ul a{
	color: silver;
	text-decoration: none;
}

.list-indicator {
	display: inline-block;
	float: right;
	font-size: smaller;
}

article{
	width: 80%;
  margin: auto;
	margin-bottom: 2vh;
	border-top: 1px solid;
	padding: 1vh 5%;
	animation: rgbborder 5s linear infinite;
}

article p{
	margin-left: 1vw !important;
}

.article-header{
	padding: 1vh 0;
}

.article-header h2{
	margin: 1vh 0;
}

date{
	font-size: smaller;
	display: inline-block;
}

.img-right{
	float: right;
	clear: both;
	margin: 8px;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

#comments{
  width: 80%;
  margin: auto;
	border-top: 1px solid;
	padding: 1vh 5%;
	animation: rgbborder 5s linear infinite;
}

.username{
	font-weight: 400;
	color: white;
	margin-bottom: 5px;;
}

.comment{
	border-top: 1px solid silver;
	margin: 5px 3vw;
	padding: 1vh 1.5vw;
	font-size: medium;
}

#comments p{
	margin-left: 1vw !important;
}

input{
	background: #111;
	color: silver;
	border: 1px solid gray;
	border-radius: 3px;
	font-size: 95%;
	font-family: Open Sans, sans-serif;
}

#submit{
	margin: 5px 5% 1vh 0;
	text-align: right;
}

textarea{
	background: #111;
	color: silver;
	border: 1px solid gray;
	font-size: 85%;
	font-family: Open Sans, sans-serif;
	width: 90%;
	margin: auto;
	height: 6vh;
	display: block;
}

table, td, th{
    border: 1px solid gray;
}

th{ 
    font-weight: 600;
}