/* 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." */
   
:root {
	--bottom-glow: radial-gradient(farthest-corner at bottom center,	rgba(255, 255, 255, 0.7),	transparent);
	--stripes: repeating-linear-gradient(to bottom, #eee 0px, #eee 2px, #fff 2px, #fff 4px);
}

body {
  display: flex;
  flex-direction: column;
  background-image: url('synthwave.gif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: black;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  height: 92vh;
}

/*
****************HEADING***************
*/

.header-container {
  display: flex;
  gap: 10px;
}

.status-box-header {
  flex: 2;
  align-content: center;
  
  /*Background and border*/
  background-image: url('synthwave-skyline.gif');
  background-color: rgb(255, 255, 241);
  background-size: cover;
  background-repeat: no-repeat;
  background-clip: border-box;
  background-position: center;
  border: 10px solid rgb(120, 18, 69);
  border-radius: 6px;
  
  /*Padding and spacing*/
  padding: 10px;
}

.status-box-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  
  color: rgb(0, 192, 209);
  
  padding-left: 5px;
  padding-right: 5px;
}

.main-box-header {
  flex: 7;
  display: flex;
  flex-direction: column;
  line-height: 1;
  pointer-events: auto;
  
  /*Background and border*/
  border: 10px solid rgb(120, 18, 69);
  border-radius: 6px;
  background-color: rgb(11, 10, 61);
  
  /*Padding and spacing*/
  padding-left: 10px;
  padding-right: 10px;
  
}

.nav-button {
  /* Base Styling */
  background-color: rgb(160, 18, 69);
  border: dotted;
  border-radius: 10px;
  
  /* Typography */
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  
  box-shadow: 0px 3px 5px gray
}


/*
**************BODY**************
*/

.body-container {
  display: flex;
  flex-grow: 1;
  margin-top: 20px;
  gap: 10px;
  
  visibility: visible;
}

.sidebar {
  flex: 2;
  display: flex;
  flex-direction: column;
  
  /*Background and border*/
  border: 10px solid rgb(120, 18, 69);
  border-radius: 6px;
  background-color: rgb(11, 10, 61);
  
  /*Padding and spacing*/
  padding: 10px;
}

.main-content-body {
  flex: 7;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  
  /*Background and border*/
  border: 10px solid rgb(120, 18, 69);
  border-radius: 6px;
  background-color: rgb(11, 10, 61);
  
  /*Padding and spacing*/
  padding: 10px;
}

.side-bar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 14px;
  padding-bottom: 14px;
  
  border-radius: 5px;
  
  font-size: 24px;
  
  background-color: rgb(146, 154, 86);
}

.aero {
	/* Colors */
	--hue: 113;
	--button-background: oklch(75% 0.1 var(--hue) / 0.8);
	--bg-dark: oklch(45% 0.1 var(--hue) / 0.75);
	--button-foreground: oklch(15% 0.05 var(--hue));
	/* Style */
	background-color: var(--button-background);
	background: var(--bottom-glow),	linear-gradient(to bottom, var(--bg-dark), var(--button-background));
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
	border: 1px solid var(--button-background);
	border-radius: 9999px;
	cursor: pointer;
	margin: auto;
	padding: 1ex 1em;
	text-shadow: 0 2px .5em #0003;
	text-align: center;
	width: 100%;
}

.aero-div {
	/* Colors */
	--hue: 10;
	--button-background: oklch(50% 0.2 var(--hue) / 0.8);
	--bg-dark: oklch(60% 0.1 var(--hue) / 0.75);
	--button-foreground: oklch(15% 0.05 var(--hue));
	/* Style */
	background-color: var(--button-background);
	background: var(--bottom-glow),	linear-gradient(to bottom, var(--bg-dark), var(--button-background));
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
	border: 1px solid var(--button-background);
	border-radius: 8px;
	text-shadow: 0 2px .5em #0003;
	text-align: center;
	width: 100%;
}