@font-face {
    font-family: 'Gold Bold';
    src: url('Gold-Bold.ttf') format('truetype');
}

html, body {
    height: 100vh; /* Full viewport height */
    margin: 0; /* Removes default margin */
    padding: 0;
    display: flex;
    align-items: center; /* Centers content vertically */
    justify-content: center; /* Centers content horizontally */
    background: url('Back.webp') no-repeat center center fixed; /* Sets the background image */
    background-size: cover; /* Ensures the background covers the entire body */
}

div {
    display: flex;
    align-items: center; /* Centers content vertically in the div */
    justify-content: center; /* Centers content horizontally in the div */
    width: 100%; /* Full width */
    height: 100vh; /* Full viewport height */
}

h1 {
    font-family: 'Gold Bold', serif;
    text-transform: uppercase;
    font-size: 5vw; /* Starts with 5vw which adjusts based on the width of the viewport */
    background: linear-gradient(to bottom, #ffd700 0%, #ffcc33 50%, #ff9900 60%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    filter: brightness(100%) blur(1px);
    text-shadow: 0 0 10px #ffd700, 0 0 20px #ffcc33, 0 0 30px #ff9900, 0 0 40px #ff9900;
}

/* Responsive adjustments */
@media (max-width: 768px) { /* Adjustments for tablets and below */
    h1 {
        font-size: 8vw; /* Larger on smaller screens */
    }
}

@media (max-width: 480px) { /* Adjustments for mobile phones */
    h1 {
        font-size: 10vw; /* Even larger on very small screens */
    }
}

.text-container {
    overflow-y: auto; /* Adds a scrollbar if the content overflows */
    padding: 20px;
    box-sizing: border-box; /* Ensures padding does not add to the width */
    width: 100%; /* Full width */
}