/* Global Styles and Variables */
:root {
    /* Color Styles */
    --tan: #efeeeb;
    --white: #ffffff;
    --orange: #ff4d05;
    --black: #000000;
    --gray: #3e3e3e;

    /* Font Size */
    --fs-xs: 13px;
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-base-lg: 18px; 
    --fs-md: 20px;
    --fs-lg: 25px;
    --fs-xl: 31px;
    --fs-xxl: 39px;
    --fs-hero: 49px;

    /* Font Name Assigning */
    --font-main: 'JetBrains Mono', monospace;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: var(--tan)
}

.section-title {
    font-size: var(--fs-lg);
    margin-bottom: 30px;
    color: var(--black);
    font-family: var(--font-main);
}

#orangeSlash, #orangeText{
    color: var(--orange);
}

.divider {
    border: none;
    height: 3px;
    background-color: var(--orange);
    width: 70%;
    margin: 80px auto;
}

.coming-soon {
    font-family: var(--font-main);
    font-size: var(--fs-xl);
    font-weight: bold;
    color: var(--black);
    text-align: center;
    margin: 100px 100px;
}

.coming-soon .cursor {
    display: inline-block;
    width: 1ch;
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

/*  Header Styles  */
header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 20px 50px 20px 50px; */
    padding: 2% 7% 2% 5%;
    background: var(--white);
}

header #headerLogo {
    max-width: 200px;
    height: auto; 
}

header nav {
    display: flex;
    font-family: var(--font-main);
    font-weight: bold;
}
header nav ul{
    display: flex;
    gap: 64px;
    list-style: none;
    text-decoration: none;
    padding: 0;
    margin: 0;
}

header nav li a{
    text-decoration: none;
    color: var(--black);
}

header nav li #orangeSlash {
    color: var(--orange);
}

/* Footer Styles */
footer {
    background-color: var(--white);
    /* padding: 70px 110px 60px 90px; */
    padding: 5% 10% 4% 10%; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #e0e0e0;
    gap: 60px; 
    flex-wrap: wrap;

    font-family: var(--font-main);
}

.footer-logo {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.footer-logo #headerLogo {
    max-width: 350px;
    height: auto; 
}

.footer-logo span {
    font-size: 32px;
}

.footer-logo .tagline {
    font-size: 8.5px;
    color: var(--black);
    text-align: center;
    font-weight: bolder;
}

.footer-tagline {
    flex: 1;
    text-align: center;
}

.footer-tagline p {
    font-weight: bold;
    font-size: var(--fs-md);
}

.footer-media {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-media h4 {
    margin-bottom: 15px;
    font-size: var(--fs-md);
}

.footer-media .social-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.footer-media .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-media .social-icons a:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.footer-media .social-icons img {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
}

.footer-media .social-icons a:hover img {
    filter: invert(44%) sepia(97%) saturate(5500%) hue-rotate(0deg) brightness(102%) contrast(105%);
}


/* Temporary Message for other devices screen size */
@media (max-width: 1024px), (min-width: 1920px) {
    body > * {
        display: none !important;
    }

    body::before {
        content: "Responsive layout in progress. Best viewed on desktop.";
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        padding: 24px;
        text-align: center;
        color: var(--black);
        background: var(--tan);
        font-family: var(--font-main), monospace;
        font-size: var(--fs-md);
        line-height: 1.5;
    }
}