/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Impostazioni generali */
body {
    margin: 0;
    padding: 0;
    font-family: "Pixel", monospace;
    color: white;
    background: url("background.png") no-repeat center center fixed; 
    background-size: cover;
}

/* Header */
.top-bar {
    top: 0;
    position: fixed;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 30px;
    letter-spacing: 2px;
    text-shadow: 0 0 5px black;
    background: rgba(0, 0, 0, 0.85);
    opacity: 0.6;
    box-sizing: border-box;
}

.top-bar .right {
  opacity: 1;
    display: flex;
    align-items: flex-start;
    gap: 0 20px;
}

.icon {
    width: 30px;
    height: 30px;
    opacity: 0.8;
}

/* Box centrale */
.center-box {
    width: 60%;
    margin: 100px auto;
    padding: 40px;
    background: rgba(20, 20, 20, 0.7);
    letter-spacing: 2px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
    text-align: center;
}

.url {
    font-size: 18px;
    margin-bottom: 20px;
    letter-spacing: 3px;
}

.title {
    font-size: 26px;
    margin-bottom: 40px;
}

/* Pulsante ENTER */
.enter-btn {
    margin: 0 auto;
    width: 240px;
    padding: 20px;
    font-size: 32px;
    border: 3px dashed white;
    cursor: pointer;
    transition: 0.2s;
    letter-spacing: 3px;
}

.enter-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.enter-link {
    text-decoration: none;
    color: inherit; /* mantiene il colore */
}


/* Avatar */
.avatar {
    width: 220px;
    margin-top: 40px;
    opacity: 0.95;
}

/* Barra scrolling sopra il footer */
.scroll-bar {
    position: fixed;
    bottom: 60px; /* spazio per non sovrapporsi al footer */
    width: 100%;
    height: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.scroll-text {
    white-space: nowrap;
    font-size: 16px;
    letter-spacing: 3px;
    padding-left: 100%;
    animation: scroll-left 30s linear infinite;
}

/* Animazione */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}


/* Footer */
.bottom-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    width: 100%;
    background: rgba(0, 0, 0, 0.85);
    justify-content: center;  
    color: white;
    text-align: center;
    font-size: 18px;
    letter-spacing: 3px;
    position: fixed;
    bottom: 0;
    opacity: 0.6;
}

.bottom-bar button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: white; /* se il tuo footer è scuro */
}