@font-face {
    font-family: "RubikMonoOne";
    src: url("/static/rubik-mono-one.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBMPlexMono";
    src: url("/static/ibm-plex-mono.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-title: 'RubikMonoOne', sans-serif;
    --font-base: 'IBMPlexMono', sans-serif;

    --background: #1D1D1B;
    --foreground: #EAE4DA;
    --muted-l: #403f3a;
    --muted-m: #676560;
    --muted-h: #B3AFA8;
    --primary: #EAA7C7;
    --success: #245E55;
    --danger: #C63F3E;

    --text-sm: .875rem;
    --text-base: 1rem;
}

* {
  box-sizing: border-box;
}

body, html {
    padding: 0;
    margin: 0;
}

body {
    width: 100%;
    height: 100svh;
    background-color: var(--background);
}

p, h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
}

.root {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;

    font-family: var(--font-base);
    font-size: var(--text-base);
    color: var(--foreground);

    background-color: var(--background);

    .header {
        display: flex;
        align-items: center;
        padding: 1rem;
        font-size: var(--text-sm);

        p {
            margin: 0;
        }

        .logo {
            color: var(--muted-m);
            text-decoration: none;
            text-transform: uppercase;
        }

        .status {
            display: flex;
            align-items: center;
            gap: .5rem;
            margin-left: auto;

            .marker {
                width: .5rem;
                height: .5rem;
                border-radius: .5rem;
                background-color: var(--success);
            }

            .text {
                color: var(--muted-m);
                text-transform: uppercase;
            }
        }
    }

    .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;

        .block {
            max-width: 25rem;
            margin: 0 auto;
            padding: 1rem;

            .title {
                color: var(--primary);
                font-family: var(--font-title);
                font-size: 4rem;
                letter-spacing: 0.25rem;
                text-transform: uppercase;
                margin-bottom: 2rem;
                transform: translateX(-.26rem);

                @media (max-width: 400px) {
                    font-size: 3rem;
                }
            }

            .details {
                margin-bottom: 2rem;

                .subtitle {
                    color: var(--muted-h);
                    margin-bottom: .75rem;
                    text-transform: uppercase;
                }

                .work {
                    color: var(--muted-m);
                    text-transform: uppercase;

                    .company {
                        color: var(--primary);
                        font-weight: 700;
                    }
                }
            }

            .contacts {
                display: flex;
                flex-direction: column;
                gap: .5rem;
                width: 100%;

                .item {
                    display: flex;
                    align-items: center;

                    width: 100%;

                    color: var(--muted-m);
                    text-decoration: none;
                    text-transform: uppercase;
                    cursor: pointer;

                    .icon {
                        margin-left: auto;
                    }

                    &:hover {
                        color: var(--primary);
                    }
                }
            }
        }
    }

    .footer {
        display: flex;
        align-items: center;
        padding: 1rem;
        width: 100%;

        color: var(--muted-m);
        font-size: var(--text-sm);

        .copyright {
            text-transform: uppercase;
        }

        .motto {
            margin-left: auto;
            text-transform: uppercase;
        }
    }
}

.separator {
    height: 1px;
    width: 100%;
    background-color: var(--muted-l);
}