@charset "UTF-8";

*
{

    margin: 0;
    padding: 0;
    

}

:root 
{

    --white_colors_for_dark_backgrounds: rgba(245, 245, 245, 0.938);
    --pink_colors_for_dark_backgrounds: rgba(246, 85, 120, 0.933);
    --text_colors_pages: rgba(0, 0, 0, 0.404); 

}

div.wrap
{

    width: 100%;
    overflow: hidden;

}

body
{

    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.096);


}

header
{

    width: 100%;
    height: 800px;    
        
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.959), rgba(0, 0, 0, 0.822)), url('chuttersnap-IfmO3IJ1j_8-unsplash.jpg');
    background-repeat: no-repeat;
    background-size: cover;     

}

img.main_menu_button
{

    background-color: var(--pink_colors_for_dark_backgrounds);
    color: white;
    border: none;
    cursor: pointer;    
    margin-top: 20px;    
    height: 21px;      

}

div.dropdown
{

    position: relative;
    display: inline-block;
    margin-left: 17%;    
    margin-top: 1%;

}

div.dropdown-child
{

    display: none;    
    min-width: 200px;

}

div.dropdown-child a
{

    color: var(--white_colors_for_dark_backgrounds);
    padding: 8px;    
    text-decoration: none;
    display: block;    

}

div.dropdown:hover .dropdown-child
{
    
    display: block;
    position: absolute;
    
}

span#name 
{
    
    color: var(--white_colors_for_dark_backgrounds);    
    font-size: 28px;
    font-weight: bolder;  
    
}


a.navigator
{

    font-size: 1.3rem; 
    font-weight: bold;   
    text-decoration: none;       

}

a.navigator:hover
{

    color: var(--pink_colors_for_dark_backgrounds);
    transition: 0.5s ease-in;

}

h2.header
{

    color: var(--pink_colors_for_dark_backgrounds);
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 2.2rem;
    padding-top: 16vh;    

}


h1.header
{

    color: var(--white_colors_for_dark_backgrounds);
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    font-size: 4.8rem;
    padding-top: 1vh;

}

p.header 
{

    color: var(--white_colors_for_dark_backgrounds);
    text-align: center;
    font-size: 1.1rem;    
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    padding-top: 1%;

}

div.box
{

    margin-left: 43%;
    width: 5%;
    height: 120px;
    margin-top: 2%;

}

button
{

    width: 280%;
    height: 60px;
    background-color: rgba(0, 0, 0, 0);
    font-size: 0.8rem;
    letter-spacing: 0.2rem;
    color: var(--white_colors_for_dark_backgrounds);
    text-transform: uppercase;
    border-color: gray;    
    
}


a#about_me 
{

    text-decoration: none;
    color: var(--white_colors_for_dark_backgrounds);

}

i 
{

    margin-left: 2%;    
    color: var(--white_colors_for_dark_backgrounds);

}

button:hover 
{

    border-color: var(--pink_colors_for_dark_backgrounds);
    transition: 0.3s ease;
    -webkit-transform: scale(1.1);

}



/*span#twitter
{

    padding-left: 40%;

}*/

div#icons
{

    width: 50%;    
    margin-left: 42.5%;

}

img.twitter 
{

    height: 25px;    
    background-color: var(--white_colors_for_dark_backgrounds);
    border-radius: 50%;
    padding: 0.6%;

}

span#linkedin
{

    padding-left: 3%;    

}

img.linkedin
{

    height: 24px;
    background-color: var(--white_colors_for_dark_backgrounds);
    border-radius: 10%;
    padding: 0.6%;    

}

span#github
{

    padding-left: 3%;

}

img.github
{

    height: 25px;
    background-color: var(--white_colors_for_dark_backgrounds);
    border-radius: 50%;
    padding: 0.6%;    

}

span#mail
{

    padding-left: 3%;

}

img.mail
{

    height: 25px;
    background-color: var(--white_colors_for_dark_backgrounds);
    border-radius: 50%;
    padding: 0.6%;

}

img.twitter:hover, img.linkedin:hover, img.github:hover, img.mail:hover 
{

    background-color: var(--pink_colors_for_dark_backgrounds);
    transition: 0.2s ease-in;
    -webkit-transform: scale(1.3);

}

/*Page About*/

article#about
{

    height: 430vh;    

}

div#about_titles 
{

    width: 100%;
    height: 90px;    
    margin-top: 2%;

}

h2.about
{

    text-align: center;
    color: var(--pink_colors_for_dark_backgrounds);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-size: 1.2rem;
    padding-top: 1%;    

}

h1.about 
{

    text-align: center;
    padding-top: 1%;
    font-size: 2.1rem;

}

#profile_picture
{

    width: 9%;
    height: 80px;
    margin: auto;
    margin-top: 5vh;

}

.profile_picture
{

    height: 130px;
    border-radius: 50%;
    

}

#profile_description 
{

    width: 60%;
    height: 180px;    
    margin: auto;
    margin-top: 15vh;

}

.profile_description
{

    text-align: center;
    color: rgba(0, 0, 0, 0.404);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.041);  
    font-size: 1.4rem;
    text-justify: auto;
    margin-top: 5vh;

}

div#bio 
{

    width: 100%;
    height: 90px;    
    margin-top: 2%;

}

h2.credentials
{

    text-align: center;
    color: var(--pink_colors_for_dark_backgrounds);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-size: 1.2rem;
    padding-top: 20vh;    

}

h1.credentials
{

    text-align: center;
    padding-top: 3vh;
    font-size: 2.1rem;

}

#scholarship 
{

    width: 60%;
    height: 180px;    
    margin: auto;
    margin-top: 23vh;

}

.scholarship
{

    text-align: center;
    color: rgba(0, 0, 0, 0.788);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.041);  
    font-size: 1.5rem;
    text-justify: auto;
    margin-top: 5vh;

}

.xp
{

    text-align: center;
    color: var(--pink_colors_for_dark_backgrounds);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.041);  
    font-size: 1.8rem;
    text-justify: auto;
    margin-top: 10vh;

}

.profile_mobile 
{

    display: none;

}

.skills_mobile 
{

    display: none;

}

div.templates
{

   width: 100%;
   height: auto;
   margin: 60% auto;
   margin-left: 28%;   

}

.skills_columns
{

    grid-template-columns: repeat(auto-fit,minmax(320px, 1fr));    
    display: grid;   
    grid-gap: 20px;
    padding-right: 40%;

}

h2.template_titles 
{

    text-transform: uppercase;
    letter-spacing: 0.2rem;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.041);
    font-size: 1.25rem;
    
}

p.perfil
{

    width: 60%;
    text-align: left;  
    justify-content: left; 
    font-size: 1.15rem; 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.041);
    color: var(--text_colors_pages);
    

}

.descriptions
{

    grid-template-columns: repeat(2,minmax(250px, 1fr));    
    display: grid;
    grid-gap: 20px;

}

.personal_titles 
{

    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.041);
    font-size: 1.15rem;      

}

h2.personal_titles 
{

    letter-spacing: 0.2rem;
    font-size: 1.25rem;
    padding-top: 3%; 
      

} 

p.personal_titles
{

    color: var(--text_colors_pages);
    margin-top: 1.5%;
    width: 60%;

}

.portuguese
{

    margin-top: -195%;

}

.skill_bars_portuguese 
{

    list-style: none;
    margin: 6rem 0 3rem;
    display: block;   

}

.skill_bars_portuguese li 
{

    height: 0.5rem;
    background: #a1a1a1;
    width: 59%;
    margin-bottom: 6rem;
    padding: 0;
    position: relative;

}

.skill_bars_portuguese li strong
{

    position: absolute;
    left: 0;
    top: -3rem;
    color: #313131;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-size: 1rem;
    line-height: 2.4rem;

}

.skill_bars_portuguese li .progress
{

    background: #313131;
    position: relative;
    height: 100%;

}

.skill_bars_portuguese li .progress span 
{

    position: absolute;
    right: 0;
    top: -3.6rem;
    display: block;
    color: white;
    font-size: 0.8rem;
    line-height: 0.5;
    background: #313131;
    padding: .6rem .6rem;
    border-radius: 3px;

}

.skill_bars_portuguese li .progress span::after 
{

    position: absolute;
    left: 50%;
    bottom: -5px;
    margin-left: -5px;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid #313131;
    content: "";

}

.skill_bars_portuguese li .percent5   { width: 5%; }
.skill_bars_portuguese li .percent10  { width: 10%; }
.skill_bars_portuguese li .percent15  { width: 15%; }
.skill_bars_portuguese li .percent20  { width: 20%; }
.skill_bars_portuguese li .percent25  { width: 25%; }
.skill_bars_portuguese li .percent30  { width: 30%; }
.skill_bars_portuguese li .percent35  { width: 35%; }
.skill_bars_portuguese li .percent40  { width: 40%; }
.skill_bars_portuguese li .percent45  { width: 45%; }
.skill_bars_portuguese li .percent50  { width: 50%; }
.skill_bars_portuguese li .percent55  { width: 55%; }
.skill_bars_portuguese li .percent60  { width: 60%; }
.skill_bars_portuguese li .percent65  { width: 65%; }
.skill_bars_portuguese li .percent70  { width: 70%; }
.skill_bars_portuguese li .percent75  { width: 75%; }
.skill_bars_portuguese li .percent80  { width: 80%; }
.skill_bars_portuguese li .percent85  { width: 85%; }
.skill_bars_portuguese li .percent90  { width: 90%; }
.skill_bars_portuguese li .percent95  { width: 95%; }
.skill_bars_portuguese li .percent100 { width: 100%; }

.button_contact
{

    width: 15%;
    height: 50px;
    background-color: rgba(0, 0, 0, 0);
    font-size: 0.8rem;
    letter-spacing: 0.2rem;
    color: var(--white_colors_for_dark_backgrounds);
    text-transform: uppercase;
    border-color: gray; 
    margin-left: 15%; 

}
a#talk
{

    text-decoration: none;
    color: #313131;

}

a#talk:hover
{

    color: var(--pink_colors_for_dark_backgrounds);

}

.talk_mobile 
{

    display: none;

}

/*Sumary Desktop Configuration*/

article#sumary
{

    height: 650vh;
    background-color: rgba(211, 211, 211, 0.404);

}

.experiences
{

    margin-top: 8%;
    list-style: none;
    color: #313131;
    margin-left: 5%;

}

#office
{
    
    height: 20px;
    margin-left: -3.5%;
    margin-top: 2%; 
    padding: 2%;
    background-color: rgba(0, 0, 0, 0.884); 
    width: 25px;
    border-radius: 50%; 

}

hr 
{

    background-color: var(--text_colors_pages);
    width: 0.082rem;
    margin-left: 8%;    

}

div.year
{

    margin-top: 10%;
    width: 85%; 
    display: flex;   

}

span.company
{

    width: 100%;
    margin-left: 5%;    

}

h2.year
{

    font-size: 1.6rem;    

}

p.year 
{

    font-size: 1rem;
    margin-top: 5%;
    margin-left: -10.2%;
    width: 50%;
    color: var(--text_colors_pages);

}

h2.company 
{

    font-size: 1.4rem;

}

p.company
{

    font-size: 1.2rem;
    color: var(--text_colors_pages);
    margin-top: 2%;

}

hr.horizontal
{

    width: 20%;
    height: 1.1%;
    margin-top: 2%;
    margin-left: 1%;

}

#inno
{

    margin-left: -23%;

}

hr.horizontal_inno
{

    width: 20%;
    height: 0.5%;
    margin-top: 2%;
    margin-left: 1%;

}

p#xd 
{

    margin-left: -17.5%;

}

hr.horizontal_xd
{

    width: 20%;
    height: 0.5%;
    margin-top: 2%;
    margin-left: 1%;

}

.degree 
{

    text-align: center;
    color: var(--pink_colors_for_dark_backgrounds);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.041);  
    font-size: 1.8rem;
    text-justify: auto;
    margin-top: 10vh;

}

.formation
{

    margin-top: 8%;
    list-style: none;
    color: #313131;
    margin-left: 5%;

}

hr.bacharelado 
{

    background-color: var(--text_colors_pages);
    width: 0.15rem;
    margin-left: 6%;

}

span.university
{

    width: 100%;
    margin-left: 5%; 

}

#uff
{

    margin-left: -7.5%;

}

#h2_university
{

    font-size: 1.4rem;
    color: #313131;
    margin-top: -3.8%;

}

.university 
{

    font-size: 1.2rem;
    color: var(--text_colors_pages);
    margin-top: 2%;

}

#cap
{

    height: 20px;
    margin-left: -3.5%;
    margin-top: 2%; 
    padding: 2%;
    background-color: rgba(0, 0, 0, 0.884); 
    width: 25px;
    border-radius: 50%;

}

#estacio
{

    margin-left: -12.5%;

}

.courses
{

    margin-top: 8%;
    list-style: none;
    color: #313131;
    margin-left: 5%;

}

hr.course 
{

    background-color: var(--text_colors_pages);
    width: 0.15rem;
    margin-left: 4%;

}

#course01
{

    margin-left: -7.5%;

}

#courses01 
{

    font-size: 1.4rem;
    color: #313131;
    margin-top: -3.8%;

}

#course03
{

    margin-left: -9%;

}

.course03 
{

    margin-left: 3%;

}

#course04
{

    margin-left: -7.5%;

}

/*Services Section*/

#portfolio
{

    width: 100%;
    height: 800px;    
        
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.842), rgba(0, 0, 0, 0.842)), url('kvistholt-photography-oZPwn40zCK4-unsplash.jpg');
    background-repeat: no-repeat;
    background-size: cover;   

}

.portfolio_informations
{

    width: 50%;
    margin: auto;

}

.services
{
    
    color: var(--pink_colors_for_dark_backgrounds);
    text-align: center;
    padding-top: 18%;
    font-size: 1.65rem;

}

.services_titles
{

    color: var(--white_colors_for_dark_backgrounds);
    text-align: center;
    padding-top: 1%;
    font-size: 2rem;

}

.services_text
{

    color: rgb(180, 180, 180);
    text-align: center;
    padding-top: 2.5%;
    font-size: 1.25rem;

}

.solutions
{

    width: 80%;
    margin: auto;
    margin-top: 2%;
    margin-left: 8%;

}

.title_solution
{

    color: var(--white_colors_for_dark_backgrounds);
    text-align: center;
    margin-left: 15%;
    padding-top: 25%;
    font-size: 1.4rem;

}

.html
{

    height: 35px;
    background-color: var(--white_colors_for_dark_backgrounds);
    border-radius: 50%;
    padding: 1%;
    width: 3%;
    margin-left: 23%; 
    margin-top: 6%;   
    
}

.css
{
    
    height: 35px;
    background-color: var(--white_colors_for_dark_backgrounds);
    border-radius: 50%;
    padding: 1%;
    width: 3%;
    margin-left: 18%; 
    margin-top: 6%; 

}

.js 
{

    height: 35px;
    background-color: var(--white_colors_for_dark_backgrounds);
    border-radius: 50%;
    padding: 1%;
    width: 3%;
    margin-left: 18%; 
    margin-top: 6%; 

}

.html_descriptions
{

    color: rgb(180, 180, 180);
    width: 30%;
    margin-top: 2%;
    margin-left: 8%;

}

/*Contacts section*/

#contacts 
{

    width: 100%;
    height: 100vh;
    background-color: black;

}

.subtitle
{

    text-align: center;
    padding-top: 10%;
    color: var(--pink_colors_for_dark_backgrounds);
    text-transform: uppercase;
    letter-spacing: 0.1rem;

}

.contacts_title 
{

    text-align: center;
    color: var(--white_colors_for_dark_backgrounds);
    font-size: 2.2rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    padding-top: 1.5%;

}

.informations_contacts_informations
{

    text-align: center;
    color: rgb(180, 180, 180);
    font-size: 1.4rem;
    padding-top: 1.5%;

}

#mail_button 
{

    width: 40%;
    height: 80px;
    margin-top: 5%;
    margin-left: 30%;
    background-color: var(--pink_colors_for_dark_backgrounds);
    border: 0;
    font-weight: bolder;
    font-size: 1.2rem;
}

a.mail
{

    text-decoration: none;
    color: var(--white_colors_for_dark_backgrounds);

}

footer
{

    background-color: black;
    padding-top: 11%;      

}

p.footer
{

    color: rgb(180, 180, 180);
    text-align: center;
    margin-top: 0.5%;  

}