/* 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." */


body, html {
  width: 100%; /* Set the page width to 100% */
  height: 100%; /* Set the page height to 100% */
  align-items: center; /* Align items to the center */
  justify-content: center; /* Align items to the middle */
  display: flex; /* Make the body a flexbox, to be able to align items */
  background-color: gray;
}
#window {
  flex-direction: column; /* Put the header on top of the content, instead of next to */
  background-color: black; /* Make the background color black */
  border-radius: 10px; /* Round the corners of the windows a little bit */
  width: 100%; /* Give it 500 px of width */
  height: 70%; /* Give it 300 px of height */
  display: flex; /* Make the window a flexbox */
  overflow: hide; /* Hide the overflow */
  margin: 20px; /* Give it some margin (for smaller devices) */
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; /* Give it a slight shadow */
}
#innercontent{
    overflow: scroll;
}


#header {
  display: flex; /* Make it a flexbox */
  cursor: grab; /* Show the "drag" cursor */
  border-radius: 10px 10px 0 0; /* Round the top corners */
}
#header:active {
  cursor: grabbing; /* Show the "dragging" cursor */
}
#content {
  flex: 1; /* Make it take up all the avalible space */
  background-color: #444444; /* Make the background color gray/black */
  border-radius: 0 0 10px 10px; /* Round the bottom corners */
}
.dot {
  min-width: 10px; /* Give it the minimum width */
  min-height: 10px; /* Give it the maximum width */
  margin: 20px; /* Give it the margin */
  margin-right: 10px; /* Remove some margin */
  border-radius: 6px; /* Make it apear to be a circle */
  cursor: pointer; /* Make your cursor the pointer */
}
.red-dot {
  background-color: #FF5B52; /* Change the background color to red */
  border: #FF4339 solid 1px; /* Change the border color to red */
}
.yellow-dot {
  background-color: #F5BD4F; /* Change the background color to yellow */
  border: #EDB200 solid 1px; /* Change the border color to yellow */
}
.green-dot {
  background-color: #16D037; /* Change the background color to green */
  border: #14B931 solid 1px; /* Change the border color to green */
}