/* mobile first */
* {
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

@font-face {
    font-family: 'Neue Machina';
    src: url('./fonts/NeueMachina-Regular.otf');
}

body {
    background-color: #000;
    color: #fff;
}

a {
    color: #fff;
    text-decoration: none;
    margin: 5px;
}

a:hover {
    text-decoration: underline;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #1a1919;
}

::-webkit-scrollbar-thumb {
    background: #672b8a;
    border-radius: 12px;
}

::-webkit-scrollbar-thumb:hover {
    background: #d28dfab9;
}

.main {
    padding: 1rem;
    margin: 1rem;
    border: #fff solid 1px;
    border-radius: 1rem;
}

.main::after,
.main::before {
    content: '';
    background-image: url(./imgs/background.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    position: fixed;
    top: 0;
    left: 0;
    width: 140vw;
    height: 100vh;
    z-index: -1;
}

.main::after {
    content: '';
    top: auto;
    left: auto;
    bottom: 0;
    right: 0;
    transform: rotate(180deg);
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.header::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 1rem;
    right: 1rem;
    height: 2rem;
    width: 2rem;
    background-image: url(./imgs/header.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.header .photo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

.header .title {
    font-family: 'Neue Machina';
    text-align: center;
}

.informations {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.informations p {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: .5rem;
    font-size: 1.125rem;
}

.informations p::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url(./imgs/github.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: .5rem;
}

.informations .job::before {
    background-image: url(./imgs/job.svg);
}

.informations .local::before {
    background-image: url(./imgs/location.svg);
}

.informations .phone::before {
    background-image: url(./imgs/phone.svg);
}

.informations .email::before {
    background-image: url(./imgs/email.svg);
}

.informations .github::before {
    background-image: url(./imgs/github2.svg);
}

.moreInfo {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #fff;
    border-radius: 1rem;
    margin: 1rem 0;
    transition: .25s;
}

.moreInfo.open,
.moreInfo:hover {
    background-color: #1716707a;
    border-color: #1403fc;
}

.moreInfo .trigger {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    padding: 1rem 2rem;
    background-color: transparent;
    color: #fff;
    border: none;
}

.moreInfo .trigger h2 {
    margin: 0;
    font-size: 1.5rem;
    text-align: start;
}

.moreInfo .trigger:hover {
    cursor: pointer;
}

.moreInfo .trigger::after {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(./imgs/arrow-top.svg);
    transform: rotate(180deg);
    transition: .25s;
}

.moreInfo.open .trigger::after {
    transform: rotate(0deg);
}

.moreInfo .content {
    overflow: hidden;
    height: 0;
    opacity: 0;
    transition: opacity .25s ease-in-out;
}

.moreInfo.open .content {
    display: block;
    padding: 0 1rem 1rem 2rem;
    height: auto;
    opacity: 1;
}

.lenguages {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lenguages li {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 1rem;
    font-weight: 700;
}

.lenguages li::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url(./imgs/check.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin: .5rem;
}

.projetos {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.projetos li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 1rem 0;
}

.projetos li .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.projetos li .title.github::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url(./imgs/github.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin: .5rem;
}

.projetos li .hide {
    visibility: hidden;
}

.projetos li p {
    display: inline;
    margin: 0 4px;
}

.experience {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.experience li {
    margin-bottom: 1rem;
}

.experience li .period {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.experience li .period::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url(./imgs/calendar.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin: .5rem;
}

.school {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.school li {
    margin-bottom: .1rem;
}

.school li .period {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.school li .period::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url(./imgs/calendar.svg);
    background-repeat: no-repeat;
    background-size: contain;
    margin: .5rem;
}

.skills {
    display: flex;
    flex-direction: column;
}

.skills .tools ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.skills .tools ul li img {
    max-width: 50px;
    max-height: 50px;
    margin: 0 .5rem;
}

.skills .personal ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.skills .personal ul li {
    margin-left: 2rem;
    padding: .5rem;
}

/* responsividade de tela desktop/notebook */
@media (min-width: 768px) {
    .main {
        max-width: 1024px;
        margin: 1rem auto;
    }

    .main::after,
    .main::before {
        width: 70vw;
    }

    .header {
        display: grid;
        grid-template-areas: "photo title" 'photo information';
    }

    .header .photo {
        grid-area: photo;
        margin: 0 auto;
    }

    .header .title {
        grid-area: title;
        text-align: start;
    }

    .header .informations {
        grid-area: information;
    }

    .skills {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}