:root {
  /* primary colors */
  --bg-main: hsl(227, 100%, 98%);
  --bg-content: hsl(0, 0%, 100%);
  --text-color: hsl(217, 35%, 45%);
  --user-name-color: hsl(217, 21%, 21%);
  --number-color: hsl(217, 21%, 21%);
  
  /* secondory colors */
  --Blue: hsl(212, 100%, 50%);
  --Light-blue: hsl(217, 20%, 51%);
  --Dark-blue: hsl(217, 35%, 45%);
  --Dark-blue-darker: hsl(222, 41%, 20%);
  --Very-dark-blue: hsl(217, 21%, 21%);
  --White: hsl(0, 0%, 100%);
  
  /* Btn */
  --btn: hsl(212, 100%, 50%);
  --btn-hover: hsl(212, 100%, 69%);
  
  /* box shadow */
  --box-shadow: 0px 16px 30px -10px hsla(227, 46%, 50%, 0.2);
}

.dark {
  --bg-main: hsl(220, 40%, 13%);
  --bg-content: hsl(222, 41%, 20%);
  --text-color: hsl(0, 0%, 100%);
  --user-name-color: hsl(0, 0%, 100%);
  --number-color: hsl(0, 0%, 100%);
  --box-shadow: none;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Space Mono", monospace;
}

body {
  color: var(--text-color);
  background-color: var(--bg-main);
  transition: background-color 1s ease-in-out;
}

.container-wrapper {
  min-height: 100dvh;

  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 50%;

  position: relative;

  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Header styles starts here */
.header {
  display: flex;
  justify-content: space-between;

  transition: all 0.5s ease-in-out;
}

.btn-mode {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-mode:hover, .search-btn:hover {
  cursor: pointer;
}
/* Header styles ends here */

/* user not found message styles starts here */
.user-not-found {
  display: none;

  position: absolute;
  right: 0;
  top: 2.1rem;

  color: red;
  font-weight: bold;
}
/* user not found message styles ends here */

/* Searh bar styles starts here */
.search-bar {
  display: flex;
  align-items: center;

  padding: 0.5rem;
  border-radius: 1rem;
  background-color: var(--bg-content);
  box-shadow: var(--box-shadow);
  transition: all 0.5s ease-in-out;
}

.search-icon {
  margin: 0 1.5rem;
}

.search-area {
  width: 100%;

  font-size: 18px;
  color: var(--text-color);
  border: none;
  background: none;
  outline: none;
}

.search-area::placeholder {
  color: var(--text-color);

}

.search-btn {
  padding: 0.75rem;
  margin-left: 1rem;
  font-size: 16px;
  background-color: var(--btn);
  border: none;
  border-radius: 0.625rem;
  color: var(--White);
  font-weight: bold;
}

.search-btn:hover {
  background-color: var(--btn-hover);
}
/* Searh bar styles ends here */

/* user information container styles starts here  */
.user-information-container {
  display: flex;
  gap: 2rem;

  padding: 2rem;
  border-radius: 1rem;
  box-shadow: var(--box-shadow);
  background-color: var(--bg-content);
  transition: all 0.5s ease-in-out;
}

.profile-img {
  max-height: 7.3125rem;
  border-radius: 50%;
}

.profile-information {
  width: 100%;
}

.user-basic-detail {
  display: flex;
  gap: 2rem;
}

.mobile-user-img{
  display: none;
}

.user-name-container {
  width: 100%;

  display: flex;
  justify-content: space-between;
}

.user-name {
  font-size: 26px;
  font-weight: bold;
  color: var(--user-name-color);
}

.joined-date-continer {
  padding-top: 0.625rem;

  display: flex;
  gap: 0.5rem;
}

.user-id {
  color: var(--Blue);
  text-decoration: none;
}

.user-bio {
  line-height: 1.5rem;
  opacity: 0.75;
  margin-top: 1.5rem;
}

.user-work-information {
  display: flex;
  justify-content: space-between;

  margin: 2rem 0;
  padding: 1.125rem 5rem 1.125rem 2rem;
  border-radius: 1rem;
  background-color: var(--bg-main);
  transition: all 0.5s ease-in-out;
}

.repos, .followers, .following {
  font-size: 22px;
  font-weight: bold;
  color: var(--number-color);
  margin-top: 0.625rem;
}

.user-links {
  display: flex;
  justify-content: space-between;
}

.user-links > div {
  width: 48%;
}

.user-location, 
.user-website-link,
.user-twitter-link,
.user-company {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  word-break: break-all;
}

.user-location,
.user-twitter-link {
  margin-bottom: 1rem;
}

.user-website-link a, .user-twitter-link a {
  text-decoration: none;
  color: var(--text-color);
}

.link-color {
  color: var(--text-color);
}
/* user information container styles ends here  */

@media screen and (max-width: 1200px) {

  .container {
    width: 70%;
  }
  
}

@media screen and (max-width: 850px) {

  .mobile-user-img {
    display: block;
  }

  .user-name-container {
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
  }

  .joined-date-continer {
    padding: 0;
  }

  .user-profile-img-container {
    display: none;
  }
  
}

@media screen and (max-width: 650px) {

  body {
    font-size: 13px;
  }

  .container {
    width: 90%;
  }

  .search-icon {
    margin: 0 0.5rem 0 0;
  }

  .search-area {
    font-size: 13px;
  }

  .search-btn {
    font-size: 14px;
    padding: 0.75rem;
  }

  .user-information-container {
    padding: 1rem;
  }

  .profile-img {
    max-height: 4.375rem;
  }
  
  .user-basic-detail {
    gap: 1rem;
  }

  .user-name-container {
    gap: 0;
  }

  .user-name {
    font-size: 20px;
  }

  .user-work-information {
    padding: 1rem;
    justify-content: space-around;
  }

  .repos, .followers, .following {
    font-size: 18px;
  }

  .user-links {
    flex-direction: column;
    gap: 1rem;
  }

  .user-links > div {
    width: 100%;
  }
  
}