@import url(reset.css);
@import url(root.css);
@import url(media.css);


body{
   background: var(--light-color);
}

.main{
   width: 60%;
   margin: 70px auto;
}

.main__head{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.main__head > h1{
   font-size: 26px;
   font-weight: 700;
   line-height: normal;

   color: var(--black-color);
}

.main__mode{
   display: flex;
   align-items: center;
   gap: 16px;
}

.main__mode > span{
   color: var(--golder-gray);

   font-size: 13px;
   font-weight: 700;
   line-height: normal;
   letter-spacing: 2.5px;
}

.fa-moon{
   color: var(--golder-gray);

   font-weight: 900;
   font-size: 20px;
   transform: rotate(-20deg);
}

.fa-sun{
   color: var(--golder-gray);
   display: none;
}

.main__form{
   display: flex;
   justify-content: space-between;
   align-items: center;

   margin-top: 36px;
   margin-bottom: 24px;

   padding: 10px 10px 10px 35px;
   background: var(--white);
   border-radius: 15px;
   box-shadow: 0px 16px 30px -10px rgba(70, 96, 187, 0.20);
   gap: 24px;
}

.bi-search{
   color: var(--blue-color);
   font-size: 24px;
}

.form__input{
   width: 100%;

   font-size: 18px;
   font-weight: 400;
   line-height: 25px;
   color: var(--light-gray);
   background: var(--white);
}

.form__input::placeholder{
   color: var(--light-gray);
}

.form__btn{
   padding: 13px 24px;
   background: var(--blue-color);
   color: #fff;

   font-size: 16px;
   font-weight: 700;
   line-height: normal;

   border-radius: 10px;
   cursor: pointer;
}

.main__article{
   background: var(--white);
   padding: 44px 48px 48px 48px;
   border-radius: 15px;
}

#sun{
   display: none;
}

.fa-moon.remove{
   display: none;
}

.main__body{
   position: relative;

   display: flex;
   gap: 35px;
}

.main__profil > img{
   width: 100%;
   height: 100%;

   object-fit: cover;

   border-radius: 50%;
   cursor: pointer;
   transition: transform 0.5s ease;
}

.main__profil > img:hover{
   transform: scale(2);
}

.main__profil{
   width: 120px;
   height: 120px;
}

.main__username{
   display: flex;
   flex-direction: column;
   gap: 5px;
}

.user__title{
   font-size: 26px;
   font-weight: 700;
   line-height: normal;

   color: var(--black-color);
}

.user__name{
   color: var(--blue-color);

   font-size: 16px;
   font-weight: 400;
   line-height: normal;
}

.username__data-subtitle{
   position: absolute;
   top: 7px;
   right: 0;
   color: var(--light-gray);

   font-size: 15px;
   font-weight: 400;
   line-height: normal;

   white-space: nowrap;
}

.main__about{
   margin-left: 15%;
   margin-top: -1%;

   display: flex;
   flex-direction: column;
}

.main__subtitle{
   color: var(--light-gray);
   font-size: 15px;
   font-weight: 400;
   line-height: 25px;
}

.username__github{
   display: flex;
   justify-content: space-between;
   align-items: center;

   margin-top: 35px;
   padding: 15px 83px 17px 32px;
   background: var(--light-color);
   border-radius: 10px;
}

.username__title{
   display: flex;
   flex-direction: column;
   gap: 3px;
}

.username__value{
   color: var(--light-gray);

   font-size: 13px;
   font-weight: 400;
   line-height: normal;
}

.username__key{
   color: var(--black-color);

   font-size: 22px;
   font-weight: 700;
   line-height: normal;
   text-transform: uppercase;
}

.main__footer{
   margin-top: 37px;

   display: flex;
   align-items: flex-end;
   gap: 15px 62px;
   flex-wrap: wrap;
}

.username__about{
   width: 45%;
   display: flex;
   align-items: center;
}

.username__about figure i{
   color: var(--light-gray);
}

.username__about svg{
   fill: var(--light-gray);
}

.opacity{
   opacity: 0.5;
}

.main__mode:hover{
   cursor: pointer;
}

.username__about-title{
   margin-left: 20px !important;
}

.user__subtitle{
   color: var(--light-gray);

   font-size: 15px;
   font-weight: 400;
   line-height: normal;
   margin-left: 16px;
   background: var(--white);

   white-space: nowrap;
}

#user__link{
   text-decoration: underline;
}

#subtitle__user{
   opacity: 0.5;
}

#error{
   white-space: nowrap;
   font-size: 15px;
   color: #F74646;
   font-weight: 700;
   line-height: normal;
}