style.css

.button-container {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh; /* Adjust the height as needed */
}

#emergencyButton {
 background-color: #FF6961;
 margin-left: 10px;
 margin-top: 80px;
 border: 2px solid #8B0000;
 color: darkred;
 padding: 15px 32px;
 text-align: center;
 text-decoration: none;
 display: inline-block;
 font-size: 16px;
 transition: background-color 0.3s; /* Smooth transition */
 border-radius: 0.50rem;
 cursor: pointer; /* Change cursor to pointer on hover */
}

#emergencyButton:active {
 background-color: #FF6961; 
}

#emergencyButton:hover {
 background-color: #ff7f7f;
}

#giphyModal {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.8);
 display: flex;
 justify-content: center;
 align-items: center;
 z-index: 1000;
}

.giphy-embed {
 max-width: 90%;
 max-height: 90%;
}

body {
 background-image: url('https://media0.giphy.com/media/3ohzAvlydsLtsXaODC/giphy.gif');
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
 height: 100vh; /* Ensures the body takes up the full viewport height */
 margin: 0; /* Removes default margin */
 padding: 0; /* Removes default padding */
}

/* Media Queries for Responsiveness */
@media (max-width: 600px) {
    #emergencyButton {
        font-size: 14px;
        padding: 10px 20px;
    }
}