beginbot_me

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap');

/**************************
 * Hide help info
 *************************/

.flex-right {
    display: none;
}

/**************************
 * Commands
 *************************/

figure {
    border: 1px solid #f0f0f044 !important;
    border-radius: 4px;
    padding: 32px 32px 48px;
    background-image: linear-gradient(140deg, #080808, transparent);
}

figcaption b:after {
    content: "cost";
    color: #f0f0f0;
    font-weight: 100;
    font-size: 12px;
    margin-right: -1px;
    letter-spacing: 2px;
}

figcaption b {
    margin-left: 18px;
    font-size: 18px;
    color: transparent;
    width: 0;
    font-size: 0;
}

figcaption a::before {
    color: rgba(232, 230, 227, 0.9);
    content: "!";
    font-size: 20px;
    font-weight: 400;
    margin-right: 4px;
}

figcaption a {
    text-decoration: none;
    color: #f00280;
    font-size: 20px;
    margin-right: 18px;
}
figcaption {
    padding: 4px 8px 24px;
    font-size: 24px;
    font-weight: 700;
}

a:active {
    line-height: 20px;
    color: #c02050;
    transition: 300ms color ease;
}

/**************************
 * Scores, Points etc.
 *************************/

h2:nth-child(6):before,
h2:nth-child(7):before,
h2:nth-child(8):before {
    content: "➜ ";
    color: #f0f0f0aa;
}

/**************************
 * Lovers
 *************************/

h2:nth-child(10) {
    color: #f02080;
    font-weight: 700;
}
h2:nth-child(10):after {
    content: " { fmt.Printf(\"➜ %s\", lover) }";
    color: #f0f0f080;
    font-weight: 100;
}

h2:nth-child(10):before {
    content: "for _, lover := range user.";
    color: #f0f0f080;
    font-weight: 100;
}

ul {
    margin-left: 48px;
}

ul li:before {
    content: "➜ ";
}

ul li a {
    text-decoration: none;
    color: #f00280;
    transition: 300ms color ease;
}

ul li a:hover {
    color: #f0f0f0;
    transition: 300ms color ease;
}

/**************************
 * H2 headers
 *************************/

h2 {
    font-weight: 400;
    font-size: 22px;
    margin-left: 48px;
}

/**************************
 * Separator
 *************************/

hr {
    border-color: #f8f8f8;
    border-width: 1px;
    border: none;
    border-top: 1px solid;
}

/**************************
 * Menu
 *************************/

nav {
    position: fixed;
    margin: 24px 48px;
    left: 0;
    line-height: 32px;
}
nav a:before {
    content: "nav::";
    color: #ffffff80;
}
nav a:after {
    content: "()";
    color: #ffffff80;
}
nav a:hover {
    transition: 300ms color ease;
    color: #f0f0f8;
}
nav a {
    color: #f02080;
    text-decoration: none;
    transition: 300ms color ease;
}

/**************************
 * Place username after logo
 *************************/

body h2:nth-child(5) {
    font-size: 14px;
    color: rgb(253, 80, 206);
    position: absolute;
    top: 52px;
    left: 53.5vw;
}

/**************************
 * Logo
 *************************/

h1 a {
    color: #f0f0f0;
    text-decoration: none;
    font-weight: 100;
    letter-spacing: 2px;
    font-family: 'Roboto', sans-serif;
}

h1 {
    width: 100%;
    background-image: radial-gradient(#212121, transparent, transparent);
    padding: 40px 10px;
    margin: 0 0 20px 0;
}

/**************************
 * Other
 *************************/

body {
    width: 60%;
    margin: auto;
    font-size: 18px;
    background-image: linear-gradient(160deg, #101010, #212121);
    font-family: 'Roboto', sans-serif;
}