body {
	background-color: #1F282F; 
	background-image: url('img/fundo.jpg'); /* Definir imagem */
    background-size: cover; /* Ajustar para cobrir toda a tela */
    background-position: center; /* Centralizar imagem */
    background-repeat: no-repeat; /* Evitar repetição */
    background-attachment: fixed; /* Fixa o fundo ao rolar a página */
    font-family: "ring", sans-serif;
}


table tr td{
	border: 5px solid black;
	padding: 5px;             /* Reduzindo o preenchimento (padding) */
	min-height: 0px;            /* Garante que não haja altura mínima nas células */
}

table{
	width: 10%; 
	margin: auto; 

}

.img1 {
  width: 1354px;               /* altura da tabela*/
  height: 548px;               /* largura da tabela*/
  transform: rotate(0deg);   /*rotacione a imagem*/
  border-radius: 30px;         /*arredonda as bordas da imagem*/
  display: block;              /* o elemento ocupa toda a largura, empurra outros elementos para baixo */
  margin-left: auto;           /* alinhamento a esquerda */
  margin-right: auto;          /* alinhamento a direita */
  margin-top: auto;            /* alinhamento no topo*/
  margin-bottom: auto;         /* alinhamento em baixo*/
}
  

.img2{
  width: 485px;               /* altura da tabela*/
  height: auto;               /* largura da tabela*/
  transform: rotate(0deg);   /*rotacione a imagem*/
  border-radius: 30px;         /*arredonda as bordas da imagem*/
  display: block;              /* o elemento ocupa toda a largura, empurra outros elementos para baixo */
  margin-left: auto;           /* alinhamento a esquerda */
  margin-right: auto;          /* alinhamento a direita */
  margin-top: auto;            /* alinhamento no topo*/
  margin-bottom: 20px;         /* alinhamento em baixo*/
  border-image: 5px solid black;
}

.tamanho1 {
  text-align: center;
  border-radius: 100px; /* Bordas arredondadas */
  width: 1200px;
  background-color: rgba(255, 0, 0, 0.6); /*com 50% de transparência */
  padding: 10px;
}

.tamanho2 {
  border-collapse: collapse; /* Remove espaços extras entre as células */
  padding: 0px;             /* Reduzindo o preenchimento (padding) */
  min-height: 0px;            /* Garante que não haja altura mínima nas células */
  padding: 10px;
  vertical-align: middle; /* Alinha conteúdo verticalmente ao centro */
  border-radius: 100px; /* Bordas arredondadas */
  background-color: rgba(255, 0, 0, 0.6); /*com 50% de transparência */
}

.tamanho3, td{
  width: 1000px;
  text-align: center;
  margin: 20px auto; 
  border-radius: 100px; /* Bordas arredondadas */
  padding-right: 10px; /* Espaço entre a imagem e o texto */
  background-color: rgba(255, 0, 0, 0.6); /*com 50% de transparência */
}

.tamanho4, td{
  width: 1000px;
  text-align: center;
  margin: 20px auto; 
  border-radius: 100px; /* Bordas arredondadas */
  padding-right: 10px; /* Espaço entre a imagem e o texto */
  background-color: rgba(255, 0, 0, 0.6); /*com 50% de transparência */
}

.tamanho5{
  border-radius: 100px; /* Bordas arredondadas */
  width: 1354px;               /* altura da tabela*/
  height: 548px;               /* largura da tabela*/
  display: block;              /* o elemento ocupa toda a largura, empurra outros elementos para baixo */
  margin-left: auto;           /* alinhamento a esquerda */
  margin-right: auto;          /* alinhamento a direita */
  margin-top: auto;            /* alinhamento no topo*/
  margin-bottom: auto;         /* alinhamento em baixo*/
  text-align: center;
  vertical-align: middle;
  background-color: rgba(255, 0, 0, 0.6); /*com 50% de transparência */
}

@font-face {
    font-family: "ring";
    src: url("fontes/ring.ttf") format("truetype");
}

h1{ 
  font-family: "ring", system-ui;
  src:url("fontes/ring.ttf") format("truetype");
  font-weight: 40px;
  font-style: normal;
}

.texto1 {
    color: white;
    font-size: 33px;
    font-weight: bold;	
    margin-bottom: 20px;

}

.texto2 {
    color: white;
    font-size: 38px;
    font-weight: bold;
    font-style: italic;
    text-align: center;	
    vertical-align: middle; /* Alinha o texto ao centro verticalmente */	

}

.texto3 {
    color: white;
    font-size: 34px;
    text-align: center;
    width: 1120px;
    vertical-align: middle; /* Alinha o texto ao centro verticalmente */

}

.texto4 {
   color: white;
    font-size: 34px;
    text-align: center;
    width: auto;
}

img {
	width: 1354px;               /* altura da tabela*/
	height: 550px;               /* largura da tabela*/
	transform: rotate(0deg);   /*rotacione a imagem*/
	border-radius: 30px;         /*arredonda as bordas da imagem*/
	display: block;              /* o elemento ocupa toda a larguro, empurra outros elementos para baixo */
	margin-left: auto;           /* alinhamento a esquerda */
	margin-right: auto;          /* alinhamento a direita */
	margin-top: auto;            /* alinhamento no topo*/
	margin-bottom: auto;         /* alinhamento em baixo*/
}

/* From Uiverse.io by ernestnash */ 
.btn {
 display: inline-block;
 padding: 0.9rem 1.8rem;
 font-size: 16px;
 font-weight: 700;
 color: white;
 border: 3px solid rgb(252, 70, 100);
 cursor: pointer;
 position: relative;
 background-color: transparent;
 text-decoration: none;
 overflow: hidden;
 z-index: 1;
 font-family: inherit;
}

.btn::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgb(252, 70, 100);
 transform: translateX(-100%);
 transition: all .3s;
 z-index: -1;
}

.btn:hover::before {
 transform: translateX(0);
}

.btn {
 display: inline-block;
 padding: 0.9rem 1.8rem;
 font-size: 16px;
 font-weight: 700;
 color: white;
 border: 3px solid rgb(252, 70, 100);
 cursor: pointer;
 position: relative;
 background-color: transparent;
 text-decoration: none;
 overflow: hidden;
 z-index: 1;
 font-family: inherit;
}

.btn::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgb(252, 70, 100);
 transform: translateX(-100%);
 transition: all .3s;
 z-index: -1;
}

.btn:hover::before {
 transform: translateX(0);
}

.btn {
 display: inline-block;
 padding: 0.9rem 1.8rem;
 font-size: 16px;
 font-weight: 700;
 color: white;
 border: 3px solid rgb(252, 70, 100);
 cursor: pointer;
 position: relative;
 background-color: transparent;
 text-decoration: none;
 overflow: hidden;
 z-index: 1;
 font-family: inherit;
}

.btn::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgb(252, 70, 100);
 transform: translateX(-100%);
 transition: all .3s;
 z-index: -1;
}

.btn:hover::before {
 transform: translateX(0);
}

.btn {
 display: inline-block;
 padding: 0.9rem 1.8rem;
 font-size: 16px;
 font-weight: 700;
 color: white;
 border: 3px solid rgb(252, 70, 100);
 cursor: pointer;
 position: relative;
 background-color: transparent;
 text-decoration: none;
 overflow: hidden;
 z-index: 1;
 font-family: inherit;
}

.btn::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgb(252, 70, 100);
 transform: translateX(-100%);
 transition: all .3s;
 z-index: -1;
}

.btn:hover::before {
 transform: translateX(0);
}

.btn {
 display: inline-block;
 padding: 0.9rem 1.8rem;
 font-size: 16px;
 font-weight: 700;
 color: white;
 border: 3px solid rgb(252, 70, 100);
 cursor: pointer;
 position: relative;
 background-color: transparent;
 text-decoration: none;
 overflow: hidden;
 z-index: 1;
 font-family: inherit;
}

.btn::before {
 content: "";
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgb(252, 70, 100);
 transform: translateX(-100%);
 transition: all .3s;
 z-index: -1;
}

.btn:hover::before {
 transform: translateX(0);
}

a:hover {
  color: black;
  text-decoration: none;
  background-color: black;
  width: 90px 
}

.fundo {
    background-image: url('fundo.jpg');
    background-size: cover; /* Ajusta a imagem para cobrir todo o fundo */
    background-position: center; /* Centraliza a imagem no fundo */
    height: 100vh; /* Define a altura do fundo como 100% da altura da tela */
    color: white; /* Muda a cor do texto para branco */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    text-align: center; /* Centraliza o texto */
}