/* Estilos generales para la primera página */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Fondo de la primera página */
body.index-page {
    background-image: url('images/fondopagina1.png'); /* Ruta de la imagen */
}

/* Posiciona el contenedor del input en una posición específica */
.input-container {
    position: absolute;
    top: 67%; /* Ajusta este valor para la posición vertical del input */
    left: 50%; /* Ajusta este valor para la posición horizontal del input */
    transform: translate(-50%, -50%); /* Centra el campo en relación con top/left */
}

/* Estilo para el input de usuario */
input#instagram-username {
    padding: 10px;
    font-size: 3.7rem;
    font-weight: 700;
    color: #0056b3;
    border: none;
    border-radius: 5px;
    width: 1050px; /* Ajusta el ancho del campo */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Sombras para el campo */
}

input#instagram-username::placeholder {
    color:#0056b3
}

/* Posiciona el contenedor del botón en una posición específica */
.button-container {
    position: absolute;
    top: 88%; /* Ajusta este valor para la posición vertical del botón */
    left: 50%; /* Ajusta este valor para la posición horizontal del botón */
    transform: translate(-50%, -50%); /* Centra el botón en relación con top/left */
}

/* Estilo para el botón "Comenzar" */
button#start-button {
    padding: 60px 1px;
    font-size: 4rem;
    color: white;
    background-color: #007BFF; /* Color de botón azul */
    border: none;
    border-radius: 500px;
    cursor: pointer;
    width: 550px; /* Ajusta el ancho del botón */
}

button#start-button:hover {
    background-color: #0056b3; /* Color más oscuro cuando el botón es presionado */
}