@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body,
html {
    animation: fadeDown 0.6s ease;
    font-family: "DM Sans", sans-serif;
    background-color: #101721;
    min-width: 320px;
    overflow-x: hidden;
}

.bar_sections {
    border: 1px solid #1D2631;
}

.mobileICon {
    display: none;
}


/*__________________HEADER__________________*/
header {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    height: 70px;
    color: #fff;
    font-optical-sizing: auto;
    font-style: normal;
    border-bottom: 2px solid #1D2631;
}

header .left {
    gap: 20px;
    display: flex;
    align-items: center;
    font-size: 10px;
}

header .right {
    gap: 20px;
    display: flex;
    align-items: center;
    font-size: 13px;
}

.link_projeto p {
    cursor: pointer;
    color: #a8a8a8;
    text-decoration: none;
}

.link_projeto p:hover  {
    color: #888888;
}

.link_projeto {
    display: flex;
    align-items: center;
}

.icon {
    height: 36px;
}

#github_icon {
    fill: #fff;
}

#moon_icon {
    rotate: calc(-32deg);
    height: 20px;
    fill: #a8a8a8;
}

#exclamation_Icon {
    fill: #a8a8a8;
    height: 13px;
    margin: none;
}



/*__________________BuscarPerfil/Main_________________*/

main {
    animation: fadeUp 0.6s ease;
    gap: 40px;
    padding: 30px 15px;
    display: flex;
    min-width: 320px;
}

#Section_Left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.buscarPerfil {
    max-width: 340px;
    width: 100%;
    padding: 20px;
    color: #fff;
    background-color: #171E29;
    border-radius: 15px;
    border: 2px solid #1D2631;
}

.buscarPerfil h3 {
    margin: 0px 0px 26px 0px;
}

.buscarPerfil h2 {
    margin: 0px 0px 20px 0px;
}

.buscarPerfil h3 {
    font-weight: 400;
    color: #a8a8a8;
    font-size: 15px;
}

.buscarPerfil h2 {
    font-weight: 600;
}

form input {
    width: 70%;
    margin-right: 6px;
    height: 38px;
    padding-left: 15px;
    color: black;
    background-color: #E8F0FE;
    border: 2px solid #1D2631;
    border-radius: 7px;
}


form button {
    background-color: #5C5FE2;
    color: #fff;
    height: 40px;
    width: 70px;
    border: none;
    border-radius: 7px;
}

.dica {
    margin: 26px 0px 0px 0px;
    padding: 13px;
    border-radius: 15px;
    border: 2px solid #1D2631;
}

.dica div {
    display: flex;
    align-items: center;
}

.dica h3 {
    color: #fff;
    font-size: 15px;
    margin: 0px 0px 0px 5px;
}

.dica h4 {
    color: #a8a8a8;
    font-size: 13px;
    font-weight: 400;
}

#idea_Icon {
    height: 20px;
    fill: #605ed1;
}


#historico {
    max-width: 340px;
    width: 100%;
    padding: 0px 20px;
    color: #fff;
    background-color: #171E29;
    border-radius: 15px;
    border: 2px solid #1D2631;
}


#lista_Recentes {
    padding: 0px;
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 10px;
}

#lista_Recentes li {
    width: 100%;
    border-bottom: 2px solid #1D2631;
}


/*__________________PERFIL_________________*/



#title_Perfil {
    margin-top: 0px;
    color: #fff;
}

.perfil {
    padding: 20px;
    color: #fff;
    background-color: #171E29;
    border-radius: 15px;
    border: 2px solid #1D2631;
    gap: 30px;
    margin-left: -8px;
    display: flex;
}


#Name_Perfil {
    margin-bottom: -20px;
    color: #fff;
}

#User_Perfil {
    margin-top: 8px;
    font-weight: 400;
    font-size: 14px;
    color: #a8a8a8;
}

#Bio_Perfil {
    font-size: 12px;
    font-weight: 300;
    color: #CBCFDA;
}

#img_Perfil img {
    border-radius: 135px;
    height: 200px;
}

.icon_Perfil {
    fill: #a8a8a8;
    height: 16px;
}

.follower_Container {
    margin-top: -20px;
    gap: 16px;
    display: flex;
}

.seguidores,
.seguindo {
    color: #a8a8a8;
    font-weight: 400;
    gap: 5px;
    align-items: center;
    display: flex;
}


#link_perfil {
    color: #727EE7;
    text-decoration: none;
}

.valor_seguidores {
    color: #fff;
}

/*__________________boxes Com Dados_________________*/

.boxesInformation {
    margin-left: -8px;
    padding: 20px 0px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #171E29;
    border-radius: 15px;
}

.box2 {
    gap: 8px;
}


.information_text {
    margin: 0px;
    width: 90px;
    color: #8d8d8d;
}

.box1 .information .information_text {
    margin-top: 5px;
}

.information {
    font-size: 13px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.icon_Boxs {
    height: 26px;
}

.cubeColor {
    fill: #6B7179;
}

.codeColor {
    fill: #3E9A52;
}

.seguidoresColor {
    fill: #349EEC;
}

.seguindoColor {
    fill: #4E3A8D;
}


.valores {
    font-size: 18px;
    margin: 0px;
    color: #fff;
}




/*__________________informações do repositorios_________________*/

#repos_Principais {
    margin-left: -8px;
    padding: 20px;
    background-color: #171E29;
    border-radius: 15px;
    border: 2px solid #1D2631;
    gap: 20px;
    display: flex;
    flex-direction: column;
}

#repos_Principais h3 {
    margin: 0px;
    color: #fff;
    font-size: 16px;
}


.repos {
    color: #6B7179;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #1D2631;
}

.repos a {
    text-decoration: none;
    color: #5C5FE2;
    font-size: 17px;
}

.repos_Information {
    margin-right: 60px;
}

.information_stars {
    display: flex;
    align-items: center;
    gap: 10px;
}

.name_Repos_Container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon_repos {
    fill: #6B7179;
    height: 24px;
}

.icon_Star {
    position: relative;
    top: 1px;
    fill: #6B7179;
    height: 18px;
}


/*__________________informações do modal_________________*/
#modal_Position {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

#container_Informations_Modal {
    display: flex;
    gap: 22px;
    padding: 5px 20px;
    border: 1px solid #1D2631;
    border-radius: 15px;
}

.modal_left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0px 0px 20px 0px;
}

#container_Modal {
    position: absolute;
    gap: 20px;
    display: flex;
    flex-direction: column;
    background-color: #151C25;
    padding: 30px 20px;
    border-radius: 20px;
    margin: 0px 30px 0px 18px;
}

#header_Modal {
    gap: 20px;
    display: flex;
    border-radius: 15px;
}

.sobre_Icon {
    height: 60px;
    fill: #5C5FE2;
}

.x_Icon {
    right: 30px;
    position: absolute;
    cursor: pointer;
    height: 20px;
    fill: #CBCFDA;
}

.title_text_modal {
    margin: 0px;
    color: #fff;
}

.text_Modal {
    margin: 0px 0px;
    color: #CBCFDA;
    font-weight: 300;
}

.text_box1 {
    margin-left: 20px;
}


/*boxes de informações do modal*/
.icon_Modal_boxs {
    fill: #5C5FE2;
    height: 16px;
}

.titulo_boxs_container {
    align-items: center;
    display: flex;
    gap: 8px;
    color: #fff;
}

.funcionalidades {
    margin-left: 20px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.link_Documentation {
    text-decoration: none;
    color: #5C5FE2;
}


/*Parte da direita do modal de informações sobre o projeto */

.modal_right {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.listaLinguagens {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.linguagem {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border: 1px solid #1D2631;
    border-radius: 15px;
    color: #fff;
    font-size: 13px;
    padding: 5px 10px;
}

.linguagem p {
    margin: 5px 0px;
}

.icon_linguagens {
    height: 20px;
}

.icon_HTML {
    fill: #E44D27;
}

.icon_CSS {
    fill: #1572B7;
}

.icon_JS {
    fill: #EFD81D;
}

.icon_GitHub {
    fill: #5C5FE2;
}


.containerButton {
    display: flex;
    justify-content: end;
}

#button_Fecha_Modal {
    cursor: pointer;
    border-radius: 8px;
    color: #fff;
    border: none;
    padding: 10px 13px;
    background-color: #212835;
}



/*_____animações______*/

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.box:nth-child(1) { animation: fadeUp 0.5s ease 0.1s both; }
.box:nth-child(2) { animation: fadeUp 0.5s ease 0.2s both; }
.box:nth-child(3) { animation: fadeUp 0.5s ease 0.3s both; }
.box:nth-child(4) { animation: fadeUp 0.5s ease 0.4s both; }