@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;500&display=swap");
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  overflow-x: hidden;
  font-size: 17px;
}

body {
  min-height: 100vh;
  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;
  background: #141c2e;
  color: white;
  margin: 0;
}

main {
  width: 40%;
}

.nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 20px;
}

.logo span {
  font-family: "Inconsolata";
  font-weight: 600;
  font-size: 1.6rem;
}

.theme {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  width: 16%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.theme span {
  text-transform: uppercase;
  font-family: "Work Sans";
  font-size: 1.3rem;
}

.theme img {
  width: 22px;
  height: 22px;
}

.search-box {
  background: #1f2947;
  margin-bottom: 20px;
  border-radius: 5px;
  padding: 10px 15px 10px 15px;
  -webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.field {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0;
}

.field .search-icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.field img {
  display: block;
  width: 30px;
  height: 30px;
}

.field input {
  width: 80%;
  height: 2.8rem;
  padding-left: 1rem;
  font-family: "Inconsolata";
  margin: 0;
  background: #1f2947;
  outline: none;
  border: none;
  font-size: 1.4rem;
  color: white;
}

.field #search {
  padding: 0;
  background: #57a5ff;
  cursor: pointer;
  border-radius: 5px;
  width: 25%;
}

.field #search:hover {
  background: rgba(63, 147, 243, 0.897);
}

::-webkit-input-placeholder {
  color: white;
}

:-ms-input-placeholder {
  color: white;
}

::-ms-input-placeholder {
  color: white;
}

::placeholder {
  color: white;
}

:-ms-input-placeholder {
  color: white;
}

::-ms-input-placeholder {
  color: white;
}

.content {
  background: #1f2947;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 5px;
}

.profile-pic {
  width: 25%;
  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;
}

.profile-pic img {
  width: 70%;
  margin-top: 45px;
  border-radius: 50%;
}

.user-data {
  width: 60%;
}

.basic-information {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 25px;
}

.basic-information h2 {
  font-family: "Work Sans";
  margin: 20px 0px 0px 0px;
}

.basic-information p {
  margin-right: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "Inconsolata";
  margin-bottom: 0;
}

.login {
  margin: 6px 0px 6px 0px;
}

.login a {
  color: #57a5ff;
  font-family: "Inconsolata";
}

.bio p {
  font-family: "Inconsolata";
  font-size: 1.2rem;
  color: #e5e5e5;
  line-height: 1.8rem;
}

.user-stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  background: #141c2e;
  border-radius: 20px;
  color: #e5e5e5;
}

.user-stats div {
  width: 30%;
  padding: 15px 0px 0px 15px;
}

.user-stats div span {
  font-family: "Work Sans";
  text-transform: capitalize;
  display: block;
}

.user-stats div h2 {
  font-family: "Work Sans";
  margin: 18px 0px 18px 0px;
  color: #e5e5e5;
}

.user-links {
  display: -ms-grid;
  display: grid;
  margin-top: 30px;
  -ms-grid-columns: auto auto;
      grid-template-columns: auto auto;
  color: #c5c5c5;
}

.user-links div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}

.user-links div a {
  color: inherit;
  width: 80%;
}

.user-links div span {
  display: block;
  width: 80%;
  font-family: "Inconsolata";
  font-weight: 600;
}

.user-links .location span {
  text-transform: capitalize;
  margin-left: 15px;
}

.user-links .organization, .user-links .twitter {
  margin-left: 15px;
}

.user-links .website a {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-decoration: none;
}

.user-links .website a:hover {
  text-decoration: underline;
}

.user-links .website a span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 15px;
}

.user-links .twitter a {
  text-decoration: none;
  font-family: "Inconsolata";
  font-weight: 600;
  margin-left: 5px;
}

#website,
#org {
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

.invalid {
  font-family: "Inconsolata";
  font-size: 1.5rem;
  text-align: center;
}

.light-theme {
  color: black;
  background: #f5f8ff;
}

.light-theme input {
  background: white;
  color: black;
}

.light-theme span,
.light-theme p {
  color: black;
}

.light-theme .search-box {
  background: white;
}

.light-theme .content {
  background: white;
}

.light-theme ::-webkit-input-placeholder {
  color: black;
}

.light-theme :-ms-input-placeholder {
  color: black;
}

.light-theme ::-ms-input-placeholder {
  color: black;
}

.light-theme ::placeholder {
  color: black;
}

.light-theme :-ms-input-placeholder {
  color: black;
}

.light-theme ::-ms-input-placeholder {
  color: black;
}

.light-theme .user-stats {
  background: #f5f8ff;
}

.light-theme .user-stats span {
  color: #c5c5c5;
}

.light-theme .user-stats h2 {
  color: black;
}

.light-theme #location {
  fill: none;
}

.light-theme .user-links div svg path {
  fill: #526fa7;
}

.light-theme .user-links div svg circle {
  fill: #526fa7;
}

.light-theme .user-links span {
  color: #526fa7;
}

.light-theme .user-links a {
  color: #526fa7;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  main {
    width: 70%;
  }
  .content {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .profile-pic {
    width: 20%;
  }
  .user-data {
    width: 70%;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
  main {
    width: 50%;
  }
  .profile-pic {
    width: 20%;
  }
  .user-data {
    width: 60%;
  }
}
/*# sourceMappingURL=styles.css.map */