body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}

a {
	color: black;
	text-decoration: none;
}

table, th, td {
	border: 1px solid black;
	text-align: center;
}

/* Add a black background color to the top navigation */
.topnav {
  position: relative;
  background-color: #282828;
  overflow: hidden;
}

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

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

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #ec1313;
  color: white;
}

/* Centered section inside the top navigation */
.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

.videos figure {
	display: flex;
}
.video {
	border-style: solid;
	border-width: 1px;
}
img {
	padding-right: 10px;
}
.trashButton {
	height: 20px;
	position: absolute;
	right: 40px;
}
.avatar {
	height: 100px;
}
.thumbnail {
	width: 256px;
	height: 144px;
}

/* Responsive navigation menu - display links on top of each other instead of next to each other (for mobile devices) */
@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
  }
  .topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
	.videos figure {
		margin: 10px;
		display: flex;
		flex-direction: column
	}
	.thumbnail {
		width: unset;
		height: unset;
		width: 100%;
	}
	.trashButton {
		right: 11px;
	}
}

@media (prefers-color-scheme: dark) {
  img {
    opacity: .75;
    transition: opacity .3s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
	body {
		background-color: #303030;
		color: #e6e6e6
	}
	a {
		color: #e5e6e6
	}
	.video {
		border-color: gray;
	}
	.topnav a.active {
		background-color: #ab1212;
	}
}

@font-face {
  font-family: 'osrs';
  src: url('fonts/RuneScape-Chat-07.eot');
  src: url('fonts/RuneScape-Chat-07.eot?#iefix') format('embedded-opentype'),
      url('fonts/RuneScape-Chat-07.woff2') format('woff2'),
      url('fonts/RuneScape-Chat-07.woff') format('woff'),
      url('fonts/RuneScape-Chat-07.ttf') format('truetype'),
      url('fonts/RuneScape-Chat-07.svg#RuneScape-Chat-\'07') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.btn-toggle {
  position: fixed;
	right: 3;
	bottom: 3;
	width: 32px;
}

body.osrs {
	font-family: osrs;
	font-size: 20px;
	background-color: #d0c1a4;
	color: black;
}

body.osrs img {
	opacity: 1;
	transition: unset;
}

body.osrs a {
	color: black;
}

body.osrs .video {
	border-color: black;
}

body.osrs button {
	font-family: osrs;
	font-size: 20px;
	color: #fff4ed;
	background-color: #5f2322;
	background-color: #7f0000;
	height: unset;
}

body.osrs .topnav {
	background-color: #3d3721
}

body.osrs ::placeholder {
	color: blue;
	opacity: 1;
}

body.osrs .topnav a.active {
	background-color: #7f0000;
  color: white;
}