/* style.css */

/* 1. Dichiarazione del font personalizzato */
@font-face {
    font-family: 'century-gothic'; /* Scegli un nome per il tuo font.
                                             Questo sarà il nome che userai nel resto del CSS. */
    src: url('fonts/fonnts.com-Century_Gothic_Pro.otf') format('opentype'); /* Percorso al file del font.
                                                             'format' aiuta il browser a capire che tipo di font è. */
    font-weight: normal; /* Specifica il peso (normale, grassetto, etc.) */
    font-style: normal;  /* Specifica lo stile (normale, corsivo, etc.) */
}

/* Impostazioni di base per resettare gli stili del browser */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #000000; /* Un colore di sfondo leggero */
}

/* Contenitore principale che occupa tutto lo schermo */
.container {
    display: flex;
    flex-direction: column; /* Impila gli elementi uno sopra l'altro */
    height: 100vh; /* Altezza pari al 100% della finestra del browser */
}

/* Stili per le due metà */
.top-half, .bottom-half {
    flex: 1; /* Fa in modo che ogni metà occupi lo stesso spazio (50%) */
    display: flex;
    justify-content: center; /* Centra orizzontalmente */
    align-items: center;    /* Centra verticalmente */
    overflow: hidden; /* Evita che contenuti troppo grandi escano dai bordi */
}

/* Stile per la metà inferiore */
.bottom-half {
    background-color: #000000; /* Sfondo bianco per staccare */
    font-family: century-gothic;
    display: flex;
    align-items: flex-start;
}

/* Stile per l'immagine */
.top-half img {
    max-width: 80%;       /* Larghezza massima rispetto al suo contenitore */
    max-height: 80%;      /* Altezza massima */
    object-fit: cover;    /* Mantiene le proporzioni e riempie lo spazio, tagliando se necessario */
    aspect-ratio: 1 / 1;  /* Forza l'immagine a mantenere un rapporto 1:1 (quadrato) */
    border-radius: 12px;  /* Angoli arrotondati */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Ombra per dare profondità */
}

/* Stile per il testo cliccabile */
.bottom-half a {
    text-decoration: none !important;
    font-size: 2rem; /* Dimensione del testo */
    color: #c8a55a;
    /* padding: 20px 40px;
    border: 2px solid #333;
    border-radius: 50px; */
    transition: all 0.3s ease;
}

/* Effetto al passaggio del mouse */
.bottom-half a:hover {
    color: #c8a55a;
    transform: translateY(-5px); /* Solleva leggermente il pulsante */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

#clickableText {
    padding-top: 10rem;
}

/* Media Query per schermi più piccoli (es. smartphone) */
@media (max-width: 600px) {
    .bottom-half a {
        font-size: 1.5rem; /* Riduciamo la dimensione del testo su mobile */
        padding: 15px 30px;
    }
}