html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

a {
  color: #69209d;
}

#particles-js {
  background-color: #140022;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Background layer */
}

.home-container{
  position: relative;
  z-index: 3;
  padding: 16px;
}

.home-container .card{
  background-color: rgba(251, 237, 255, 0.80);
  color: #140022;
  min-width: 60vw;
}

main {
  position: relative;
  z-index: 1; /* Content layer, on top of particles */
}

@media (min-width: 768px) {
  main {
    height: 100%;
  }
}
@media (min-width: 320px) and (max-width: 480px) {
  main{
    height: 100% !important;
  }
  .home-container{
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .main-card{
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
}
.terms{
  text-decoration: underline;
  cursor: pointer;
  color: #0d6efd;
}