:root {
  /* --header-image: url(resources/stars.gif); */
  --body-bg-image: url(resources/background_images/stars.gif);
  --content: #43256e;
  --text-color: #fceaff;

  /* colors */
}

div#headerArea {
  height: 40px;
}

* {
  box-sizing: border-box;
}

/* so you wanna change the width of your page? 
    by default, the container width is 900px.
    in order to keep things responsive, take your new height,
    and then subtrack it by 100. use this new number as the 
    "max-width" value below
    */

@media only screen and (max-width: 1000px) {
  #flex {
    flex-wrap: wrap;
  }
}

/* the "container" is what wraps your entire website */
/* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
#container {
  max-width: 900px;
  /* this is the width of your layout! */
  /* if you change the above value, scroll to the bottom
    and change the media query according to the comment! */
  margin: 0 auto;
  /* this centers the entire page */
}

#flex {
  display: flex;
}

body {
  text-align: justify;
  font-family: sans-serif;
  font-size: medium;
  margin: 0;
  background-color: #08031a;
  /* you can delete the line below if you'd prefer to not use an image */
  /* background-size: 65px; */
  /* text color */
  color: var(--text-color);
  background-image: var(--body-bg-image);
}

/* this is the color of the main content area */
main {
  background-color: rgb(1, 57, 57);
  flex: 1;
  padding: 10px;
}

/* headlines stuff */
h1,
h2,
h3 {
  text-align: center;
  color: rgb(6, 179, 179);
}

h1 {
  font-size: 27px;
  background-color: black;
  background-image: var(--body-bg-image);
}

/* bold style */
strong {
  color: chocolate;
}

/* links */
a {
  color: aqua;
  font-weight: bold;
  /* if you want to remove the underline
    you can add a line below here that says:
    text-decoration:none; */
}

/* navigation section!! */
#navbar {
  height: 40px;
  background-color: #13092d;
  /* navbar color */
  width: 100%;
}

#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

#navbar li {
  padding-top: 10px;
}

/* navigation links*/
#navbar li a {
  font-weight: 800;
  text-decoration: none;
  /* this removes the underline */
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
  text-decoration: underline;
}

li {
  padding-top: 0.5px;
  padding-bottom: 0.5px;
}

footer {
  background-color: #13092d;
  /* background color for footer */
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center;
  /* this centers the footer text */
}

div#last-edited {
  font-size: 12px;
}

p.image-description {
  font-size: small;
  text-align: center;
}

/* CSS for tooltip use. */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1.5px dotted var(--text-color);
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  background-image: var(--body-bg-image);
  color: var(--text-color);
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.dialog-box {
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 3%;
  margin-bottom: 3%;
  border: 2px solid black;
  background-color: white;
  color: black;
  padding: 5px;
}

/* Loader progress indicator */

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader {
  --animation-thickness: 13px;
  --size: 70px;

  border: var(--animation-thickness) solid #000000;
  border-radius: 50%;
  border-top: var(--animation-thickness) solid #43256e;
  width: var(--size);
  height: var(--size);

  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}