/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
*{
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background-color: black;
  color: white;
  font-family: "Comic Sans MS";
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.content {
  margin: 0 auto;
  margin-top: 50px;
  width: 1000px;
  border: 1px solid white;
  display: flex;
  justify-content: space-between;
}

.unflexcontent {
  margin: 0 auto;
  margin-top: 50px;
  width: 1000px;
  border: 1px solid white;
  justify-content: space-between;
}

.openingheader {
  color: white;
  font-size: 5em;
  text-align: center;
  font-family: "Comic Sans MS";
  -webkit-text-stroke: 5px red;
  text-shadow: 0px 2.5px 5px red;
  margin-bottom: 0px;
  margin-top: 0px;
}

.openingparagraph {
  color: white;
  font-size: 3.5em;
  text-align: center;
  font-family: "Comic Sans MS";
  -webkit-text-stroke: 2px red;
  text-shadow: 0px 1.5px 3px red;
}

.wip {
  color: black;
  font-size: 9em;
  text-align: center;
  font-family: "Comic Sans MS";
  -webkit-text-stroke: 4px white;
  margin-top: 4.5em;
  margin-bottom: 4.5em;
}

nav {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;
  background-image: url('images/somebgthing.jpg');
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
  font-family: "Comic Sans MS";
  position: fixed;
  width: 100%;
}

nav ul {
  width: 100%;
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

nav li {
  height: 50px; 
}

nav a {
  height: 100%;
  padding: 0 30px;
  text-decoration: none;
  color: white;
  -webkit-text-stroke: 0.5px black;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  border-bottom: 0px solid black;
}

nav a:hover {
   color: red;
   -webkit-text-stroke: 1px red;
   border-bottom: 2px solid red;
}

nav li:first-child {
  margin-right: auto; 
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 250px;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.sidebar li {
  width: 100%;
}

.sidebar a {
  width: 100%; 
}

.menu-button {
  display: none;
}

@media(max-width: 800px) {
  .hideOnMobile {
    display: none; 
  }
  .menu-button {
    display: block; 
  }
}

@media(max-width: 400px) {
  .sidebar {
    width: 100%;
  }
}

.logsheader {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  color: white;
  font-family: "Comic Sans MS";
  border-top: 2px solid white;
  border-bottom: 2px solid white;
}

.log {
  text-align: center;
  color: white;
  font-family: "Comic Sans MS";
  background-color: #202020;
  padding-top: 10%;
  padding-bottom: 10%;
}

.logs {
  padding: 3px;
	width: 395px;
	height: 480px;
}

.buttons {
  padding: 3px;
	width: 585px;
	height: 500px;
}

.buttontable {
   margin: 0 auto;
   width: 585px;
	 height: 500px;
	 align-items: center;
	 table-layout: fixed;
}

.buttontable td {
  align-content: center;
  text-align: center;
  
}

a.button {
  text-align: center;
  text-decoration: none;
  color: white;
}

a.button:hover {
  text-decoration: underline;
}

img.buttonimage {
  float: top;
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: auto;
  max-height: 100px;
  max-width: 100px;
}

.separation {
  border-left: 2px solid white;
  height: 500px;
}

.precautionary {
  width: 100%;
  display: table;
  table-layout: fixed;
  border-collapse: collapse;
}

.risks {
  text-align: left;
}

.status {
  text-align: right;
}

.databasenavigation {
  border: 1px white;
  text-align: center;
}

.hoaxdatabase {
  border: 1px white;
  text-align: center;
}