@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #f8f4e6 0%, #faf7f0 50%, #f1ede4 100%);
    margin: 0;
    min-height: 100vh;
    color: #2c3e50;
}

.mainTitle {
    text-align: center;
    margin-top: 100px;
}

.subheading {
    text-align: center;
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    letter-spacing: clamp(2px, 0.75vw, 12px);
    font-style: normal;
    margin-top: -1vw;
    font-size: clamp(16px, 2.5vw, 25px);
    color: var(--color-primary);
    padding: 0 10px;
}

:root {
    --color-primary: #6fc1f0;
    --color-secondary: #357abd;
    --color-tertiary: #2e6da4;
    --color-quaternary: #467893;
    --color-quinary: #236d9b;
    --bg-light: #f8f4e6;
    --bg-medium: #faf7f0;
    --bg-dark: #f1ede4;
    --text-dark: #2c3e50;
    --text-light: #34495e;
}

.content {
    display: flex;
    align-content: center;
    justify-content: center;
}

.raleway-font{
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.text-shadows {
    text-shadow: 2px 2px 0 var(--color-secondary), 4px 4px 0 var(--color-tertiary);
    font-family: "Bungee", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    font-size: clamp(40px, 8vw, 90px);
    text-align: center;
    margin: 0;
    color: var(--color-primary);
    letter-spacing: clamp(2px, 1vw, 15px);
    padding-left: clamp(2px, 1vw, 15px);
}

.header {
    margin-top: clamp(20px, 5vw, 40px);
    padding: clamp(15px, 4vw, 30px) 0;
}

footer {
    background-color: rgba(96, 96, 96, 0.9);
    backdrop-filter: blur(10px);
    font-family: "Raleway", sans-serif;
    color: white;
    text-align: center;
    bottom: 0;
    width: 100%;
    padding: clamp(15px, 4vw, 25px) 10px;
    margin: 0;
    margin-top: 50px;
    font-size: clamp(12px, 2.5vw, 16px);
}

@keyframes shadows {
    0% { text-shadow: none; }
    10% {
        transform: translate(-3px, -3px);
        text-shadow: 3px 3px 0 var(--color-secondary);
    }
    20% {
        transform: translate(-6px, -6px);
        text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary);
    }
    30% {
        transform: translate(-9px, -9px);
        text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary);
    }
    40% {
        transform: translate(-12px, -12px);
        text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
    }
    50% {
        transform: translate(-12px, -12px);
        text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary);
    }
    60% { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary), 12px 12px 0 var(--color-quinary); }
    70% { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary), 9px 9px var(--color-quaternary); }
    80% { text-shadow: 3px 3px 0 var(--color-secondary), 6px 6px 0 var(--color-tertiary); }
    90% { text-shadow: 3px 3px 0 var(--color-secondary); }
    100% { text-shadow: none; }
}

@media (max-width: 768px) {
    .text-shadows {
        font-size: clamp(30px, 10vw, 50px);
        letter-spacing: clamp(1px, 2vw, 8px);
        padding-left: clamp(1px, 2vw, 8px);
    }
    
    .subheading {
        font-size: clamp(14px, 4vw, 20px);
        letter-spacing: clamp(1px, 1.5vw, 6px);
        margin-top: 5px;
    }
}