/* ================================================================================================================================== */
/* Variables */
:root {
    /* Paleta de cors */
    --midnight-blue: #0B1A33;
    --cornflower-blue: #4B90F8;
    --goldenrod: #D6A419;
    --caribbean-green: #00C6BE;
    --deep-ruby: #623A40;
    --ivory: #F1F1E6;
    --alice-blue: #F4F9FF;
    --charcoal-blue: #35405D;
    --slate-gray: #616B8B;
    --light-slate-gray: #909ABB;
    --periwinkle: #2d2e31;

    /* Informaçoes da paleta de cores */
    --primary-color: var(--midnight-blue);
    --secondary-color: var(--cornflower-blue);
    --accent-color: var(--goldenrod);
    --background-color: var(--charcoal-blue);
    --text-color: var(--charcoal-blue);
    --secondary-text-color: var(--slate-gray);
    --border-color: var(--deep-ruby);
    --highlight-color: var(--caribbean-green);
    --error-color: var(--slate-gray);
    --success-color: var(--light-slate-gray);
    --warning-color: var(--periwinkle);
    --info-color: var(--ivory);

    --font-family: 'Roboto', sans-serif;
    --heading-color: var(--alice-blue);
    --heading-margin: 0 0 20px;
}

/* ================================================================================================================================== */
/* Reset and Base Styles */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* background-color: var(--background-color); */
}
/* ================================================================================================================================== */
/* Body  */
body {
    /* background-color: var(--background-color); */
    color: var(--heading-color);
    background-color: var(--background-color);
    scroll-behavior: smooth; 
}

/* ================================================================================================================================== */
/* Estilos básicos para todos os cabeçalhos */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    margin: var(--heading-margin);
    color: var(--heading-color);
  }

/* ================================================================================================================================== */
/* header section */
.header{
    width: 100vw;
    height: 8vh;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    padding: 0 30px;
    position: fixed;
}

.branding{
    margin: 5px 0 5px 0;
}

.branding a{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.brand-name{
    color: var(--alice-blue);
    font-size: 32px;
    font-weight: bold;
}
.menu{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.menu a{
  color: var(--alice-blue);
  padding: 0 8px;
}
/* ================================================================================================================================== */
/* HOMEPAGE */

.home{
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  justify-content: center;

  padding: 0 30px;

  scroll-snap-align: start;
  background: url('/assets/img/index/waves.svg') no-repeat;
  background-position: bottom;
  background-size: cover;
}

.banner{
  width: 60%;
  height: 40%;

}
.banner h1{
  font-size: 40px;
  font-weight: bold;
}
.banner h3{
  font-size: 28px;
  font-weight: 400;
}
.banner p{
  color: var(--alice-blue);
}

.blinking-cursor {
  display: inline-block;
  width: 10px;
  height: 1.5rem;
  background-color: #F1F1E6;
  margin-left: 5px;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  from, to {
      background-color: transparent;
  }
  50% {
      background-color: #F1F1E6;
  }
}

/* ================================================================================================================================== */
/* TRENSPAGE */

.trens{
  width: 100vw;
  min-height: 100vh;

  background-color: var(--ivory);
}

.trens h1{
  font-weight: bold;
  font-size: 40px;
  color: var(--secondary-text-color);
}

.trens h5{
  font-weight: 100;
  font-size: 20px;
  color: var(--secondary-text-color);
}

.box{
  min-height: 300px;
}

.box h3{
  font-family: "Roboto", sans-serif;
  font-size: 28px;
  font-weight: 700;
}

.box p{
  font-size: 20px;
  font-weight: 300;
}

/* ================================================================================================================================== */
/* PEOPLESPAGE */

.peoples{
  width: 100vw;
  min-height: 100vh;

  padding: 100px 30px;

  background: url('/assets/img/index/people.svg') no-repeat;
  background-position: top;
  background-size: contain;
}

.peoples h1{
  font-weight: bold;
  font-size: 40px;
  color: var(--secondary-text-color);
}

.peoples h5{
  font-weight: 100;
  font-size: 20px;
  color: var(--secondary-text-color);
}

.peoples .invert{
  color: var(--ivory);
}

.peoples .box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.peoples .box .rounded{
  background: var(--cornflower-blue);
  width: 200px;
  height: 200px;

  border-radius: 50%;
}

.peoples .box h4{
  text-align: center;
  color: var(--secondary-text-color);
  font-weight: bold;
  font-size: 24px;
}

.peoples .box p{
  text-align: center;
  color: var(--secondary-text-color);
  font-weight: normal;
  font-size: 16px;
}

.peoples .box .redes{
  display: flex;
  flex-direction: row;
}
.peoples .box .redes img{
  height: 45px;
  width: auto;
  margin: 0 25px;
  object-fit: cover;
}

#canvas {
  width: 100%;
  height: 100%;
  z-index: 1000;
}

/* ================================================================================================================================== */
/* PUBLICATION */

.publication{
  margin: 5%;
  background-color: var(--ivory);
}

.publication .pub-header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  
  padding: 25px;
}


.publication .pub-header h1{
  font-size: 28px;
  font-family: var(--font-family);
  font-weight: 900;
  color: var(--charcoal-blue);
  
}


.publication #article .bibliography{
  margin: 25px;
  color: var(--charcoal-blue);
}

.publication #article h2{
  font-size: 36px;
  font-family: var(--font-family);
  font-weight: 900;
  color: var(--charcoal-blue);
}

/* ================================================================================================================================== */
/* About */

.about {
  /* background-color: #D6A419; */
  color: var(--alice-blue);
  margin: 100px 30px;
}

.about h1{
  font-size: 28px;
  font-weight: 900;
  margin: 10px 0;
}