/* IMPORTS */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech&display=swap');

.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.share-tech-regular {
  font-family: "Share Tech", sans-serif;
  font-weight: 400;
  font-style: normal;
}

                        /* CSS - INDEX */

/* BODY -INDEX */

.video-container {
    position: fixed;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
}

body#index-body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 0;
    padding: 0;
    margin: 0;
    background: url(../source/Glow\ Black\ And\ White\ GIF\ by\ xponentialdesign.gif) no-repeat center center fixed;
    background-size: cover;
    background-color: black;
}

body#index-body::before {
    height: 100%;
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1;
}

body#index-body>header#cabecalho {
    display: flex;
    height: 7vh;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: 5vh;
}

body#index-body>section#first {
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 5vh;
}

body#index-body>section#second {
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 5vh;
}

body#index-body>section#third {
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 5vh;
}

body#index-body>footer#rodape {
    display: flex;
    height: 10vh;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

/* HEADER CABECALHO */

header#cabecalho {
    width: 100%;
    font-family: "Bebas Neue", sans-serif;
    position: absolute;
    right: 0;
    z-index: 10;
}

header#cabecalho nav {
    width: 95%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

/* header#cabecalho h1 {
    color: rgb(240, 238, 238);
    font-size: clamp(1.5rem, 5vw, 2rem);
    letter-spacing: 0.1em;
} */

header#cabecalho h1 a{
    text-decoration: none;
    background-color: rgb(240, 238, 238);
    color: black;
    font-size: clamp(1.5rem, 5vw, 2rem);
    letter-spacing: 0.1em;
} 

header#cabecalho div#curriculo a {
    text-decoration: none;
    color: black;
    background: rgb(240, 238, 238);
    padding: 5px 7px;
    border-radius: 10px;
    font-size: clamp(0.5rem, 2vw, 1rem);
    letter-spacing: 0.05rem;
}

/* SECTION #FIRST */

section#first {
    z-index: 5;
    color: rgb(240, 238, 238);
    text-align: center;
    padding: 0 0 5% 0;
}

section#first h1 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(1.5rem, 8vw, 3.5rem);
    letter-spacing: 0.1em;
}

section#first h3 {
    font-size: clamp(0.5rem, 3vw, 1.2rem);
    padding: 0 0 4% 0;
    margin: 0;
}

section#first img {
    max-width: 150px;
    width: 30vw;
    height: auto;
    border-radius: 50%;
}

section#first div.social {
    width: 30%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    background: rgb(240, 238, 238);
    border-radius: 10px;
    max-height: 50px;
}

div.caixa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 10px 5px 10px;
}

div.caixa a {
    text-decoration: none;
    color: black;
    text-align: center;
    font-size: 1.5em;
    max-width: 55px;
    width: 60%;

}

.icone {
    width: 95%;
    height: 100%;
    color: rgb(0, 0, 0, 0.9);
}

/* SECTION #SECOND */

section#second {
    font-family: "Share Tech", sans-serif;
    z-index: 5;
}

section#second div#conteudo {
    display: flex;
    flex-direction: column;
    width: 98%;
    background: rgb(240, 238, 238);
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    padding: 7% 0;
}

section#second div h2 {
    color: black;
    text-align: left;
    font-size: clamp(1.5rem, 5vw, 3rem);
}

section#second div p {
    color: rgb(0, 0, 0, 0.9);
    text-align: center;
    font-size: clamp(0.5rem, 3vw, 1.2rem);
    line-height: 1.5em;
    text-align: left;
    padding: 2%;
}

div.infos {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

div.tecnologias {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    width: 95%;
}

div.tecs i {
    font-size: clamp(1rem, 3vw, 3rem);
    padding: 2%;
    color: rgb(240, 238, 238);
    background-color: rgb(0, 0, 0, 0.9);
    border-radius: 10px;
    margin: 1%;
}

/* SECTION #THIRD */

section#third {
    font-family: "Bebas Neue", sans-serif;
    z-index: 2;
    padding: 5%;
}

section#third h2 {
    font-size: clamp(1.5rem, 5vw, 3rem);
    color: rgb(240, 238, 238);
}

section#third h3 {
    font-size: clamp(0.5rem, 3vw, 2rem);
    color: black;
}

section#third div#projetos {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

section#third div.projeto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 40%;
    background-color: rgb(240, 238, 238);
    border-radius: 20px;
    padding: 2%;
    margin: 1%;
    align-items: center;
    text-align: center;
    font-size: clamp(0.5rem, 3vw, 1.5rem);
}

div.area_links {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: 100%;
    margin-top: 1%;
}

a.link {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    padding: 10px;
    font-family: "Share Tech", sans-serif;
    text-align: center;
    text-decoration: none;
    color:  rgb(240, 238, 238);
    font-size: clamp(0.5rem, 2vw, 1.2rem);
}

a.link:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.img_proj {
    width: 95%;
    height: auto;
    border-radius: 20px;
    padding: 5px;
}

.descricao {
    font-size: clamp(0.5rem, 2vw, 1.2rem);
    font-family: "Share Tech", sans-serif;
}

/* section#third div.vermais {
    width: 10vw;
    cursor: pointer;
    padding: 0;
    border-radius: 20px;
    text-align: center;
} */

/* section#third div.vermais a {
    text-decoration: none;
    color: black;
    padding: 13% 25%;
} */

/* FOOTER #RODAPE */

footer#rodape {
    font-family: "Share Tech", sans-serif;
    font-size: clamp(0.5rem, 3vw, 1.2rem);
    z-index: 2;
    color: black;
    background-color: rgb(240, 238, 238);
}

                        /* CSS - CURRICULO */

/* BODY - CURRICULO */

body#curriculo-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 0;
    padding: 0;
    margin: 0;
    height: 100vh;
    background: url(../source/Glow\ Black\ And\ White\ GIF\ by\ xponentialdesign.gif) no-repeat center center fixed;
    background-size: cover;
    background-color: black;
}

body#curriculo-body::before {
    height: 100%;
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1;
}

body#curriculo-body>section#opcao {
    display: flex;
    height: 100%;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

section#opcao {
    z-index: 5;
}

section#opcao div.select {
    width: 30%;
    display: flex;
    justify-content: center;
    background-color: rgb(240, 238, 238);
    border-radius: 20px;
}

div.select h1 {
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(1rem, 3vw, 2rem);
    text-align: center;
    margin: 0;
    padding: 10px 15px;
    cursor: pointer;
}

div.select a {
    text-decoration: none;
    color: rgb(0, 0, 0, 0.9);
}