style.css

<style>
       body {
         margin: 0;
         padding: 0;
         font-family: "Lucida Console", "Courier New", monospace;
            background-color: black;
       }

       .container {
         background-image: url('background-image.jpg');
         background-size: cover;
         background-position: center;
         height: 130vh;
         //display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
       }
       head{
            <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
            <meta name="msapplication-TileColor" content="#da532c">
            <link rel="manifest" href="/site.webmanifest">
            <meta name="theme-color" content="#ffffff">
       }

       h1 {
             font-size: calc(2vw + 20px); /* Responsive font size based on viewport width */
             color: #black;
             text-shadow: 3px 3px 8px rgba(0, 0, 0, 2.5);
       }

       h2 {
            font-size: calc(1vw + 15px); /* Responsive font size based on viewport width */
            color: gray;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 1.8);
       }

       h3 {
           font-size: calc(1vw + 10px); /* Responsive font size based on viewport width */
           color: dark gray;
           text-shadow: 1px 1px 2px rgba(0, 0, 0, 2);
       }

       /* Media query for smaller screens */
       @media (max-width: 600px) {
         h1 {
           font-size: 8vw; /* Adjust font size for smaller screens */
         }

       a {
         color: gray;
         font-size: 17px;
       }

       #background-gradient {
         height: 1050px;
         background-image: linear-gradient(black, green);
       }
</style>