* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    display: flex;
    justify-content: center;

    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    background-color: #272727;
    color: #fff;

    height: 100%;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    /* background-position: center; */
    opacity: 0.2;
    will-change: transform;
}

.content {
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    height: 100%;
}

.button {
    padding: 1em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    background-color: #fff;
    color: #272727;
    border-radius: 5px;
    border: 0px;

    margin-top: 0.5em;
}

main {
    padding: 2rem 0;
}

section {
    margin-bottom: 2rem;
}

#title {
    font-size: calc(1vw + 1vh + 2vmin);
    letter-spacing: 0.15em;

    margin-bottom: 0em;
}

#subtitle {
    font-size: calc(0.8vw + 0.1vh + 0.2vmin);

    margin: 1.5em auto;
    inline-size: 450px;
    overflow-wrap: break-word;
}

/* Animation for typing effect */
.text {
    font-family: 'Roboto', sans-serif;
    display: inline-block;
    font-size: calc(0.2vw + 0.5vh + 1vmin);
    
    overflow: hidden; /* Ensures the text doesn't overflow */
    border-right: 0.15em solid orange;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: 0.15em;
    animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 70%;
    }
}

@keyframes blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: orange;
    }
}

/* Mobile */ 

@media (max-width: 1250px) {
    #title {
        font-size: calc(2vw + 2vh + 0.8vmin); /* Adjust this formula as needed */
    }

    #subtitle {
        font-size: calc(0.8vw + 0.3vh + 0.4vmin); /* Adjust this formula as needed */
    }

    @keyframes typing {
        from {
            width: 0;
        }
        to {
            width: 50%;
        }
    }
    
}

@media (min-width: 350px) and (max-width:450px) {
    #title {
        font-size: calc(0.5vw + 2vh + 1vmin); /* Adjust this formula as needed */
    }

    .text {
        font-size: calc(0.2vw + 0.6vh + 2vmin);
        animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
    }

    #subtitle {
        inline-size: 300px;
        font-size: calc(0.4vw + 0.6vh + 1.8vmin); /* Adjust this formula as needed */
    }

    @keyframes typing {
        from {
            width: 0;
        }
        to {
            width: 95%;
        }
    }
}