:root {
  --cor1: #063aa9;
  --cor2: #4a558e;
  --cor3: #1a3264;
  --cor4: #678bdf;
  --cor5: rgb(127, 157, 255);
}

@font-face {
  font-family: Esp;
  src: url(./fonts/esp_ital.ttf);
}

@font-face {
  font-family: Fenice;
  src: url(./fonts/Fenice\ Regular.ttf);
}

@font-face {
  font-family: aBlackLives;
  src: url(./fonts/aBlackLives.ttf);
}

@font-face {
  font-family: Avalon;
  src: url(./fonts/Avalon.ttf);
}

@font-face {
  font-family: Interphases;
  src: url(./fonts/Interphases.ttf);
}

@keyframes fadeImagens {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pisca {
  from {
    scale: 1;
  }
  to {
    scale: 1.2;
  }
}

@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@1,600&display=swap");

@media only screen and (min-width: 0px) and (max-width: 600px) {
  .artigo {
    flex-direction: column;
    font-size: 0.8em;
  }
  #maintext2 {
    font-size: 2em;
  }

  .artigo2 {
    flex-direction: column;
    font-size: .8em;
  }
}

footer {
  position: sticky;
  bottom: 0px;
}

footer > div > div {
  background-color: #b3ccff;
  color: #1a3264;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 5px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.675);
}

main {
  background-color: var(--cor5);
  min-height: 600px;
  background-color: #1a3264;
}

header {
  position: sticky;
  top: 0px;
}

body {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
}

input {
  border-radius: 8px;
  border: none;
}

textarea {
  border-radius: 8px;
}

button {
  width: fit-content;
}

footer > div > div > div > a {
  text-decoration: none;
  color: #1a3264;
  font-size: 0.8em;
}

footer > div > div > div > img {
  width: 30px;
}

.bar {
  position: sticky;
  top: 20px;
  background-color: rgb(255, 255, 255);
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bar > div > a > img {
  height: 10vh;
}

.titi {
  font-family: aBlackLives;
}

.titi2 {
  font-family: aBlackLives;
  color: white;
  background-color: #063aa992;
  border-radius: 10px;
  text-shadow: 0 1px 0 #ccc, 1px 2px 0 #c9c9c9, 2px 3px 0 #bbb,
    3px 4px 0 #b9b9b9, 4px 5px 0 #aaa, 5px 6px 1px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3),
    0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}

.texto {
  font-family: Interphases;
  text-shadow: #063aa9 3px 1px 3px;
}

.texto2 {
  font-family: Interphases;
  color: white;
}

.esp {
  font-family: Esp;
  text-shadow: #063aa9 3px 1px 3px;
}

.artigo {
  font-family: Avalon;
  border-radius: 25px;
  padding: 25px;
  /* box-shadow: 0px 0px 10px rgb(218, 218, 218); */
  gap: 20px;
  max-width: 900px;
  background-color: #678bdf;
  color: white;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.artigo2 {
  display: flex;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  width: 90%;
  align-items: center;
  margin-bottom: 15px;
  padding: 1em;
}

.artigo2 > img {
  border-radius: 10px;
  width: 50%;
  padding: 10px;
}

.artigo2 > div {
  padding: 0 40px;
  text-align: center;
  
}



.content {
  margin-right: auto;
  margin-left: auto;
  background-image: url("./img/Abstract-Geometric-hector-j-rivas.jpg");
  background-size: cover;
  max-height: 400px; /* You must set a specified height */
  background-position: center; /* Center the image */
  border-radius: 10px;
  max-width: 900px;
  margin-bottom: 20px;
}

.content > p {
  width: "100%";
}

.caixa {
  width: 85%;
  max-width: 500px;
}

.caixa2 {
  display: flex;
  text-align: center;
  flex-direction: column;
  max-width: 1000px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.75em;
}

.videos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1200px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 15px;
}

.videos > div {
  display: flex;
  justify-content: center;
  vertical-align: middle;
  gap: 15px;
}

.videos > div > img {
  width: 100%;
  object-fit: contain;
}

.videos > div > iframe {
  width: 100%;
  object-fit: contain;
}

.videos > video {
  object-fit: contain;
}

.hor-center {
  display: flex;
  padding: 10px;
  gap: 10px;
  margin: 10px;
  text-align: center;
  justify-content: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
}

.borderR20px {
  border-radius: 10px;
}

.vert-center {
  padding: 0 20px;
}

.img_home {
  max-width: 400px;
  min-width: 200px;
  width: 90%;
  border-radius: 20px;
  box-shadow: 0px 0px 5px rgb(78, 78, 78);
  margin: 10px;
}

.artigo > img {
  width: 100%;
  max-width: 300px;
  align-self: flex-start;
  border-radius: 20px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}

.bar {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #eaf1ff;
  padding: 0px 10px;
  box-shadow: 5px 0px 15px rgba(0, 0, 0, 0.675);
}

.port {
  width: 80%;
  max-width: 500px;
}

.clic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.clic > img {
  width: 100%;
  max-width: 1000px;
  border-radius: 10px;
}

#maintext {
  max-width: 600px;
  font-weight: bold;
  font-size: 1.2em;
  color: rgb(255, 255, 255);
  -webkit-text-stroke: 0.25px black;
  text-align: justify;
  margin-right: auto;
  margin-left: auto;
}

#maintext2 {
  margin-top: 25px;
  font-size: 2em;
  font-weight: bold;
  font-size: 1.5em;
  color: rgb(255, 255, 255);
  -webkit-text-stroke: 0.25px black;
  padding: 10px;
}

#contact {
  background-color: #678bdf;
}

#navbarNav > ul {
  gap: 1em;
}

#email {
  margin-right: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  max-width: 350px;
  gap: 15px;
  margin-bottom: 20px;
}

#contatos {
  display: flex;
  font-size: 1em;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

#contatos > div > a > img {
  width: 10%;
  min-width: 50px;
}

#wsp {
  width: 40px;
}