@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');


* {
    margin: 0px;
    padding: 0px;
    font-family: 'Playfair',Arial, Helvetica, sans-serif;
}


:root {
    --font1: ('Playfair');

}

body {
    background-color: black;
    color: white;
    font-family: var(--font1);
}

header {
    height: 140px; 
    border-bottom: 1px solid #bea2009f /*#797979*/; 
    background-size: 100% 100%;
}

header > p{
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
    color: #797979;
   
}

h1#titulo {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 4em;
    text-align: center;
    color: #ffd700;
    text-shadow: 0px 0px 25px #ffd700,
    0px 0px 20px #53470054;
    /*text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5), 
    0px 0px 20px rgba(255, 255, 255, 0.3);*/
    font-family: 'Playfair';
}

section.pags{
    background-color: black;
    height: 150px; /*height: 150px width:150px esse deve ser o tamanho da img*/
    width: 150px;
    margin: 10px;
    border-radius: 50px;
    transition: transform 0.6s ease; /* Suaviza o movimento */
    transition: box-shadow 0.6s ease;
    
    
}

section.pags:hover{
    transform: translateY(-8px) translateX(10px);
    box-shadow: 0px 0px 25px #ffd700,
    0px 0px 20px #53470054;
    

}

div#container{
  /*feito no gpt, pois ainda não estudei flexbox*/

  display: flex; /* Ativa o Flexbox */
  flex-wrap: wrap; /* Permite quebrar linha (2 em 2) */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  gap: 10px; /* Espaçamento entre as divs */
  padding: 10px; /* Espaçamento interno */
}

img{
    height: 150px;
    width: 150px;
    border-radius: 50px;
}