@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --text: #404040;
    --bg: #fff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: #fff;
        --bg: #222;
    }

    .image-container {
        background-color: #999999;
    }

    .input-cursor {
        background-color: white;
    }
}

@layer base {
    html {
        font-family: "Inter", sans-serif;
    }

    body {
        background-color: var(--bg);
        color: var(--text);
    }

    footer {
        z-index: 1000;
    }

    nav {
        z-index: 1001;
    }
}

@layer components {
    .inter-font-family {
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-weight: 300;
        font-style: normal;
    }

    #page {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: all 0.5s linear;
    }

    .container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 5px 25px !important;
    }

    .image-container {
        display: flex;
        justify-content: end;
        border-radius: 20px;
        /* max-height: 350px; */
        background-color: #eeeeee;
        overflow: hidden;
        transition: all 0.5s linear;
    }

    .image-box {
        height: 100%;
    }

    .image-box img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .social-link:hover {
        opacity: 80%;
    }
}