:root {
     --lm-bg: #f6f8ff;
     --lm-bg-content: #fefefe;
     --lm-text: #4b6a9b;
     --lm-text-alt: #2b3442;
     --lm-shadow: 0px 16px 30px -10px rgba(70, 96, 187, 0.2);
     --lm-shadow-inactive: 0px 16px 30px -10px rgba(0, 0, 0, 0.2);
     --lm-icon-bg: brightness(100%);
     /* Btn */
     --btn: #0079ff;
     --btn-hover: #60abff;
   }
   
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Space Mono", monospace;
   }
   
   body {
     background-color: var(--lm-bg);
     font-size: 13px;
     color: var(--lm-text);
     width: 100%;
     position: relative;
     height: 100vh;
   }
   
   .container {
     width: 327px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
     flex-direction: column;
     gap: 36px;
   }
   
   .app {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 16px;
   }
   
   .header {
     display: flex;
     justify-content: space-between;
     align-items: center;

   }
   
   #btn-mode {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 90px;
     letter-spacing: 2.5px;
     color: var(--lm-text);
     font-weight: bold;
   }
   
   #btn-mode:hover {
     cursor: pointer;
   }
  
   .searchbar-container {
     position: relative;
     background-color: var(--lm-bg-content);
     border-radius: 15px;
     box-shadow: var(--lm-shadow);
     display: flex;
     height: 100%;
     padding: 6px;
     justify-content: space-between;
     align-items: center;
     background-image: url(./Images/search-icon.svg);
     background-repeat: no-repeat;
     background-position-x: 24px;
     background-position-y: center;
     background-size: 20px;
   }
   
   #input {
     border: none;
     width: 80%;
     outline: none;
     background: none;
     color: var(--lm-text);
     padding-left: 50px;
   }
   
   #input::placeholder {
     color: var(--lm-text);
     letter-spacing: -0.5px;
     font-size: 16px;
   }
   
   .searchbar-container img {
     height: 20px;
     width: 20px;
     padding: 0 10px 0px 16px;
   }
   
   .btn-search {
     background-color: #e84949;
     width: fit-content;
     color: white;
     padding: 0.6rem 1.8rem;
     border-radius: 7px;
     box-shadow: 5px 5px 7px 0px #0000003f;
     font-size: 18px;
     cursor: pointer;
     transition: all 0.5s;
     font-weight: 500;
     border: solid 3px transparent;
     position: relative;
     z-index: 1;
   }
   
   .btn-search:hover {
     cursor: pointer;
     background-color: var(--btn-hover);
   }
   
   .btn-search:active {
     transform: scale(0.975);
   }
   
   .profile-container {
     background-color: var(--lm-bg-content);
     border-radius: 15px;
     box-shadow: var(--lm-shadow);
     padding: 24px;
   }
   
   .profile-content {
     display: flex;
     flex-direction: column;
     gap: 24px;
     justify-content: space-evenly;
   }
   
   .profile-header {
     display: flex;
     gap: 20px;
     margin-bottom: 10px;
   }
   
   #avatar {
     width: 70px;
     border-radius: 90px;
   }
   
   .profile-name {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
   
   .profile-name h2 {
     font-size: 16px;
     font-weight: bold;
     color: var(--lm-text-alt);
   }
   
   #user {
     color: var(--btn);
   }
   
   .profile-info-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
   
   #bio {
     line-height: 25px;
     opacity: 0.75;
   }
   
   .profile-stats-wrapper {
     display: flex;
     justify-content: space-between;
     background-color: var(--lm-bg);
     text-align: center;
     border-radius: 10px;
     padding: 18px;
   }
   
   .profile-stat {
     display: flex;
     flex-direction: column;
     width: 100%;
     gap: 8px;
   }
   
   .stat-title {
     font-size: 11px;
   }
   
   .stat-value {
     font-size: 16px;
     font-weight: bold;
     color: var(--lm-text-alt);
   }
   
   .profile-bottom-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     gap: 16px 0;
   }
   
   .profile-info {
     width: 50%;
     display: flex;
     gap: 14px;
     justify-content: center;
     align-items: center;
   }
   
   .bottom-icons {
     width: 20px;
     filter: var(--lm-icon-bg);
   }
   
   .profile-info p {
     overflow-wrap: break-word;
   }
   
   .profile-info a {
     color: var(--lm-text);
     word-break: break-all;
   }
   
   .error {
     position: absolute;
     color: red;
     font-weight: bold;
     right: 10px;
     top: -25px;
   }
   #twitter{
     text-decoration: none;
   }
   #twitter:hover{
     color:brown;
     transition: all 0.5s;
   }
   #page{
     text-decoration: none;
   }
   #page:hover{
     color:brown;
     transition: all 0.5s;
   }
   .dm-text {
     color: var(--dm-text);
   }
   
   .dm-bg {
     background-color: var(--dm-bg);
   }
   
   .dm-bg-sec {
     background-color: var(--dm-bg-content);
   }
   
   .active {
     box-shadow: var(--lm-shadow);
   }
   
   /* tablet */
   @media screen and (min-width: 768px) {
     .container {
       width: 573px;
     }
   
     .searchbar-container {
       padding: 10px;
     }
   
     #input {
       font-size: 18px;
       width: 75%;
     }
   
     #input::placeholder {
       font-size: 18px;
     }
   
     .btn-search {
       padding: 14px 28px;
       font-size: 16px;
     }
   
     #app {
       gap: 24px;
     }
   
     .profile-container {
       padding: 40px;
     }
   
     .profile-header {
       margin-bottom: 0;
     }
   
     #avatar {
       width: 117px;
     }
   
     .profile-content {
       gap: 30px;
     }
   
     .profile-info-wrapper {
       justify-content: center;
     }
   
     .profile-name h2 {
       font-size: 26px;
     }
   
     #user {
       font-size: 16px;
     }
   
     #date {
       font-size: 15px;
     }
   
     #bio {
       font-size: 15px;
     }
   
     .error {
       font-size: 15px;
       top: -30px;
     }
   
     .profile-stats-wrapper {
       padding: 18px 32px;
     }
   
     .profile-stat {
       text-align: start;
     }
   
     .stat-title {
       font-size: 13px;
     }
   
     .stat-value {
       font-size: 22px;
     }
   
     .profile-bottom-wrapper {
       flex-wrap: wrap;
       flex-direction: row;
     }
   
     .profile-info {
       width: 47.5%;
       font-size: 15px;
     }
   }
   
   /* Desktop */
   @media screen and (min-width: 1280px) {
     .container {
       width: 730px;
     }
   
     .profile-container {
       position: relative;
     }
   
     .profile-content {
       width: 480px;
       margin-left: auto;
       gap: 16px;
     }
   
     #avatar {
       position: absolute;
       left: 0;
       margin-left: 40px;
     }
   
     .profile-info-wrapper {
       flex-direction: row;
       justify-content: space-between;
       width: 100%;
     }
   
     .profile-name {
       gap: 2px;
     }
   
     #date {
       padding-top: 10px;
     }
   
     .profile-stats-wrapper {
       margin: 20px 0;
     }
   
     .error {
       top: 50%;
       right: 20%;
       transform: translateY(-50%);
       font-size: 15px;
     }
   
     #input {
       width: 65%;
     }
   }