.pjflex {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  align-content: center !important;
}

.heading-border {
  width: fit-content;
  border-bottom: solid #2a4856 3px;
  letter-spacing: 5px !important;
}

.light-hover:hover {
  background-color: #6baecd !important;
}

.light-blue-bg {
  background-color: rgb(186, 246, 252);
}

.navbar-text {
  color: #2a4856;
}

.login-bgcolor {
  background-color: #bad3df;
}

.horizontaline {
  width: 40vw;
  border-bottom: 4px solid #2a4856;
}

@media (max-width: 1000px) {
  html,
  body {
    font-size: 80% !important;
  }
}
@media (max-width: 700px) {
}
@media (max-width: 330px) {
  html,
  body {
    font-size: 70% !important;
  }

  #preview {
    width: 200px !important;
  }
}

/* animation */

.border-animate {
  animation: pjanimate 2s linear infinite;
}

@keyframes pjanimate {
  0% {
    transform: scale(0.3);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.3);
  }
}

.border-box {
  --c: #2a4856; /* the border color */
  --b: 4px; /* the border thickness*/
  --g: 4px; /* the gap on hover */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: conic-gradient(
        from 180deg at top var(--b) right var(--b),
        var(--_g)
      )
      var(--_i, 200%) 0 /200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left var(--b), var(--_g)) 0
      var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat;
  transition: 0.3s, background-position 0.3s 0.3s;
  cursor: pointer;
}
.border-box:hover {
  --_i: 100%;
  transition: 1s, background-size 1s 1s;
}

.border-box-white {
  --c: #ffffff; /* the border color */
  --b: 6px; /* the border thickness*/
  --g: 6px; /* the gap on hover */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: conic-gradient(
        from 180deg at top var(--b) right var(--b),
        var(--_g)
      )
      var(--_i, 200%) 0 /200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left var(--b), var(--_g)) 0
      var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat;
  transition: 0.3s, background-position 0.3s 0.3s;
  cursor: pointer;
}
.border-box-white:hover {
  --_i: 100%;
  transition: 1s, background-size 1s 1s;
}