@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap");

* {
  padding: 0; /*padding da página começa com 0*/
  margin: 0; /*margem da pádgina comeaça com 0*/
  font-family: "Poppins", sans-serif;
} /*fonte de todo conteúdo*/

.bg {
  animation: slide 3s ease-in-out infinite alternate; /*define a aniamção e 3 segundos do fundo da página*/
  background-image: linear-gradient(
    -60deg,
    rgb(225, 237, 255) 50%,
    rgb(136, 164, 241) 50%,
    rgb(119, 194, 245) 50%
  ); /*cores definidas para o fundo da página*/
  bottom: 0; /*botton inicia em 0*/
  left: -50%; /*animação começa a esquerda da página em -50%*/
  opacity: 0.5; /*opacidade da animação*/
  position: fixed; /*posição fixa quando usamos a rolagem da página*/
  right: -50%; /*animação inicia a direita -50%*/
  top: 0; /*topo da animação em 0*/
  z-index: -1;
} /*animação fica por baixo de todos os elementos*/

.bg2 {
  animation-direction: alternate-reverse; /*animação vai e volta na página*/
  animation-duration: 4s;
} /*duração de 4 segundos*/

.bg3 {
  animation-duration: 5s;
} /*duração de 5 segundos*/

@keyframes slide {
  0% {
    transform: translateX(-25%);
  } /*slide do fundo inicia em -25% fora da página*/
  100% {
    transform: translateX(25%);
  }
} /*slide inicia em 25% na página*/

/*caixa dos botões*/
.barra {
  padding: 2px;
  float: right;
  justify-content: center;
  width: 45%;
  height: 35px;
  display: flex;
  margin-top: -89px;
  gap: 6px;
}

/*botão de cadastro*/
.bnt {
  height: 30px;
  width: 100px;
  display: inline-block;
  outline: none;
  cursor: pointer;
  font-weight: 600;
  border-radius: 3px;
  padding: 10px 22px;
  border: 0;
  color: #3a4149;
  background: #e7ebee;
  line-height: 0.9;
  font-size: 12px;
}

.bnt:hover {
  transition: all 0.1s ease;
  box-shadow: 0 0 0 0 #fff, 0 0 0 3px #1de9b6;
}

/*botão login*/
.bnt2 {
  height: 30px;
  width: 100px;
  display: inline-block;
  outline: none;
  cursor: pointer;
  font-weight: 600;
  border-radius: 3px;
  padding: 10px 22px;
  border: 0;
  color: #3a4149;
  background: #e7ebee;
  line-height: 0.9;
  font-size: 12px;
}

.bnt2:hover {
  transition: all 0.1s ease;
  box-shadow: 0 0 0 0 #fff, 0 0 0 3px #1de9b6;
}

header {
	padding: 2px;
  text-align: center; /*centraliza o texto*/
  width: 100%; /*tamanho do campo header*/
  font-size: 28px; /*tamanho da fonte do header*/
}

.container {
  width: auto; /*tamanho do container automatico*/
  height: auto;
} /*altura do container automatico*/

.temas {
  display: grid; /*permite colocar celulas dentro da grade*/
  height: auto; /*altura automatica*/
  width: auto; /*altura automatica*/
  margin: 10px; /*margem entre os elementos em 10px*/
  grid-template-columns: repeat(1, 1fr); /* largura da colunas em fração*/
  grid-template-rows: 150px 150px 150px 150px 150px 150px 150px 150px 150px 150px 150px 150px; /*tamanho de cada elemento em px*/
  gap: 150px; /* distançia das colunas e linhas*/
  padding: 30px; /*distancia de dentro de cada elemento do seu conteudo*/
}
.card {
  position: relative;
  width: 100%;
  height: 180%;
  background-color: #000;
  overflow: hidden;
}
.card_image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  scale: 1.15;
  transition: opacity 0.25s, scale 0.35s;
}
.card:hover .card_image {
  opacity: 0.5;
  scale: 1;
}
.card_body {
  position: absolute;
  inset: 0;
  padding: 50px;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 15px;
  justify-content: center;
}
.card_body::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 2px solid #fff;
  opacity: 0;
  scale: 1.25;
  transition: opacity 0.25s, scale 0.25s;
}
.card:hover .card_body::before {
  opacity: 1;
  scale: 1;
}
.card_tittle {
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}
.card_description {
  font-size: 14px;
  opacity: 0;
  translate: -25px;
  transition: opacity 0.25s, translate 0.25s;
}
.card:hover .card_description {
  opacity: 1;
  translate: 0;
}
.item {
  width: 100%; /*tamanho do bloco para conteúdo*/
  height: 100%; /*altura do bloco para conteúdo*/
  display: block; /*permite ocupar toda linha horizontalmente*/
  border-radius: 0.25em; /*raio da borda em "em"*/
  box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25); /*sombra do elemento*/
  box-sizing: border-box; /*permite calcular o tamanho total do elemento*/
  padding: 3px;
} /*padding de dentro do elemento*/

.imgmenu {
  width: 100%; /*tamanho do bloco de conteúdo*/
  height: 100%; /*altura do bloco de conteúdo*/
  transition: all 0.5s; /*transição de 0.5 segundos*/
  cursor: pointer;
} /*muda o cursor quando mouse passa por cima do elemento*/

.letra {
  width: 100%; /*tamanho do bloco do conteúdo*/
  height: 7%; /*altura do bloco de conteúdo*/
  padding-top: 7%;
} /*padding interno do conteúdo*/

h2 {
  text-align: center; /*centralizao o texto*/
  margin-top: -6%;
} /*margem do topo do texto*/

.imgmenu:hover {
  -webkit-transform: scale(
    1.1
  ); /*aumenta a imagem em 10% com o mouse passando em cima*/
  transform: scale(1.1);
} /*aumenta a imagem em 10% com o mouse passando em cima*/

/********************************************Media Query Tablet**************************************************************/

@media screen and (min-width: 600px) {
  /*tamanho do @media*/

  * {
    padding: 0; /*padding inicia em 0*/
    margin: 0;
  } /*margem inicia em 0*/
  .bg {
    animation: slide 3s ease-in-out infinite alternate; /*animação do slide definido em 3s*/
    background-image: linear-gradient(
      -60deg,
      rgb(225, 237, 255) 50%,
      rgb(136, 164, 241) 50%,
      rgb(119, 194, 245) 50%
    ); /*cores do gradiente dos elementos da animação*/
    left: -50%; /*animação inicia em -50 fora da página*/
    opacity: 0.5; /*opacidade da animação*/
    position: fixed; /*ao rolar a página o elemento fica fixo*/
    right: -50%; /*elemento deslocado a direita fora da página*/
    top: 0; /*elemento inicia com topo 0*/
    z-index: -1;
  } /*elemento fica por baixo de todos os outros elementos da página*/

  .bg2 {
    animation-direction: alternate-reverse; /*elemento vai e volta na página*/
    animation-duration: 4s;
  } /*duração da animação 4s*/

  .bg3 {
    animation-duration: 5s;
  } /*duração da animação 5s*/

  @keyframes slide {
    0% {
      transform: translateX(-25%);
    } /*transform inicia no eixo 0 e vai até o -25*/
    100% {
      transform: translateX(25%);
    }
  } /*transform inicia no exito 100% e vai até 25%*/

  /*caixa dos botões*/
  .barra {
	padding: 2px;
    float: right;
    justify-content: center;
    width: 28%;
    height: 35px;
    display: flex;
    margin-top: -85px;
    gap: 6px;
  }

  /*botão de cadastro*/
  .bnt {
    height: 30px;
    width: 100px;
    display: inline-block;
    outline: none;
    cursor: pointer;
    font-weight: 600;
    border-radius: 3px;
    padding: 10px 22px;
    border: 0;
    color: #3a4149;
    background: #e7ebee;
    line-height: 0.9;
    font-size: 12px;
  }

  .bnt:hover {
    transition: all 0.1s ease;
    box-shadow: 0 0 0 0 #fff, 0 0 0 3px #1de9b6;
  }

  /*botão login*/
  .bnt2 {
    height: 30px;
    width: 100px;
    display: inline-block;
    outline: none;
    cursor: pointer;
    font-weight: 600;
    border-radius: 3px;
    padding: 10px 22px;
    border: 0;
    color: #3a4149;
    background: #e7ebee;
    line-height: 0.9;
    font-size: 12px;
  }

  .bnt2:hover {
    transition: all 0.1s ease;
    box-shadow: 0 0 0 0 #fff, 0 0 0 3px #1de9b6;
  }

  header {
    text-align: center; /*centraliza o texto da header*/
    width: 100%;
  } /*tamanho da header*/

  .container {
    width: 98%; /*tamanho do container*/
    height: 100%; /*altura do container*/
    padding: 10px;
  } /*padding dos elementos*/

  .temas {
    width: auto; /*tamanho do bloco do conteúdo*/
    height: auto; /*altura do bloco do conteúdo*/
    margin: 10px; /*margem referente a borda*/
    display: grid; /*permite colocar celulas dentro da grade*/
    grid-template-columns: repeat(2, 1fr); /* largura da colunas em fração*/
    grid-template-rows: 200px 200px 200px 200px 200px 200px 20px; /*tamanho das imagens*/
    gap: 90px 30px; /* distançia das colunas e linhas*/
    padding: 5px;
  } /*padding de cada conteúdo*/

  .card {
    position: relative;
    width: 100%;
    height: 130%;
    background-color: #000;
    overflow: hidden;
  }
  .card_image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    scale: 1.15;
    transition: opacity 0.25s, scale 0.35s;
  }
  .card:hover .card_image {
    opacity: 0.5;
    scale: 1;
  }
  .card_body {
    position: absolute;
    inset: 0;
    padding: 50px;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 15px;
    justify-content: center;
  }
  .card_body::before {
    content: "";
    position: absolute;
    inset: 20px;
    border: 2px solid #fff;
    opacity: 0;
    scale: 1.25;
    transition: opacity 0.25s, scale 0.25s;
  }
  .card:hover .card_body::before {
    opacity: 1;
    scale: 1;
  }
  .card_tittle {
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  }
  .card_description {
    font-size: 14px;
    opacity: 0;
    translate: -25px;
    transition: opacity 0.25s, translate 0.25s;
  }
  .card:hover .card_description {
    opacity: 1;
    translate: 0;
  }
  .item {
    width: auto; /*tamanho do item*/
    height: auto; /*altura do item*/
    border-radius: 0.25em; /*borda do elemento raio "em"*/
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25); /*sombra do elemento*/
    box-sizing: border-box; /*define o tamanho do elemento e seu conteúdo*/
    padding: 1px; /*padding de distancia do elemento*/
    margin-top: 13px;
  } /*margem do topo do conteúdo*/

  .imgmenu {
    width: 100%; /*tamanho na página deste elemento*/
    height: 100%; /*altura na página deste elemento*/
    transition: all 0.5s; /*transição do elemento*/
    cursor: pointer;
  } /*muda o cursor ao passar o mouse por cima de um elemento*/

  .letra {
    display: grid; /*permite colocar varias celulas dentro da grade*/
    width: 100%; /*tamanho do bloco a ser usado*/
    height: auto; /*altura do bloco a ser usado*/
    padding-top: 6%;
  } /*distancia do topo da página*/

  h2 {
    display: block; /*permite que o elemente inicie em uma nova linha ocupado todo o conteudo horizontalmente*/
    text-align: center;
  } /*centraliza o texto*/

  .imgmenu:hover {
    -webkit-transform: scale(1.1); /*aumenta a imagem com zoom de 10%*/
    transform: scale(1.1);
  } /*aumenta a imagem com zoom de 10%*/
}
/******************************************Media Query PC*********************************************************************/

@media screen and (min-width: 998px) {
  /*tamanho do @media*/

  * {
    padding: 0; /*padding inicia em 0*/
    margin: 0;
  } /*margin inicia em 0*/

  .bg {
    animation: slide 3s ease-in-out infinite alternate; /*slide com animação infinita*/
    background-image: linear-gradient(
      -60deg,
      rgb(225, 237, 255) 50%,
      rgb(136, 164, 241) 50%,
      rgb(119, 194, 245) 50%
    ); /*cores de cada elemento*/
    left: -50%; /*animação começa a esquerda -50 fora da pagina*/
    opacity: 0.5; /*opacidade do elemento*/
    position: fixed; /*usando scroll a posição fica fixa na página*/
    right: -50%; /*elemento colocado -50 fora da página a direita*/
    top: 0; /*elemento inicia no topo da página*/
    z-index: -1;
  } /*elemento fica por baixo de todo conteúdo da página*/

  .bg2 {
    animation-direction: alternate-reverse; /*animação vai e volta inifitas vezes*/
    animation-duration: 4s;
  } /*animação com duração de 4s*/

  .bg3 {
    animation-duration: 5s;
  } /*animação com duração de 5s*/

  @keyframes slide {
    0% {
      transform: translateX(-25%);
    } /*elemento inicia em 0% e se desloca horizontalmente em 25%* para a direita*/
    100% {
      transform: translateX(25%);
    }
  } /*ao final o elemento e deslocado horizontalmente para a direita*/

  /*caixa dos botões*/
  .barra {
    float: right;
    justify-content: center;
    width: 20%;
    height: 35px;
    display: flex;
    margin-top: -85px;
    gap: 6px;
  }

  /*botão de cadastro*/
  .bnt {
    height: 30px;
    width: 100px;
    display: inline-block;
    outline: none;
    cursor: pointer;
    font-weight: 600;
    border-radius: 3px;
    padding: 10px 22px;
    border: 0;
    color: #3a4149;
    background: #e7ebee;
    line-height: 0.9;
    font-size: 12px;
  }

  .bnt:hover {
    transition: all 0.1s ease;
    box-shadow: 0 0 0 0 #fff, 0 0 0 3px #1de9b6;
  }

  /*botão login*/
  .bnt2 {
    height: 30px;
    width: 100px;
    display: inline-block;
    outline: none;
    cursor: pointer;
    font-weight: 600;
    border-radius: 3px;
    padding: 10px 22px;
    border: 0;
    color: #3a4149;
    background: #e7ebee;
    line-height: 0.9;
    font-size: 12px;
  }

  .bnt2:hover {
    transition: all 0.1s ease;
    box-shadow: 0 0 0 0 #fff, 0 0 0 3px #1de9b6;
  }

  header {
    text-align: center; /*centraliza o texto*/
    width: 100%;
  } /*tamanho do bloco de conteúdo*/

  .container {
    width: auto; /*tamanho do container*/
    height: auto;
  } /*altura do container*/
  .temas {
    width: auto; /*tamanho do conteudo*/
    height: auto; /*altura do conteudo*/
    margin: 10px; /*margem de distancia do conteudo com a margem da página*/
    display: grid; /*permite colocar varias celulas dentro da grade*/
    grid-template-columns: repeat(3, 1fr); /* largura da colunas em fração*/
    grid-template-rows: 250px 250px 250px 250px 40px; /*tamanho das imagens dentro da grade*/
    gap: 50px 30px; /* distancia das colunas e linhas*/
    padding: 20px;
  } /*padding de distancia entre conteudo*/
  .card {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
  }
  .card_image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    scale: 1.15;
    transition: opacity 0.25s, scale 0.35s;
  }
  .card:hover .card_image {
    opacity: 0.5;
    scale: 1;
  }
  .card_body {
    position: absolute;
    inset: 0;
    padding: 50px;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 15px;
    justify-content: center;
  }
  .card_body::before {
    content: "";
    position: absolute;
    inset: 20px;
    border: 2px solid #fff;
    opacity: 0;
    scale: 1.25;
    transition: opacity 0.25s, scale 0.25s;
  }
  .card:hover .card_body::before {
    opacity: 1;
    scale: 1;
  }
  .card_tittle {
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
  }
  .card_description {
    font-size: 14px;
    opacity: 0;
    translate: -25px;
    transition: opacity 0.25s, translate 0.25s;
  }
  .card:hover .card_description {
    opacity: 1;
    translate: 0;
  }

  .item {
    width: 100%; /*tamanho do conteudo*/
    height: 100%; /*altura do conteudo*/

    border-radius: 0.25em; /*raio da borda em "em"*/
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25); /*sombra do conteudo*/
    box-sizing: border-box; /*permite definir altura e largura de todos os elementos*/
    padding: 3px;
  } /*padding de espaço entre o elemento*/

  .imgmenu {
    width: 100%; /*tamanho da página de conteudo*/
    height: 100%; /*altura da página de conteudo*/
    transition: all 0.5s; /*transição de todo conteudo em 0.5s*/
    cursor: pointer;
  } /*ao passar o mouse por cima o cursor muda*/

  .letra {
    width: 100%; /*tamanho da página de conteudo*/
    height: 7%; /*altura da página de conteudo*/
    padding-top: 7%;
  } /*padding do topo do conteudo*/

  h2 {
    text-align: center; /*centraliza o texto*/
    margin-top: -6%;
  } /*margem do topo do texto*/

  .imgmenu:hover {
    -webkit-transform: scale(1.1); /*aumenta a imagem com zoom de 10%*/
    transform: scale(1.1);
  } /*aumenta a imagem com zoom de 10%*/
}