/* from here: https://cssloaders.github.io/ */
.loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 3px solid rgb(204, 204, 204);
  border-right: 3px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  /* center https://stackoverflow.com/a/23184836 */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  visibility: visible;
}

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

.h1 {
  font-size: 25px; text-align: center; font-weight: bold; margin-bottom: 20px;
}

.section_border {
  border-radius: 25px; background: #dddddd; padding: 20px; margin: 20px; padding-bottom: 25px; box-shadow: 5px 5px #cccccc;
}

/* removes ol extra space */
ol {
  margin: 0; padding: 0;
}

/* adds spacing between text and also remove this extra space on the first and last line so it doesn't affect the overall layout */
.text {
  line-height: 1.5; margin-top: -0.25em; margin-bottom: -0.25em;
}

.hide {
  display: none !important;
}

.menu {
  background: #dddddd; margin-left:20px; margin-right:20px; margin-bottom:15px; border-radius: 6px;
}

.menu_entry {
  font-size: 18px; text-align: center; font-weight: bold; color: #666666; display: inline-block; padding: 20px;
}

.menu_entry:hover {
  color: white;
}

.clean_href {
  color: inherit; text-decoration: none;
}

.footer_text {
  text-align: center; color: #333333;
}

code {
  background-color: #c7c7c7; border-radius: 6px; font-family: monospace;
}

/* fix for numbers be inside div for some browser (like GNOME Web browser) */
ol {
  list-style-position: inside;
}