body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white;
    font-family: 'Inter', sans-serif; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    padding: 0 20px;
    position: relative; /* Allow positioning of footer */
}

h1 {
    font-size: 40px;
    margin: 0;
    padding: 0 10%; /* 10% padding on either side for desktop */
    letter-spacing: -0.02em; /* Adjust this value to reduce tracking */
    max-width: 1800px; /* Set maximum width */
    width: 100%; /* Allow it to be responsive */
    box-sizing: border-box; /* Include padding in width */
}

.input-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    flex-direction: row; /* Default to horizontal on desktop */
}

input[type="text"] {
    border: 2px solid white;
    border-radius: 32px;
    background-color: transparent;
    color: white;
    width: 322px; /* Consistent width */
    height: 64px; /* Match button height */
    font-size: 16px;
    text-align: center;
    padding: 0; /* Remove default padding */
    margin-right: 20px; /* Space between input and button */
    box-sizing: border-box; /* Include border and padding in height */
}

.button {
    width: 322px; /* Consistent width */
    height: 64px; /* Consistent height */
    border: 2px solid white;
    border-radius: 32px;
    background-color: transparent;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
    padding: 0; /* Remove default padding */
    position: relative; /* Position for animation */
    box-sizing: border-box; /* Include border in height */
}

.button:hover {
    background-color: white;
    color: black;
    transform: scale(1.05);
}

.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}

.email {
    color: white;
    text-decoration: none;
    margin-top: 20px;
    transition: color 0.3s, text-decoration 0.3s;
}

.email:hover {
    color: gray;
    text-decoration: underline;
    filter: brightness(0.5);
}

.footer, .connect {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    font-family: 'Roboto Mono', monospace;
    font-size: 16px; /* Font size */
}

.connect {
    bottom: 84px; /* 30px above the copyright text */
    color: white; /* Color for the text */
    cursor: pointer; /* Change cursor to pointer */
    transition: color 0.3s, text-decoration 0.3s; /* Add transition for hover effect */
}

.connect:hover {
    color: gray; /* Change color on hover */
    text-decoration: underline; /* Add underline on hover */
}

.footer {
    bottom: 54px; /* Distance from bottom for copyright */
    color: #999999; /* Font color */
}

@media (max-width: 768px) {
    .input-container {
        flex-direction: column; /* Stack vertically on mobile */
        align-items: center; /* Center items */
    }

    input[type="text"], .button {
        width: 322px; /* Keep consistent width */
        height: 64px; /* Keep consistent height */
        margin-right: 0; /* Remove right margin */
        margin-bottom: 20px; /* Space below the input */
    }

    h1 {
        padding: 0 30px; /* Add 30px padding on either side for mobile */
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 22px;
        padding: 0 20px; /* Change padding to 20px on either side */        margin-top: -140px;

        text-align: left; /* Align text to the left */
    }
  
  
      .connect {
        bottom: 179px; /* Adjust to move up by 40px from 84px */
    }

    .footer {
        bottom: 149px; /* Adjust to move up by 40px from 54px */
    }

    input[type="text"], .button {
        height: 48px; /* Adjust for smaller screens */
        width: 322px; /* Keep consistent width */
    }
}