body {
  background: #1d7d12;
  background: radial-gradient(circle, #1d7d12 0%, black 100%);
  min-height: 97vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
  @media (max-width: 530px) {
    body {
      align-items: flex-start;
      padding-top: 2%; } }

input, button {
  -webkit-appearance: none; }

.mainContainer {
  background-color: white;
  width: 300px;
  display: flex;
  flex-direction: column;
  padding: 30px 50px;
  border-radius: 5px;
  box-shadow: 2px 18px 50px -10px rgba(0, 0, 0, 0.4); }
  @media (max-width: 430px) {
    .mainContainer {
      padding: 20px; } }
  .mainContainer .loginContainer {
    display: flex;
    flex-direction: column; }
    .mainContainer .loginContainer .loginTitle {
      text-align: left;
      font-size: 25px;
      font-weight: 500;
      color: #222;
      margin-bottom: 30px; }
    .mainContainer .loginContainer .passInput {
      border: 1px solid darkgray;
      font-size: 22px;
      padding: 13px 10px;
      border-radius: 5px; }
      .mainContainer .loginContainer .passInput:focus-visible {
        outline: none;
        background-color: #efefef; }
      .mainContainer .loginContainer .passInput::placeholder {
        color: #999; }
    .mainContainer .loginContainer .loginBtn {
      border: none;
      border-radius: 0 !important;
      background-color: forestgreen;
      color: white;
      padding: 10px 20px;
      font-size: 22px;
      cursor: pointer;
      align-self: left;
      width: 100%;
      margin: 25px 0 35px 0; }
      .mainContainer .loginContainer .loginBtn:hover {
        background-color: limegreen; }
  .mainContainer .actionContainer {
    display: flex;
    flex-direction: column;
    border-top: 1px solid darkgray;
    padding: 17px 0 0 0; }
    .mainContainer .actionContainer .name {
      font-size: 25px; }
    .mainContainer .actionContainer .actionBtns {
      margin: 10px 0 15px 0; }
      .mainContainer .actionContainer .actionBtns input {
        border: none;
        border-radius: 0 !important;
        background-color: forestgreen;
        color: white;
        padding: 10px 20px;
        font-size: 22px;
        cursor: pointer;
        align-self: left;
        width: 100%;
        margin-bottom: 5px; }
        .mainContainer .actionContainer .actionBtns input:hover {
          background-color: limegreen; }
    .mainContainer .actionContainer .ping {
      font-size: 30px;
      text-align: center;
      color: #666; }