@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

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

:root {
    --gradient: linear-gradient(
        108deg,
        #0894ff,
        #c959dd 34%,
        #ff2e54 68%,
        #ff9004
    );
    --system:
        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

    --pink-white: #ffdcf3;
    --text: #1b1a20;
    --pink: #ffbac2;
    --blue: #a0a7d8;
    --light-blue: #9dceff;
    --purple: #e1adff;
}

::selection {
    background: whitesmoke;
    color: var(--text);
    text-shadow: none;
}

.background {
    background: var(--gradient) no-repeat;
    background-size: cover;
    width: 100vw;
    height: 100vh;
}

.terminal-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.terminal {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    overflow-y: auto;
    background: rgba(27, 26, 32, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid #909090;
    border-radius: 24px;
    padding: 24px 36px;
    color: whitesmoke;
    font-family: "Consolas", monospace;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: text;
    animation: 800ms show forwards cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes show {
    from {
        filter: blur(10px);
        opacity: 0;
        scale: 0.9;
    }
    to {
        filter: blur(0px);
        opacity: 1;
        scale: 1;
    }
}

@keyframes close {
    from {
        filter: blur(0px);
        opacity: 1;
        scale: 1;
    }
    to {
        filter: blur(10px);
        opacity: 0;
        scale: 0.9;
    }
}

.terminal[data-exit="true"] {
    animation: 800ms close forwards cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

.info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.info .pill {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 0px 12px;
    border-radius: 40px;
    height: 24px;
}

.info .duration {
    background: var(--pink-white);
    color: var(--text);
}

.info .tilde {
    font-size: 28px;
}

.info .pwd {
    background: var(--pink);
    color: var(--text);
}

.prompt-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.prompt {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-left: 16px;
}

.prompt .circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
}

.prompt .triangle-right {
    transform: rotate(90deg);
    color: var(--blue);
}

.prompt-wrapper .input {
    width: 100%;
    color: var(--blue);
    font-weight: bold;
    caret-color: whitesmoke;
    caret-shape: bar;
}

.prompt-wrapper .input:focus-visible {
    outline: none;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    padding: 36px 120px;
    pointer-events: none;
}

a {
    color: whitesmoke;
    font-weight: bold;
}

@media only screen and (max-width: 800px) {
    .terminal {
        width: 100vw;
        height: 100vh;
        border: none;
        border-radius: 0px;
        overflow-x: auto;
        padding-top: 60px;
    }
}