@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

html, body {
    overflow: hidden; /* Hide scrollbars */
    height: 100%; /* Ensure the height covers the viewport */
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    flex-direction: column;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Make the logo significantly bigger */
img {
    width: 70vw; /* Make the image take up 70% of the viewport width */
    max-width: 900px; /* Limit size on larger screens */
    height: auto;
    margin-bottom: 20px;
}

.text-section {
    font-family: 'Roboto', sans-serif;
    margin-top: 20px;
    font-size: 1.2em;
}

.text-section p {
    margin: 10px 0;
}

/* Media query for larger screens (desktop/laptops) */
@media screen and (min-width: 768px) {
    img {
        width: 50vw; /* Make the image take up 50% of the viewport width on larger screens */
        max-width: 900px; /* Ensure it's large enough on desktop */
    }

    .text-section p {
        font-size: 1.5em; /* Make the text slightly bigger */
    }
}

/* Media query for smaller screens (phones/tablets) */
@media screen and (max-width: 767px) {
    img {
        width: 80vw; /* Slightly increase the logo size for mobile */
    }

    .text-section p {
        font-size: 1em;
    }
}

.email {
    color: inherit; /* Use the inherited text color (same as surrounding text) */
    font-family: inherit; /* Use the inherited font family */
    font-size: inherit; /* Use the inherited font size */
}