/* Font used Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
/* colors */
* {
  font-family: "Poppins", sans-serif;
  padding: 0;
  margin: 0;
  max-width: 100%;
}

body {
  background: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.container {
  z-index: 1000;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.container .form {
  min-width: 450px;
  font-weight: 400 !important;
  min-height: -webkit-max-content;
  min-height: -moz-max-content;
  min-height: max-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 30%;
  height: 70vh;
  border-radius: 6px;
  padding: 0;
  border: 0.3px #e0e0e0 solid;
  padding: 2em 2.5em 2em 2.5em;
}

.container .form .wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0;
  margin: 0;
}

.container .form .wrapper .input-field {
  width: 90%;
  padding: 0;
}

.container .form .wrapper .input-field #url,
.container .form .wrapper .input-field #alias {
  font-family: "Roboto", sans-serif !important;
  padding: 0.4em 0.5em 0.4em 1em;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  width: 100%;
  color: #292929 !important;
  font-size: 1em;
}

.container .form .wrapper .input-field #url:focus + label,
.container .form .wrapper .input-field #alias:focus + label {
  color: #1a73e8;
  margin-top: 0.3em;
  font-size: 1.1em;
  z-index: 100;
}

.container .form .wrapper .input-field #url:focus,
.container .form .wrapper .input-field #alias:focus {
  border: #1a73e8 1px solid !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.container .form .wrapper .ot {
  padding: 0.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 30px;
}

.container .form .wrapper .ot p {
  cursor: pointer;
}

.container .form .wrapper .ot #submit {
  padding: 0.75em 2em;
  font-weight: 500 !important;
  border-radius: 4px;
  border: none;
  outline: none;
  cursor: pointer;
  color: white;
  background: #1a73e8;
}

.container .form .wrapper .ot #submit:hover {
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.342);
          box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.342);
}

.container .form .wrapper label {
  margin-left: 1em;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 1;
  background: white !important;
  margin-top: 0.5em;
  font: 300 "Roboto", sans-serif !important;
}

.container .form .wrapper .input-field input[type="text"]:focus + label {
  color: #000;
}

/*New additions*/
.form-container {
  width: 90%;
  padding: 0;
}

#heart {
  margin-bottom: 10px;
}

#head {
  padding-left: 2em;
  width: 100%;
  margin-bottom: 3em;
  text-align: center;
  margin-left: -1em !important;
}

#footer {
  min-width: 500px;
  width: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 15px;
  padding-top: 2em;
  margin-right: 2em;
}

#footer a {
  color: #757575 !important;
  margin-right: 25px;
}

#footer a:hover {
  color: #1a73e8;
}

/* Loader CSS */
/*, #f8ca00, #8a9b0f*/
.loader {
  padding: 0;
  margin: 0;
  margin-top: -10vh;
  position: absolute;
  width: 100vw;
  height: 125vh;
  max-width: 100%;
  overflow-x: hidden !important;
  overflow-y: hidden;
  background: rgba(0, 0, 0, 0.705);
  z-index: 10000000000000;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

@-webkit-keyframes fsx {
  50% {
    -webkit-transform: scale(-1);
            transform: scale(-1);
  }
}

@keyframes fsx {
  50% {
    -webkit-transform: scale(-1);
            transform: scale(-1);
  }
}

.load {
  width: 10vh;
  height: 10vh;
  overflow: hidden;
  position: relative;
  padding: 6.25em;
  border-radius: 0.7em;
  -webkit-animation: fbg 4s steps(1) -1s infinite, fsc 2s steps(1) infinite;
          animation: fbg 4s steps(1) -1s infinite, fsc 2s steps(1) infinite;
}

.load::after {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1.5em -30em;
  padding: 30em;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-animation: fbg 4s steps(1) -3s infinite, mov 1s infinite alternate, exp 1s ease-in infinite alternate;
          animation: fbg 4s steps(1) -3s infinite, mov 1s infinite alternate, exp 1s ease-in infinite alternate;
  content: "";
}

@-webkit-keyframes fsc {
  50% {
    -webkit-transform: scaley(-1);
            transform: scaley(-1);
  }
}

@keyframes fsc {
  50% {
    -webkit-transform: scaley(-1);
            transform: scaley(-1);
  }
}

@-webkit-keyframes fbg {
  0% {
    background: #000000;
  }
  50% {
    background: #fff;
  }
}

@keyframes fbg {
  0% {
    background: #000000;
  }
  50% {
    background: #fff;
  }
}

@-webkit-keyframes mov {
  0%,
  20% {
    -webkit-transform: none;
            transform: none;
  }
  100% {
    -webkit-transform: translatey(1.5em) rotate(0.5turn);
            transform: translatey(1.5em) rotate(0.5turn);
  }
}

@keyframes mov {
  0%,
  20% {
    -webkit-transform: none;
            transform: none;
  }
  100% {
    -webkit-transform: translatey(1.5em) rotate(0.5turn);
            transform: translatey(1.5em) rotate(0.5turn);
  }
}

@-webkit-keyframes exp {
  0%,
  20% {
    -webkit-clip-path: inset(0 28.5em 57em round 50%);
            clip-path: inset(0 28.5em 57em round 50%);
  }
  100% {
    -webkit-clip-path: inset(0 round 50%/0);
            clip-path: inset(0 round 50%/0);
  }
}

@keyframes exp {
  0%,
  20% {
    -webkit-clip-path: inset(0 28.5em 57em round 50%);
            clip-path: inset(0 28.5em 57em round 50%);
  }
  100% {
    -webkit-clip-path: inset(0 round 50%/0);
            clip-path: inset(0 round 50%/0);
  }
}

/* Media query for responsiveness */
@media only screen and (max-width: 900px) {
  #head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #footer {
    min-width: 0px !important;
    font: 0.95em sans-serif;
    width: 88% !important;
    max-width: 100%;
    margin: 0 !important;
    color: #1a73e8 !important;
  }
  #footer a {
    margin-top: 1em;
    color: #494949 !important;
    margin-right: 20px;
  }
  body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  #other {
    font-size: 0.95em;
  }
  .container {
    min-height: -webkit-max-content !important;
    min-height: -moz-max-content !important;
    min-height: max-content !important;
    max-width: 100vw !important;
    height: 150vh !important;
  }
  .container .form {
    overflow-x: hidden !important;
    min-width: 80%;
    width: 88%;
    max-width: 100%;
    padding: 1em 0.5em 1.5em 2em;
  }
  .container .form .wrapper {
    max-width: 100%;
  }
  .container .form .wrapper .input-field {
    width: 100% !important;
    max-width: 100%;
  }
  .container .form .wrapper .input-field #url,
  .container .form .wrapper .input-field #alias {
    width: 85% !important;
    padding: 0.3em 0.5em 0.3em 1em !important;
  }
  .container .form .wrapper .input-field #url:focus + label,
  .container .form .wrapper .input-field #alias:focus + label {
    color: #1a73e8;
    margin-top: 0.2em !important;
    font-size: 1.1em;
    z-index: 100;
  }
  .container .form .wrapper label {
    margin-bottom: 3em;
    margin-top: 0.5em !important;
  }
  .container .form .wrapper #ot p {
    font-size: 0.92em;
  }
  .container .form .wrapper #ot #submit {
    margin-right: 1.6em;
  }
}

/* Other css */
.toast {
  background: #4bb543;
  color: #ffffff;
}

.title {
  margin-bottom: 2em;
}

::-webkit-scrollbar {
  width: 15px;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #000;
  border-radius: 10px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 1px 1px 5px #b8b7b7, inset 1px 1px 5px #0000004b;
  box-shadow: inset 1px 1px 5px #b8b7b7, inset 1px 1px 5px #0000004b;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 10px;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-thumb:hover {
  background: #67f87a;
  border-radius: 10px;
}

#gg {
  background: #000 !important;
  padding: 0.75em 2em;
  font-weight: 500 !important;
  border-radius: 3px;
  border: none;
  outline: none;
  cursor: pointer;
  color: white;
  background: #1a73e8;
  margin-right: 5em !important;
}

#gg:hover {
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.342);
          box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.342);
}
/*# sourceMappingURL=styles.css.map */