html {
    
  height: 100%;

  p {
    font-family: "Noto Sans", sans-serif;
    font-size: 20px;
    color: #878787;
    opacity: 1;
    max-width: 50%;
    max-height: 50%;
    margin: auto;
  }

  h1 {
    font-family: "Google Sans Flex", sans-serif;
    line-height: 0px;
    font-size: 3em;
    color: #878787;
    text-align: center;
    align-items: center;
    justify-content: center;
    place-content: center;
    display: flex;
    margin-top: 1.4em;
    margin-bottom: 0px;
    display: block;
    /**margin: 4px auto;**/
  }

  body {
    background-image: url("/images/background/image.png");
    background-size: cover;
  }

   .txtbtnhldr {
    background-color: white;
    border-radius: 1.5em;
    padding: 2em 0;
    h1 {
      margin-top: 1em;
    }
  }

  .divpositioner {
    align-items: center;
    justify-content: center;
    place-content: center;
    display: flex;
    width: 100%;
    height: 100%;
  }

  body { 
    height: 100%;
  }

  .div1 {
    color: white;
    background-color: white;
    width: 99%;
    margin: 0px;
    display: block;
  }

  .div1pos {
    margin-top: 50px;
  }

  .button1pos {
    margin-top: 5%;
    align-items: center;
    justify-content: center;
    place-content: center;
    display: flex;
  }

  .button1 {
    background-color: #AF597B;
    transition: background-color 0.2s ease;
    height: 3.25em;
    border: none;
    border-radius: 0.5em;
    font-family: "Russo One", sans-serif;
    letter-spacing: 0.225em;
    color: white;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    outline: none;
    border: none;
    margin: 0 auto;
  }

  .button1:hover {
    background-color: #D385A5;
    text-decoration: none;
  }

  .button1 img {
    width: 25px;
    height: 25px;
    text-decoration: none;
  }

  a {
    text-decoration: none;
  }

  .button2pos {
    margin-top: 5%;
    align-items: center;
    justify-content: center;
    place-content: center;
    display: flex;
  }

  .button2 {
    background-color: #AF597B;
    transition: background-color 0.2s ease;
    height: 3.25em;
    border: none;
    border-radius: 0.5em;
    font-family: "Russo One", sans-serif;
    letter-spacing: 0.225em;
    color: white;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    outline: none;
    border: none;
    margin: 0 auto;
  }

  .button2:hover {
    background-color: #D385A5;
    text-decoration: none;
  }

  .button2 img {
    width: 25px;
    height: 25px;
    text-decoration: none;
  }

  .div2 {
    color: white;
    background-color: white;
    width: 99%;
    margin: 0px;
    display: block;
  }

  .div2pos {
    margin-top: 50px;
  }

  .button3pos {
    margin-top: 5%;
    align-items: center;
    justify-content: center;
    place-content: center;
    display: flex;
    margin-bottom: 1px;
  }

  .button3 {
    background-color: #ffffff;
    transition: background-color 0.2s ease;
    border: none;
    font-family: "Google Sans Flex", sans-serif;
    color: #878787;
    font-size: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    outline: none;
    border: none;
  }

  .button4pos {
    margin-top: 1.7%;
    align-items: center;
    justify-content: center;
    place-content: center;
    display: flex;
  }

  .button4 {
    background-color: #ffffff;
    transition: background-color 0.2s ease;
    transition: transform 0.25s cubic-bezier(.4, 0, .2, 1);
    border: none;
    font-family: "Google Sans Flex", sans-serif;
    color: #878787;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    outline: none;
    border: none;
    margin-top: 1px;
    opacity: 0.5;
    border-radius: 8px;
  }

  .button4:hover {
    background-color: #313244;
    color: #cdd6f4;
    text-decoration: none;
    transform: scale(1.1);
  }

}

@media screen and (max-width: 600px) {
  .button1 {
    width: 12em;
  }
}
@media screen and (min-width: 600px) {
  .button1 {
    width: 90%;
  }
}


@media screen and (max-width: 600px) {
  .button2 {
    width: 12em;
  }
}
@media screen and (min-width: 600px) {
  .button2 {
    width: 90%;
  }
}


@media screen and (max-width: 600px) {
  .txtbtnhldr {
    width: 90em;
  }
}
@media screen and (min-width: 600px) {
  .txtbtnhldr {
    width: 35%;
  }
}