/* loading screen page reset all margins */
#loadingscreen_css h1,
#loadingscreen_css h2,
#loadingscreen_css h3,
#loadingscreen_css h4,
#loadingscreen_css h5,
#loadingscreen_css h6,
#loadingscreen_css p,
#loadingscreen_css a,
#loadingscreen_css ul {
  margin: 0;
  padding: 0;
}

/* loading screen page container main */
.loadingscreen_container_main {
  display: grid;
  place-items: center;

  width: 100%;
  height: 100vh;
  position: fixed; /* stays fixed on scroll */

  z-index: 1000; /* ensure it's on top */

  opacity: 0; /* initially hidden */

  /* background gradient element 02 with border and inner shadow */
  background-color: var(--variable_color_gradient_01_gray_01);
  background-image:
          linear-gradient(205deg,
          var(--variable_color_gradient_01_gray_02) 25%,
          var(--variable_color_gradient_01_gray_03) 75%,
          var(--variable_color_gradient_01_gray_04) 100%);

  box-shadow:
          inset 0 0 10px var(--variable_color_gradient_01_gray_05),
          inset 0 0 0 1px var(--variable_color_gradient_01_gray_06);
}

/* when the loading screen is visible */
.loadingscreen_container_main.show {
  display: block;
  opacity: 1;
}

/* loading screen page container content */
.loading_screen_container_content {
  display: grid;
  grid-template-columns: 1fr;

  width: calc(100% - var(--variable_spacing_01) * 2);
  height: calc(var(--vh, 1vh) * 100 - var(--variable_spacing_01) * 2);

  margin: var(--variable_spacing_01);
  border-radius: var(--variable_borderradius_03);

  align-items: center; /* align items vertically */
  justify-items: center; /* align items horizontally */

  /* border: 2px solid blue; */
}

/* loading screen page logo container */
.loadingscreen_logo_container {
  display: grid;
  opacity: 0; /* initially hidden */
}

/* loading screen page logo image */
.loadingscreen_logo_container img {
  height: calc(var(--variable_spacing_items_01) *5 - 2px);
  justify-self: start;
}

@media (max-width: 1200px) {
  .loading_screen_container_content {
    height: calc(var(--vh, 1vh) * 100 - var(--variable_spacing_01) * 2); /* 100% of the actual viewport height */
  }
}