/* 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." */
   
* {
  box-sizing: border-box;
}

body {
  background-color: #150328;
  color: white;
  font-family: sans-serif;
  margin: 0;
}
/* The side navigation menu */
.sidenav {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 260px;
  border: 1px solid #5c13bc;
  border-radius: 12px;
  padding: 15px;
  z-index: 1;
  font-family:monospace;
  text-align:center;
}
.nav-title {
  color: white;
  background-color: #5c13bc;
  font-size: 20px;
  margin: 0 0 12px 0;
}
/* The navigation menu links */
.sidenav a {
  display: flex;
  margin-bottom: 6px;
  justify-content: center;   /* centers horizontally */
  align-items: center;       /* centers vertically */
  padding: 3px 6px;
  font-size: 15px;
  text-decoration: none;
  color: #a364f1;
  transition: margin 0.3s, border-color 0.3s, color 0.3s;
  border: 2px solid #a364f1;
  border-radius: 12px;
  left: 20px;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #ff9901;
}
.status-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 260px;
  border: 1px solid #5c13bc;
  border-radius: 12px;
  padding: 12px;
  z-index: 1;
  font-family:monospace;
}
.status-title {
  color: white;
  background-color: #5c13bc;
  font-size: 20px;
  margin: 0 0 12px 0;
}
/* Each row = two columns */
.status-row {
  display: flex;
  margin-bottom: 6px;
  font-size: 15px;
}
.status-label {
  width: 35%;
  color: #a364f1;
  font-weight: bold;
  padding: 3px 6px;
  background-color: #01305e;
  border: 1px solid #5c13bc;
  border-radius: 3px 0 0 3px;
}
.status-value {
  width: 65%;
  color: #eee;
  padding: 3px 6px;
  background-color: #010e1b;
  border: 1px solid #01305e;
  border-radius: 0 3px 3px 0;
  border-left: none;
}

#main {
  margin-left: 320px;    /* clears the left sidenav */
  margin-right: 320px;   /* clears the right status panel */
  margin-top: 20px;   /* clears the right status panel */
  padding: 20px;
  border: 1px solid #5c13bc;
  border-radius: 12px;
  text-align: center;
}

#inside {
  margin-left: 20px;
  margin-right: 20px;  
  margin-top: 20px; 
  padding: 20px;
  border: 1px solid #5c13bc;
  border-radius: 12px;
  text-align: center;
  box-sizing: content-box;
}

h1 {
  display: block;
  font-size: 50px;
  font-weight: bold;
  font-family:monospace;
}

h2 {
  display: block;
  font-weight: bold;
  font-size: 30px;
  font-family:monospace;
}

h3 {
  display: block;
  font-weight: bold;
  font-size: 20px;
  font-family:monospace;
}

p {
  display: block;
  font-size: 15px;
  font-family:monospace;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-family:monospace;
}

iframe {
margin: auto;
display:block;
border:none;
}