/**************************
  General Styles
***************************/
@import url("/reset.css");
@import url("/font-family.css");
@import url("/general.css");

/**************************
  Page Styles  
***************************/

:root {
  --loading-header: 2, 168, 186;
  --loading-footer: 1, 82, 153;
}

.loading {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  position: relative;
  width: 100%;
}

.loading video {
  border: 0;
  outline: none;
}

.loading::before,
.loading::after {
  background-color: rgb(var(--loading-header));
  content: "";
  height: 50%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.loading::after {
  background-color: rgb(var(--loading-footer));
  bottom: 0;
  top: auto;
}

.loading-box {
  background: rgb(var(--loading-header));
  background: linear-gradient(
    180deg,
    rgba(var(--loading-header), 1) 0%,
    rgba(var(--loading-footer), 1) 100%
  );
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  z-index: 1;
}

.loading-video {
  overflow: hidden;
}