/*
 _____                _
|  __ \              | |
| |  \/ ___ _ __ __ _| |
| | __ / _ | '__/ _` | |
| |_\ |  __| | | (_| | |
 \____/\___|_|  \__,_|_|
*/

* {
    scrollbar-color: #F6B17A #222831;
}

:root{
   --cor-de-fundo: #2D3250;
   --cor-de-link: #424769;
   --cor-de-link-ativo: #222831;
   --cor-de-titulo: #F6B17A;
   --cor-de-text: #7077A1;
   --cor-de-subtitulo: #EEEEEE;
}


body {
    box-sizing: border-box;
    background-color: var(--cor-de-fundo) ;
    font-family: 'Raleway';
    margin: 0;
    padding: 0;
    line-height: 1;
    scrollbar-color: #e100ff #000;
}

ol, ul,li {
    list-style: none;
}
a{
    text-decoration: none;
    color: var(--cor-de-link);
}

.all {
    box-sizing: border-box;
}

/*Neste desafio, gostariamos que praticassem a metodologia BEM, caso seintam a vontade 
de utiliza-la. 

Mas o que é o BEM?

BEM (Block, Element, Modifier) ​​é uma abordagem baseada em componentes para o desenvolvimento
web. A ideia por trás disso é dividir a interface do usuário em blocos independentes.
Isso torna o desenvolvimento de interface fácil e rápido, mesmo com uma interface
de usuário complexa, e permite a reutilização de código existente sem copiar e colar.

Link da documentação oficial!
https://en.bem.info/methodology/quick-start/*/

/*
 _    _  _    _
| |  (_)| |  | |
| |_  _ | |_ | |  ___
| __|| || __|| | / _ \
| |_ | || |_ | ||  __/
 \__||_| \__||_| \___|
*/

section.title{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 10% 6% 6%;
}

.title__div {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-around;
    gap: 20px;
}

.title__profile {
    max-width: 30%;
    transition: transform .5s;
}

.title__profile:hover {
    transform: rotateY(180deg);
}

.title__container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 10px;
}

.title__bio {
    background: linear-gradient(to right, #e16804 0%, #fff 40%, #fa0446 70%, #920499 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-size-adjust: none;
    font-weight: 600;
    font-size: 70px;
    text-shadow: 2px 2px 4px rgba(246, 177, 122, 0.502);
    color: var(--cor-de-titulo);
    height: 40%;
}

.title__subsection {
    color: var(--cor-de-text);
    background: linear-gradient(to right, #9f9f9f 0, #fff 10%, #868686 20%);
    background-position: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 9s infinite linear;
    animation-fill-mode: forwards;
    -webkit-text-size-adjust: none;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
}

 @-moz-keyframes shine {
    0% {
        background-position: 0;
    }
    20% {
      background-position: 180px;
    }
    40% {
        background-position: 360px;
    }
    60% {
        background-position: 540px;
    }
    80% {
        background-position: 720px;
    }
    100% {
      background-position: 900px;
    }
}

@-webkit-keyframes shine {
    0% {
        background-position: 0;
    }
    20% {
      background-position: 180px;
    }
    40% {
        background-position: 360px;
    }
    60% {
        background-position: 540px;
    }
    80% {
        background-position: 720px;
    }
    100% {
      background-position: 900px;
    }
}

@-o-keyframes shine {
    0% {
        background-position: 0;
    }
    20% {
      background-position: 180px;
    }
    40% {
        background-position: 360px;
    }
    60% {
        background-position: 540px;
    }
    80% {
        background-position: 720px;
    }
    100% {
      background-position: 900px;
    }
}

@keyframes shine {
    0% {
        background-position: 0;
    }
    20% {
      background-position: 180px;
    }
    40% {
        background-position: 360px;
    }
    60% {
        background-position: 540px;
    }
    80% {
        background-position: 720px;
    }
    100% {
      background-position: 900px;
    }
}


.title__network {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: 20px;
}

.title__network__item a,
.title__network__item a{
    color: var(--cor-de-link-ativo);
}


.title__network__item:hover a,
.title__network__item:hover a{
    color: var(--cor-de-subtitulo);
    transform: rotateX(-3deg);
}


/*
       _                 _
      | |               | |
  __ _| |__   ___  _   _| |_
 / _` | '_ \ / _ \| | | | __|
| (_| | |_) | (_) | |_| | |_
 \__,_|_.__/ \___/ \__,_|\__|
*/

section.about{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #7077A1;
    padding: 4% 6%;
    gap: 20px;
}

.about__title {
    font-size: 33px;
}

.about__container img {
    width: 15%;
}

/*
      _     _  _  _
     | |   (_)| || |
 ___ | | __ _ | || | ___
/ __|| |/ /| || || |/ __|
\__ \|   < | || || |\__ \
|___/|_|\_\|_||_||_||___/
*/

section.skills{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 4% 6%;
    margin: 0;
}

.skills__title {
    color: var(--cor-de-titulo);
    font-size: 29px;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(246, 177, 122, 0.5);
}

.skills__line{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: 20px;
}

.skills__box{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
}

.skills__name {
    color: var(--cor-de-text)
}

/*
 _           _     _     _
| |         | |   | |   (_)
| |__   ___ | |__ | |__  _  ___  ___
| '_ \ / _ \| '_ \| '_ \| |/ _ \/ __|
| | | | (_) | |_) | |_) | |  __/\__ \
|_| |_|\___/|_.__/|_.__/|_|\___||___/
*/

section.hobbies{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 4% 6%;
    margin: 0;
}

.hobbies__title {
    color: var(--cor-de-titulo);
    font-size: 29px;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(246, 177, 122, 0.5);
}

.hobbies__line{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.hobbies {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 4% 6%;
    margin: 0;
}

.hobbies__box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.hobbies__box ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    gap: 10px
}

.hobbies__img img{
    max-width: 60px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hobbies__name {
    color: var(--cor-de-text)
}

/*
                     _                _
                    | |              (_)
  __ _  ___ __ _  __| | ___ _ __ ___  _  ___
 / _` |/ __/ _` |/ _` |/ _ | '_ ` _ \| |/ __|
| (_| | (_| (_| | (_| |  __| | | | | | | (__
 \__,_|\___\__,_|\__,_|\___|_| |_| |_|_|\___|
*/

section.academic{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 6% 6% 8%;
    gap: 20px;
    position: relative;
    margin: 0;
}


section.academic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/bg-science.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    filter: blur(5px);
    z-index: -1;
}


.academic__title {
    color: var(--cor-de-titulo);
    font-size: 29px;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(246, 177, 122, 0.5);
}

.academic__courses {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.academic__courses:hover > :not(:hover) {
    opacity: .4;
    transform: scale(0.9);
}

.academic__courses__box {
    width: 100px;
    height: 200px;
    padding: 2%;
    box-sizing: content-box;
    position: relative;
    border: #F6B17A 1px solid;
    outline: none;
    background: transparent;;
    transition: 1s;
    border-radius: 0.3rem;
    backdrop-filter: blur(24px);
    transition: .35s;
    cursor: pointer;
}

.academic__courses__box::before,
.academic__courses__box::after {
    transform: scale(0);
}

.academic__courses__box:hover {
    box-shadow: inset 0px 0px 5px #F6B17A ;
}

.academic__courses__list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1% 2%;
}

.academic__courses__item__img img{
    width: 80px;
}


.academic__courses__item__title {
    font-size: 14px;
}

.academic__courses__item__subtitle {
    font-size: 12px;
}

/*
                           _
                          (_)
  _____  ___ __   ___ _ __ _  ___ _ __   ___ ___
 / _ \ \/ | '_ \ / _ | '__| |/ _ | '_ \ / __/ _ \
|  __/>  <| |_) |  __| |  | |  __| | | | (_|  __/
 \___/_/\_| .__/ \___|_|  |_|\___|_| |_|\___\___|
          | |
          |_|
*/

section.experience{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4% 0 4%;
}

.experience__section__title{
    color: var(--cor-de-titulo);
    text-align: center;
    font-size: 29px;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(246, 177, 122, 0.5);
}

.experiencie__box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    padding: 4% 6%;
}

.experience__img{
    width: 700px;
}

.experiencie__box:nth-child(2),
.experiencie__box:nth-child(4) {
    flex-direction: row-reverse;
}

.experience__title{
    color: var(--cor-de-subtitulo);
}

.experience__text {
    color: #000000b5;
}

.experiencia__botao--repo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    height: 45px;
    border: none;
    padding: 0px 15px;
    border-radius: 5px;
    background-color: rgb(49, 49, 83);
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.mobile {
    display: none;
}

.desktop {
    display: block;
}

.Documents-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    height: 45px;
    border: none;
    padding: 0px 15px;
    border-radius: 5px;
    background-color: rgb(49, 49, 83);
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.folderContainer {
    width: 40px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.fileBack {
    z-index: 1;
    width: 80%;
    height: auto;
}

.filePage {
    width: 50%;
    height: auto;
    position: absolute;
    z-index: 2;
    transition: all 0.3s ease-out;
}

.fileFront {
    width: 85%;
    height: auto;
    position: absolute;
    z-index: 3;
    opacity: 0.95;
    transform-origin: bottom;
    transition: all 0.3s ease-out;
}

.text {
    color: white;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.Documents-btn:hover .filePage {
    transform: translateY(-5px);
}

.Documents-btn:hover {
    background-color: rgb(58, 58, 94);
}

.Documents-btn:hover .fileFront {
    transform: rotateX(30deg);
}

.experience hr {
    display: none;
}



/*
 _____             _             _
/  __ \           | |           | |
| /  \/ ___  _ __ | |_ __ _  ___| |_
| |    / _ \| '_ \| __/ _` |/ __| __|
| \__/| (_) | | | | || (_| | (__| |_
 \____/\___/|_| |_|\__\__,_|\___|\__|
*/

section.formcontato{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 4% 4% 6%;
}

.formcontato__contacto {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 20px;
    width: 100%;
}

.formcontato--esquerda {
    padding: 0;
    max-width: 40%;
}

.formcontato__img {
    height: 100%;
    width: 100%;
}

.formcontato__text {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
    padding: 0;
    max-width: 60%;
}

.formcontato__title,
.formcontato__subtext,
.formcontato__subtext {
    margin: 0;
    padding: 4px 0;
    color: var(--cor-de-subtitulo);
    line-height: 1.2rem;
}

.formcontato__title{
    display: block;
    margin-bottom: 10px;
    font-size: 24px;
}

.formcontato__title_mobile{
    display: none;
}

.formcontato__subtext,
.formcontato__subtext {
    font-size: 16px;
}

.formcontato__form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
}

.formcontato__input,
.formcontato__textarea,
.formcontato__botao {
    padding: 15px;
    border: none;
    border-radius: 4px;
    font-size: .9rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
}

.formcontato__botao {
    background-color: #F6B17A;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 16px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    cursor: pointer;
}

.formcontato__botao:hover {
    filter: brightness(80%);
    transform: translateY(-3px);
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3);
}

.formcontato__botao:active {
    transform: scale(0.95);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
}

/*
______          _
|  ___|        | |
| |_ ___   ___ | |_ ___ _ __
|  _/ _ \ / _ \| __/ _ | '__|
| || (_) | (_) | ||  __| |
\_| \___/ \___/ \__\___|_|
*/

section.footer{
    background-color: #222831;
    padding: 6% 2% 1%;
    display: flex;
    justify-content: center;
    align-items: end;
}

.footer__rodape {
    font-size: 14px;
    color: var(--cor-de-subtitulo);
    text-align: center;
    padding: 0;
    margin: 0;
    line-height: 1rem;
}


/*Tablet*/
@media only screen and (601px<=width<=1024px) {

    /* Menu */
    .title__container {
        gap: 5px;
    }
    .title__profile {
        max-width: 50%;
        max-height: 200px;
    }

    .title__subsection {
        margin: 0;
        font-size: 14px;
    }

    .title__bio {
        font-size: 25px;
    }

    /*title*/
    .title__div {
        margin-top: 5%;
    }
    
    .about__title {
        font-size: 25px;
    }

    .about__paragraph {
        font-size: 14px;
        font-weight: 300;
        line-height: 1.2rem;
    }

    .about__container img{
        width: 30%;
    }

    /*Skills*/

    .skills__title {
        font-size: 25px;
    }

    .skills__line {
        flex-wrap: wrap;
    }

    /*Hobbies*/
    .hobbies__title {
        font-size: 25px;
        flex-wrap: wrap;
    }

    /*Experiências acadêmicas*/

    .academic__title {
        font-size: 25px;
    }

    .academic__courses__item__img {
        min-height: 45px;
    }


    /*Expeirência profissional*/

    .experience__section__title {
        font-size: 25px;
    }

    .experience__img {
        width: 50%;
    }
    .experience__info {
        width: 40%;
    }

    .experience__title {
        font-size: 18px;
    }

    .experience__text {
        font-size: 14px;
    }

    /*Contato*/
    section.formcontato {
        background-image: url(../img/bg_2.jpg);
        justify-content: center;
        align-items: center;
    }

    .formcontato__contacto{
        justify-content: center;
    }

    .formcontato__img {
        display: none;
    }

    .formcontato__text {
        max-width: 100%;
    }

    .formcontato__title {
        font-size: 18px;
    }

    .formcontato__subtext {
        font-size: 15px;
        margin: 0;
        padding: 0;
    }

    .formcontato__form {
        width: 100%;
    }

    .formcontato__input, .formcontato__textarea, .formcontato__botao{
        padding: 10px;
        font-size: 13px;
    }

}

/*Mobile*/
@media only screen and (max-width:600px) {

    /*Titulo*/

    section.title {
        padding-top: 25%;
    }

    .title__div {
        flex-direction: column;
    }

    .title__profile {
        max-width: 40%;
    }

    .title__container {
        gap: 5px;
    }

    .title__bio {
        margin-top: -5px;
        font-size: 25px;
    }

    .title__network ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    /*Sessão sobre*/
    .about__title {
        font-size: 25px;
    }

    .about__paragraph {
        font-size: 13px;
        line-height: 1.2rem;
    }

    .about__container img{
        width: 50%;

    }

    /*Skills*/
    .skills__title {
        font-size: 25px;
    }

    .skills__line {
        gap: 2px;
        flex-wrap: wrap;
    }

    .skills__box {
        align-items: center;
    }

    .skills__box ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
        gap: 10px
    }

    /*Hobbies*/
    .hobbies__title {
        font-size: 25px;
    }

    .hobbies__line {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hobbies__img img {
        width: 50px;
        height: 50px;
        flex-wrap: wrap;
    }

    .hobbies__name {
        font-size: 14px;
    }

    /*Formação Acadêmica*/
    .academic {
        padding: 0;
    }

    .academic__title {
        font-size: 25px;
    }

    .academic__courses {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0;
    }

    .academic__courses__box {
        width: 40%;
        text-align: center;
    }

    .academic__courses__list {
        justify-content: space-between;
        padding: 1%;
    }

    .academic__courses__item__img {
        width: 100%;
        min-height: 40px;
        text-align: center;
    }

    .academic__courses__item__img img {
        width: 40px;
        max-width: 80px;
    }

    .academic__courses__item__title,
    .academic__courses__item__subtitle {
        font-size: 10px;
    }

    /*Experiência Profissional*/
    section.experience {
        gap: 30px;
    }

    .experience__section__title {
        font-size: 25px;
    }

    .experiencie__box,
    .experiencie__box:nth-child(2),
    .experiencie__box:nth-child(4) {
        flex-direction: column-reverse;
        gap: 2px;
        align-items: center;
    }

    .experience__info{
        text-align: left;
    }

    .experience__title {
        font-size: 22px;
        text-align: center;
    }

    .experience__text {
        font-size: 16px;
    }

    .experience__img {
        width: 100%;
    }

    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }

    .Documents-btn {
        margin-top: 10px;
        padding-left: 0;
    }

    .experience hr {
        display: block;
        width: 50%;
        height: 2px;
        color: var(--cor-de-link);
        background-color: var(--cor-de-link);
        border: var(--cor-de-link);
        opacity: 1;
        margin: 0;
        padding: 0;
    }

    /*Contato*/
    section.formcontato{
        background-image: url(../img/bg_2.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        backdrop-filter:  blur(7px);
        opacity:  0.9;
        padding: 10% 4% 16%;
    }

    .formcontato__contacto {
        flex-direction: column;
        gap: 10px;
    }

    .formcontato--esquerda {
        max-width: 100%;
        max-height: auto;
    }

    .formcontato__title_mobile {
        display: block;
        font-size: 22px;
        margin-bottom: 14px;
        padding: 4px 0;
        color: var(--cor-de-subtitulo);
        line-height: 1.2rem;
        text-align: center;
    }

    .formcontato__img {
        width: 100%;
        height: auto;
    }

    .formcontato__text {
        padding: 0;
        max-width: 100%;
    }

    .formcontato__title {
        display: none;
    }

    .formcontato__subtext {
        font-size: 16px;
        font-weight: 300;
    }

    .formcontato__form {
        width: 100%;
    }

    .formcontato__input, .formcontato__textarea, .formcontato__botao {
        padding: 12px;
        font-size: 13px;
    }

    /*Footer*/
    section.footer {
        padding: 7% 0 10%;
    }

    .footer__rodape {
        font-size: 12px;
    }

    .footer__rodape p {
        margin: 0;
        padding: 5px 0 0;
    }

}