@import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/* @font-face {
  font-family: Roboto, Noto Sans, sans-serif;
  src: url();
} */
html,
body {
  /* font-family: Roboto, Noto Sans; */
  word-wrap: break-word;
  background-color: inherit;
}
.green {
	color: rgb(0, 159, 0);
}
.bg-green {
	background-color: rgb(0, 159, 0);
}

.bg-none {
	background-color: inherit;
}

.masonry {
  /* display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox; */
  display: flex; /* uses flexbox */
  /* -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap; */
  flex-wrap: wrap; /* wraps overflowing elements to next line */
  justify-content: space-between; /* justifies elements but leaves outer edges aligned*/
}
.masonry * {
  margin: 0.2em;
  flex-grow: 1; /* makes all elements expand to fill*/
}

.carousel-caption {
  background-color: rgba(0, 0, 0, .5);
}

.orbit {
  border: 1px dotted rgb(0, 0, 159);
}

#o-home {
  height: 400px;
  max-width: 300px;
}
#o-home * {
  font-size: 20pt;
}
#o-home {
  height: 400px;
  max-width: 300px;
}
#o-home * {
  font-size: 20pt;
}

/* orbital styles*/
o-arc {
  --o-fill: none !important;
}
.rotate-orbit {
  animation-name: rotation;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.rotate-time-1 {
  animation-duration: 40s;
}

.rotate-time-2 {
  animation-duration: 30s;
}

.rotate-time-3 {
  animation-duration: 20s;
}

.rotate-time-4 {
  animation-duration: 10s;
}

.rotate-time-5 {
  animation-duration: 5s;
}

.invert {
  animation-direction: reverse;
}

@keyframes rotation {
  0% {
    rotate: 360deg;
  }

  100% {
    rotate: 0deg;
  }
}