:root {
    --color-bg: rgba(15, 15, 15, 1);
    --color-primary-lilac: rgba(201, 147, 236, 1);
    --color-header-text: rgba(195, 195, 195, 1);
    --color-text-body: rgba(210, 210, 210, 1);
    --color-text-body-hover: rgba(150, 150, 150, 1);
    --transparent: rgba(0, 0, 0, 0);
}


@font-face {
    font-family: fira-code;
    src: url(../assets/font/fira_code/FiraCode-Regular.woff2);
}


body {
    background-color: var(--color-bg);
    color: var(--color-header-text);
    font-family: fira-code;
    font-size: 1.125rem;
    margin-left: 2rem;
    margin-top: 0rem;
    padding-left: 2rem;
    padding-top: 0rem;
}

ul {
    list-style: none;
}

a {
    transition: color 0.2s ease-in;
}

h1, h1 a, h1 a:active, h1 a:visited {
    color: var(--color-text-body);
    font-size: 4rem;
    margin-bottom: 0rem;
    margin-top: 1rem;
    padding-bottom: 0rem;
    padding-top: 1rem;
    text-decoration: none;
} h1 a:hover {
    color: var(--color-primary-lilac);
} h1:hover {
    color: var(--color-text-body-hover);
}

h2, h2 a, h2 a:active, h2 a:visited {
    color: var(--color-text-body);
    font-size: 1.5rem;
    margin-top: 0rem;
    padding-top: 0rem;
    text-decoration: none;
} h2 a:hover {
    color: var(--color-primary-lilac);
} h2:hover {
    color: var(--color-text-body-hover);
}


hr {
    background-image: radial-gradient(ellipse, var(--color-primary-lilac), var(--transparent));
    border-style: none;
    height: 0.5rem;
    margin-right: 4rem;
}


.link-input, .link-output {
    font-family: fira-code;
    font-size: 1.5rem;
    margin-top: 1.5rem;
    transition: background-color 0.2s ease-in, border-color 0.2s ease-in;
} .link-input input[type=text], .link-output input[type=text] {
    border-color: var(--transparent);
    border-style: solid;
    background-color: var(--color-text-body);
    border-radius: 0.2rem;
    width: 50rem;
} .link-input input[type=text]:hover, .link-output input[type=text]:hover {
    background-color: var(--color-text-body-hover);
    border-color: var(--color-primary-lilac);
} .link-input input[type=text]:focus {

}


.bully-you {
    font-size: .25rem;
}