.pf-v5-c-background-image {
  /* Change background size so that the image covers the entire background. */
  --pf-v5-c-background-image--BackgroundSize: cover;
}

.pf-v5-c-login__container {
  /* Change the grid layout so that the header is always above the main area. */
  grid-template-areas: "header" "main";
  --pf-v5-c-login__container--xl--GridTemplateColumns: minmax(auto, 46rem);
}

.cst-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 42px;
  height: 100vh;
}

.cst-header {
  display: flex;
  justify-content: center;

  img {
    /* margin-bottom: 24px; */
  }
}

body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .text {
    text-align: center;
  }

  h1 {
    font-size: 32px;
    font-weight: 600;
    color: black;
    margin-bottom: 8px;
  }

  h2 {
    font-size: 27px;
    font-weight: 500;
    color: black;
    margin: 4px 0 8px 0;
  }

  h3 {
    font-size: 20px;
    font-weight: 300;
    color: #222222;
  }
  .icons {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.btn-action {
  .btn-cst-lg {
    padding: 12px 32px;
    background-color: rgb(12, 36, 195);
    border-radius: 32px;
    text-decoration: none;
    color: white;
    transition: 0.3s;

    font-weight: 600;

    &:hover {
      background-color: rgb(197, 188, 11);
    }
  }
}

.puff-in-center {
	-webkit-animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
	        animation: puff-in-center 0.7s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
}

 @-webkit-keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes puff-in-center {
  0% {
    -webkit-transform: scale(2);
            transform: scale(2);
    -webkit-filter: blur(4px);
            filter: blur(4px);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
