index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Callback Hell</title> 

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <style> 
        #countdown{ 
            margin-top: 8rem;
            font-size: 5rem;
            font-weight: 600;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            width: 98%; 
            text-align: center; 
            word-wrap: break-word; 
            text-shadow: 2px 2px #0008ff;
        }  

        @media screen and (max-width : 600px) { 
            #countdown{ 
            font-size: 2.5rem;
            }
        }

        @media screen and (min-width : 800px) { 
            #countdown{ 
            font-size: 5rem;
            }
        }
    </style>
    
</head>
<body> 
    <div class="container-sm"> 
        <div class="row">
            <div class="col-md-12">
                <p id="countdown">

                </p>
            </div>
        </div>
        
    </div>
    
<script src="script.js"></script>
</body>
</html>