@font-face {
    font-family: "main";
    src: url(Assets/SpaceMono-Regular.ttf);
}

:root{
    --bg-color: hsl(225, 15%, 5%);
    --middle-color: hsl(231, 20%, 7%);
    --fg-color: hsl(206, 10%, 54%);
    --accent-color: hsl(270, 100%, 64%);
}

body{
    display: flex; 
    justify-content: center; 
    align-items: center;

    font-family: "main";
    font-weight: lighter;
    text-align: center;
    background-color: var(--bg-color);
    color: var(--fg-color);

    background: linear-gradient(
        to bottom, 
        hsl(240, 24%, 4%) 0px 4px,
        hsl(240, 20%, 8%) 4px 8px
    );
    background-size: 100% 8px;
}

a{
    color: var(--accent-color)
}

::selection{
    background-color: hsla(270, 100%, 64%, 0.807);
    color: hsl(205, 18%, 81%);
}

.container{
    border: var(--accent-color) solid;
    border-radius: 24px;
    background-color: var(--middle-color);
    padding: 1.5rem;
    width: 30%;
    margin-top: 10rem;

    box-shadow: 0 0 10px 2px hsla(270, 100%, 65%, 0.479), inset 0 0.6rem 8px 1px hsla(270, 6%, 47%, 0.245);
}