/* Credit: https://www.jetbrains.com/lp/mono/ (I love this font) */
@font-face {
    font-family: "JetBrainsMono";
    src: url("JetBrainsMono.ttf");
}

@font-face {
    font-family: "JetBrainsMono";
    src: url("JetBrainsMono-Italic.ttf");
    font-style: italic;
}

:root {
    /* Global Style Variables */
    --text-color: #fff;
    --gradient-rot: 0deg;
    --gradient-c1: #fff;
    --gradient-c2: transparent;
    background-color: #151515;
    /* ---------------------- */

    overflow: hidden;
    font-family: "JetBrainsMono";
    color: var(--text-color);
}

.main {
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.title {
    font-size: 6vh;
    font-weight: 900;
    font-style: italic;
}

.project {
    font-size: 7vh;
    font-weight: 400;
}

a {
    font-size: 3.5vh;
    text-decoration: none;
    color: var(--text-color);
}

divider {
    border: 1px solid rgb(25, 255, 152);
    width: 10vw;
    margin: 30px;
}

#hover-gradient {
    position: absolute;
    width: 0;
    height: 0;
    top: -100;
    left: -100;
    pointer-events: none;

    &::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        border: solid 4px transparent;
        border-radius: 1.5vh;
        animation: 1s linear infinite forwards rotateGradient;
        background: linear-gradient(var(--gradient-rot), var(--gradient-c1), var(--gradient-c2)) border-box;
        mask: conic-gradient(red 0 0) padding-box exclude, conic-gradient(red 0 0);
        content: ''
    }
}