* {
    box-sizing: border-box;
    font-family: 'Geologica', system-ui, -apple-system, BlinkMacSystemFont, 'Open Sans', 'Helvetica Neue';
  }


  #regForm {
    margin: 10px auto;
    width: 80%;
    min-width: 300px;
    padding-bottom: 10px;
  }

  h1, h2, h3 {

    text-align: center;  

  }

  

  input {

    padding: 10px;

    width: 100%;

    font-size: 17px;

    border: 1px solid #aaaaaa;

  }

  

  /* Mark input boxes that gets an error on validation: */

  input.invalid {

    background-color: #ffdddd;

  }

  

  /* Hide all steps by default: */

  .tab {

    display: none;

  }

  

  button {

    background-color: #ff0000;

    color: #ffffff;

    border: none;

    padding: 10px 20px;

    font-size: 20px;

    font-weight: 900;

    cursor: pointer;

    border-radius: 10px;

  }

  

  button:hover {

    opacity: 0.8;

  }

  

  #prevBtn {

    background-color: #5b5b5b;

  }

  

  /* Make circles that indicate the steps of the form: */

  .step {

    height: 15px;

    width: 15px;

    margin: 0 2px;

    background-color: #bbbbbb;

    border: none;  

    border-radius: 50%;

    display: inline-block;

    opacity: 0.5;

  }

  

  .step.active {

    opacity: 1;

  }

  

  /* Mark the steps that are finished and valid: */

  .step.finish {

    background-color: #04AA6D;

  }

  .boxcent{

    display: flex;

    align-items: center;

    justify-content: center;

  }

  

  #hideMe {

      -webkit-animation: cssAnimation 5s forwards; 

      animation: cssAnimation 5s forwards;

  }

  @keyframes cssAnimation {

      0%   {opacity: 1;}

      90%  {opacity: 1;}

      100% {opacity: 0;

        display: none;}

  }

  @-webkit-keyframes cssAnimation {

      0%   {opacity: 1;}

      90%  {opacity: 1;}

      100% {opacity: 0;

        display: none;}

  }

  .hideMe2 {

    animation: cssAnimation2 10s forwards;

  

  }

  @keyframes cssAnimation2 {

      0%   {opacity: 0;

        display: none;}

      50%  {opacity: 0;

      display: none;}

      70%  {opacity:1;

      display: block;}

      90%  {opacity: 1;

      display: block;}

      100% {opacity: 0;

      display: none;}

  }

  .hideMe3 {

    animation: cssAnimation3 17s forwards;

  

  }

  @keyframes cssAnimation3 {

      0%   {opacity: 0;

        display: none;}

      50%  {opacity: 0;

      display: none;}

      60%  {opacity:0;

      display: none;}

      80%  {opacity: 1;

      display: block;}

      100% {opacity: 1;

      display: block;}

  }