/* Adicionando Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css');

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Federo&family=Limelight&family=Sriracha&display=swap');

.retro-title {
  font-family: 'Limelight', cursive; /* Fonte pixelada */
  font-size: 48px;
  color: #ff4500; /* Laranja vibrante */
  text-shadow: 3px 3px 0 #ffd700, 6px 6px 0 #00bfff; /* Sombras coloridas */
  animation: float 3s ease-in-out infinite;
  margin-bottom: 40px;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* Movimento de flutuação */
  }
}

nav ul li {
    display: inline-block;
    margin: 0 10px;
    background: #3038d6;
    border: 4px ridge;
    padding: 4px 8px;
    box-shadow: 2px 2px 2px #333;
    font-family: 'Sriracha', cursive;
    font-size: 18px;
}

/* Estilos gerais */
body {
    display: grid;
    place-items: center; /* Center content horizontally and vertically */
    text-align: center; /* Ensure text is centered */
    font-family: 'Federo', cursive;
    color: #ffffff;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-image: url('imagens/background.jpg'); /* Imagem de fundo */
    background-size: cover; /* Cobrir toda a tela */
    background-position: center; /* Centralizar a imagem */
    background-attachment: fixed; /* Fundo fixo ao rolar */
}

p {
    font-size: 1.4em; /* Increase font size */
}

.cont {
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
    justify-content: center; /* Center content vertically */
    text-align: center; /* Center-align text */
    margin: 0 auto; /* Center horizontally */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo semi-transparente para melhor legibilidade */
    border-radius: 8px;
}

header {
    text-align: center;
    margin-bottom: 60px;
}

header h1 {
    font-size: 3em;
    font-weight: 700;
    margin: 0;
    color: #ff6f61;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 20px 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 400;
}

nav ul li a:hover {
    color: #ff6f61;
    text-decoration: underline;
}

/* Estilos para a tooltip */

.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip-text {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 10px 20px;
  position: absolute;
  z-index: 1;
  bottom: 150%; /* Aumente o valor para afastar o tooltip para cima */
  left: 50%;
  transform: translateX(-50%); /* Centraliza o tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.hero {
    text-align: center;
    margin-bottom: 80px;
}

.hero h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #ff6f61;
    font-family: 'Federo', cursive;
}

.gallery h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: #ff6f61;
    font-family: 'Federo', cursive;
}

.hero p {
    font-size: 1.2em;
    color: #cccccc;
}

.gallery {
    margin-bottom: 80px;
}

.gallery h2 {
    font-size: 2em;
    margin-bottom: 40px;
    text-align: center;
    color: #ff6f61;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    grid-template-rows: repeat(2, auto); /* 2 rows */
    gap: 20px;
}

.gallery-item {
    background-color: rgba(42, 42, 42, 0.8); /* Fundo semi-transparente */
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* Cria um contexto de posicionamento */
    display: inline-block; /* Faz o contêiner se ajustar ao tamanho da imagem */
}

.image-text {
    position: absolute; /* Posiciona o texto sobre a imagem */
    top: 50%; /* Alinha o texto ao centro verticalmente */
    left: 50%; /* Alinha o texto ao centro horizontalmente */
    transform: translate(-50%, -80%); /* Centraliza o texto */
    color: gray; /* Cor do texto */
    font-size: 36px; /* Tamanho da fonte */
    font-family: 'Federo', cursive; /* Fonte do texto */
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */
    padding: 10px; /* Espaçamento interno */
    border-radius: 5px; /* Bordas arredondadas */
  }

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
}

.gallery-item img {
    width: 400px; /* Fixed width */
    height: 300px; /* Fixed height */
    object-fit: cover; /* Ensures the image fits within the dimensions */
    border-radius: 8px;
    opacity: 0.5;
}

.gallery-item p {
    font-size: 1em;
    color: #cccccc;
    margin-top: 10px;
}

footer {
    display: grid;
    place-items: center; /* Center footer content */
    text-align: center; /* Ensure footer text is centered */
    text-align: center;
    margin-top: 80px;
    padding: 20px 0;
    border-top: 1px solid #444444;
    color: #cccccc;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semi-transparente */
}

footer p {
    margin: 10px 0;
    font-size: 0.9em;
}

.links {
    font-family: 'Audiowide', cursive; /* Change font to Audiowide */
    font-size: 80px;
    background-image: linear-gradient(rgb(247, 223, 87) 31%, rgb(226, 111, 104) 31%, rgb(226, 111, 104) 45%, rgb(148, 122, 244) 45%, rgb(148, 122, 244) 55%, rgb(143, 161, 244) 55%, rgb(143, 161, 244) 58%, rgb(148, 122, 244) 58%, rgb(148, 122, 244) 61%, rgb(143, 161, 244) 61%);
    background-clip: text; /* Clip the background to the text */
    -webkit-background-clip: text; /* Webkit-specific background clipping */
    color: transparent; /* Make the text itself transparent */
    -webkit-text-fill-color: transparent; /* Ensure text fill is transparent for Webkit browsers */
    text-align: center; /* Center-align text */
    filter: drop-shadow(rgb(0, 0, 0) 1px 1px 1px); /* Add shadow for better visibility */
    position: relative;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Adjust for perfect centering */
}

.social-links {
    margin-bottom: 20px;
}

.social-links a {
    color: #ffffff; /* Ícones brancos */
    text-decoration: none;
    margin: 0 10px;
    font-size: 1.5em;
    transition: color 0.3s ease;
}

.social-links a[href="https://backloggd.com/u/MisterBelleza/"] img {
    position: relative;
    top: -6px; /* Move the icon slightly upward to align with others */
}

social-links a:hover {
    color: #ff6f61; /* Cor ao passar o mouse */
}

.post {
    position: relative;
    margin: 0 0 80px 80px;
    padding: 1em;
    padding-bottom: 2em;
    border: 1px solid black;
    background: #dbffff;
    box-shadow: 5px 5px #38ffcc;
    z-index: 5;
    overflow: visible;
    display: block;
    unicode-bidi: isolate;
}

.postbox {
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space between text and image */
    align-items: center; /* Vertically align content */
    position: relative;
    margin: 0 0 0 0; 
    padding: 0;
    width: 70%; /* Adjust width */
    height: 150px; /* Adjust height */
    border-radius: 8px; /* Rounded corners */
}

img.post {
    max-width: 150px; /* Limit image width */
    width: 200px !important; /* Adjust image width */
    height: auto; /* Maintain aspect ratio */
    border: 1px solid #000000; /* Black border */
    box-shadow: none; /* Cyan shadow */
    border-radius: 4px; /* Slightly rounded corners */
    position: absolute;
    margin: auto auto auto -188px;
    background: none;
    z-index: 50;
    padding: 0%;
}

.postbox .post {
    flex: 1; /* Allow text to take remaining space */
    width: 100%; /* Ensure text takes full width */
    max-width: 100%; /* Ensure responsiveness */
    margin: 0; /* Remove default margin */
    position: relative;
    z-index: 2; /* Higher stacking order for the image */
}

.post h4 {
    font-family: 'Press Start 2P', cursive; /* Pixelated font */
    font-size: 1.2em; /* Adjust font size */
    color: #000000; /* Black text */
    margin: 0 0 10px 0; /* Adjust spacing */
}

@media (max-width: 800px) {

    @font-face {
        font-family: "myFedero-Regular";
        src: url("font/Federo/Federo-Regular.ttf");
    }

    @font-face {
        font-family: "myLimelight-Regular";
        src: url("font/Limelight/Limelight-Regular.ttf");
    }

    @font-face {
        font-family: "mySriracha-Regular";
        src: url("font/Sriracha/Sriracha-Regular.ttf");
    }

    .container {
        width: 100%; /* Use full width on mobile */
        padding: 10px;
    }

    .retro-title {
        font-size: 32px; /* Reduce title size */
    }

    .gallery-grid {
        grid-template-columns: 1fr; /* Single column layout */
        grid-template-rows: auto; /* Adjust rows automatically */
    }

    .gallery-item img {
        width: 100%; /* Make images responsive */
        height: auto;
        font-family: 'Federo', cursive !important;
    }

    header h1 {
        font-size: 2em; /* Adjust header size */
    }

    .hero h2 {
        font-size: 1.8em; /* Adjust hero title size */
        font-family: 'Federo', cursive !important; /* Keep the same font as desktop */
    }

    .gallery h2 {
        font-size: 1.8em; /* Adjust gallery title size */
        font-family: 'Federo', cursive !important; /* Keep the same font as desktop */
    }

    .image-text {
        font-size: 24px; /* Adjust image text size */
        font-family: 'Federo', cursive !important; /* Keep the same font as desktop */
    }

    .hero p {
        font-size: 1em; /* Adjust hero paragraph size */
    }

    footer p {
        font-size: 0.8em; /* Adjust footer text size */
    }

    .social-links a {
        font-size: 1.2em; /* Adjust icon size */
    }

    nav ul li {
        margin: 10px 0; /* Add spacing between buttons */
        text-align: center; /* Center-align buttons */
        width: 85px; /* Set button width */
        font-family: 'Sriracha', cursive !important;
    }

    nav ul {
        padding: 0;
    }
}