/* For all OHHLI specific styling needs */

/* Semi-transparent responsive header styles */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(16, 16, 16, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: 0 2rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: #01cafe;
    text-decoration: none;
}

.brand-name {
    font-size: 1.6rem;
    letter-spacing: -0.02em;
}

.vertical-separator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.8rem;
    font-weight: 300;
    margin: 0 0.25rem;
}

.main-logo {
    height: 32px;
    width: auto;
    transition: all 0.3s ease;
    filter: brightness(0.9);
}

.main-logo:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}

.nav-link {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link:hover {
    color: #01cafe;
    transform: translateY(-1px);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #01cafe;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.nav-link.active {
    color: #01cafe;
    pointer-events: none;
    cursor: default;
}

.nav-link.active::after {
    width: 100%;
}

.vertical-separator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.8rem;
    font-weight: 300;
    margin: 0 0.25rem;
}

.main-logo {
    height: 32px;
    width: auto;
    transition: all 0.3s ease;
    filter: brightness(0.9);
}

.main-logo:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #01cafe;
    border-color: #01cafe;
}

.current-page-name {
    color: #01cafe;
}

/* Full-page mobile menu overlay */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    display: flex;
    opacity: 1;
}

.mobile-menu-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

.mobile-menu-list li {
    margin: 2rem 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.mobile-menu-overlay.active .mobile-menu-list li {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu-overlay.active .mobile-menu-list li:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-menu-overlay.active .mobile-menu-list li:nth-child(2) {
    transition-delay: 0.2s;
}

.mobile-menu-overlay.active .mobile-menu-list li:nth-child(3) {
    transition-delay: 0.3s;
}

.mobile-nav-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 2rem;
    font-weight: 700;
    display: block;
    padding: 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.mobile-nav-link:hover {
    color: #01cafe;
    background-color: rgba(1, 202, 254, 0.1);
    transform: scale(1.05);
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .header-container {
        padding: 0 1rem;
        height: 60px;
    }
    
    .logo {
        font-size: 1.3rem;
        gap: 0.5rem;
    }
    
    .brand-name {
        font-size: 1.4rem;
    }
    
    .vertical-separator {
        font-size: 1.5rem;
        margin: 0 0.15rem;
    }
    
    .main-logo {
        height: 28px;
    }
    
    .header-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .mobile-nav-link {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .header-container {
        padding: 0 0.75rem;
        height: 55px;
    }
    
    .logo {
        font-size: 1.2rem;
        gap: 0.4rem;
    }
    
    .brand-name {
        font-size: 1.3rem;
    }
    
    .vertical-separator {
        font-size: 1.3rem;
        margin: 0 0.1rem;
    }
    
    .main-logo {
        height: 24px;
    }
}

h1 {
    /* text-align: center; */
    font-size: 3vw;
    font-weight: bolder;
    margin: 10px 0;
}

/* Reduce gap between main header and content section h1s */
.content-section h1 {
    margin-top: 0;
    margin-bottom: 10px;
}

input {
    width: 50vw;
    height: 3vw;
    margin: 10px 0;
    font-size: 2vw;
}

#mainContents {
    margin: calc(70px + 5vh) auto auto auto;
    width: 50%;
}

.mainHeader {
    font-weight: 800;
    font-size: 4vw;
}

.fa-arrow-down {
    width: 100%;
    text-align: center;
    font-size: 5vw;
}

.leftinput {
    width: 28vw;
}

.rightinput {
    width: 17vw;
    float: right;
}

/* Background text reveal effect - fairy tale style */
.background-text-overlay {
    position: relative;
    min-height: 100vh;
    width: 100%;
}

/* .background-text-overlay::before {
    content: "Once upon a time, in a land far away, there lived magical stories waiting to be discovered. The ancient texts spoke of hidden knowledge that could only be revealed to those curious enough to seek it. Through enchanted forests of code and mystical valleys of data, the wise ones left their secrets scattered like breadcrumbs for future wanderers. Each hover of the mouse was like a gentle touch of fairy dust, illuminating the path forward. The chronicles tell of great adventures in the digital realm, where brave souls would venture forth to shorten the longest of journeys into the smallest of steps. And so the legend continues, written in invisible ink, waiting for the next explorer to uncover its mysteries with nothing more than the movement of their cursor across this magical parchment. In the depths of cyberspace, ancient algorithms weave their spells, transforming lengthy URLs into compact treasures. The pixelated fairies dance across screens, leaving trails of shortened links in their wake. Beneath the surface of every click lies a story untold, a journey compressed into mere characters yet containing infinite possibilities. The digital scribes of old knew that true magic wasn't in making things complex, but in making the complex simple. Through valleys of code and mountains of data, the sacred art of link shortening became a beacon for weary travelers of the internet. Each shortened URL was like a magic portal, transporting users across vast digital distances in the blink of an eye. The enchanted servers hummed with the wisdom of a thousand redirects, each one a small miracle of modern technology. And in this realm where every character counts, the true power lies not in the destination, but in the elegant simplicity of the path that leads there.";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    font-family: 'Times New Roman', serif;
    font-size: 3vw;
    font-weight: 400;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    padding: 2vw;
    box-sizing: border-box;
    color: #1a1a1a;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle 60px at var(--mouse-x, 50%) var(--mouse-y, 50%), 
                                #4c1d95 0%, 
                                #4c1d95 50px, 
                                transparent 60px);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: justify;
} */

/* Additional responsive adjustments for main content */
@media (max-width: 768px) {
    #mainContents {
        margin-top: calc(60px + 5vh) !important;
    }
}

@media (max-width: 480px) {
    #mainContents {
        margin-top: calc(55px + 5vh) !important;
    }
}

/* Status container styles */
.status-container {
    margin: 20px 0;
    width: 100%;
}

.status-success, .status-error {
    padding: 15px 20px;
    border-radius: 8px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    font-size: 1.2vw;
    font-weight: 500;
}

.status-success {
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
    flex-direction: column;
    align-items: flex-start;
}

.status-error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.status-success i, .status-error i {
    margin-right: 10px;
    font-size: 1.5vw;
}

.short-url-container {
    width: 100%;
    display: flex;
    align-items: center;
    margin-top: 15px;
    gap: 10px;
}

.short-url-container input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #22c55e;
    font-size: 1vw;
    font-family: 'Courier New', monospace;
    height: auto;
    margin: 0;
}

.copy-btn {
    padding: 12px 20px;
    background-color: #22c55e;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9vw;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    margin: 0;
}

.copy-btn:hover {
    background-color: #16a34a;
    transform: translateY(-1px);
}

.copy-btn.copied {
    background-color: #059669;
}

/* Responsive adjustments for status elements */
@media (max-width: 768px) {
    .status-success, .status-error {
        font-size: 2.5vw;
        padding: 12px 15px;
    }
    
    .status-success i, .status-error i {
        font-size: 3vw;
    }
    
    .short-url-container {
        flex-direction: column;
        gap: 15px;
    }
    
    .short-url-container input {
        font-size: 2vw;
        padding: 10px 12px;
    }
    
    .copy-btn {
        width: 100%;
        font-size: 2vw;
        padding: 12px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .status-success, .status-error {
        font-size: 3.5vw;
        padding: 10px 12px;
    }
    
    .status-success i, .status-error i {
        font-size: 4vw;
    }
    
    .short-url-container input {
        font-size: 3vw;
    }
    
    .copy-btn {
        font-size: 3vw;
    }
}