@import "font/IBMPlexSans/font.css";

:root {
    --main-font: "IBM Plex Sans";
    --green: #48cc18;
    --off-white: #efefef;
    --bg: #121212;
}

body {
    background-color: var(--bg);
    color: var(--off-white);
    font-family: var(--main-font);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    min-height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;

    & h1 {
        color: var(--green);
        text-transform: uppercase;
    }

    & main {
        & form {
            width: 100%;
            display: flex;
            justify-content: center;

            & input[type="text"] {
                background-color: var(--bg);
                border: 1px solid var(--green);
                width: 80%;
                font-size: 3rem;
                padding: 10px;
                color: var(--off-white);

                &::placeholder {
                    color: color-mix(in srgb, var(--green), black);
                }
            }
        }

        & section.links {
            display: flex;
            gap: 60px;
            margin-top: 40px;

            & h1 {
                font-size: 2.1rem;
            }

            & ul {
                list-style: none;
                padding: 0;
                margin: 0;

                & li {
                    & a {
                        color: var(--off-white);
                        text-decoration: none;
                        padding: 5px 0px;
                        display: block;
                        position: relative;
                        overflow: hidden;
                        width: fit-content;

                        &::after {
                            content: " ";
                            width: 100%;
                            height: 100%;
                            background-color: var(--green);
                            display: block;
                            position: absolute;
                            top: 0;
                            left: 0;
                            transform: translateX(-100%);
                            transition: 0.3s;
                        }

                        &:hover {
                            color: var(--bg);

                            &::after {
                                transform: unset;
                                z-index: -1;
                            }
                        }
                    }
                }
            }
        }
    }
}