style.css

/* Default to dark mode (thank me later) */

:root {
    --base: #1e1e2e;
	--text: #cdd6f4;
	--crust: #11111b;
	--surface0: #313244;
	--subtext0: #a6adc8;
	--subtext1: #bac2de;
	--pink: #f5c2e7;
	--rosewater: #f5e0dc;
	--blue: #89b4fa;
	--mauve: #cba6f7;
}

/* You are very clearly insane and need to seek professional psychiatric evaluation immediately*/

@media (prefers-color-scheme: light) {
    :root {
        --base: #eff1f5;
        --text: #4c4f69;
        --crust: #dce0e8;
        --surface0: #ccd0da;
        --subtext0: #6c6f85;
        --subtext1: #5c5f77;
        --pink: #ea76cb;
        --rosewater: #dc8a78;
        --blue: #1e66f5;
        --mauve: #8839ef; 
    }
}

:root {
    background-color: var(--crust);
    font-family: "Hack", "Hack Nerd Font", "JetBrains Mono", "JetBrainsMono Nerd Font", monospace, sans-serif;
    font-size: 20px;
    scrollbar-width: none;
}

body {
    background-color: var(--base);
    height: 100%;
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
    width: min(900px, 80%);
    border-radius: 10px;
    border: solid 4px var(--rosewater)
}

.header {
    font-size: 32px;
    border-radius: 3px;
    justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
}

#webname {
    border-bottom: 3px solid var(--text);
    color: var(--text);
    margin: 5px;
    margin-left: 15px;
    text-decoration: none;
}

#content-headers {
    color: var(--text);
}

.quicklinks {
    border-bottom: 3px solid var(--text);
    margin: 5px;
    margin-right: 15px;
}

.quicklinks a {
    text-decoration: none;
    color: var(--text)
}

#compliment {
    border: solid 1px var(--crust);
    border-radius: 2px;
    background-color: var(--crust);
    color: var(--pink);
    font-weight: bold;
    border-radius: 5px;
}

.content {
    margin-left: 50px;
    margin-right: 50px;
    color: var(--subtext0);
}

.contacts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
    margin-left: 50px;
}

.contacts a {
    flex-direction: column;
    font-size: 20px;
    color: var(--pink);
    margin-right: auto;
}

.contacts a:link {
    text-decoration: none;
}

.info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 20px;
    margin-left: 50px;
    color: var(--pink);
}

.friends {
    border-top: solid 5px var(--pink);
    margin-top: 10px;
    padding-top: 10px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

/* TODO: Change sticker borders to a gradient */

.stickers {
    margin-right: 30%;
    margin-left: 30%;
    margin-top: 50px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.badges {
    margin-top: 10px;
    padding-top: 10px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    border-top: solid 5px var(--pink);
}

#stickers-title {
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    font-size: 32px;
    color: var(--blue);
}

#friends-title {
    margin-left: auto;
    margin-right: auto;
    text-decoration: none;
    font-size: 32px;
    color: var(--blue);
}

#button {
    border-radius: 4px;
    padding: 3px
}

#button:hover {
    border: solid 2px var(--rosewater);
    margin: -2px;
}

.webring {
    margin-bottom: auto;
    font-size: 16px;
    padding: 3px 0px 3px 0px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 20px;
    gap: 3px;
}

.webring a {
    color: var(--rosewater);
}

#random {
    display: flex;
    justify-content: center;
    padding-bottom: 10px;
}

.message {
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 30px;
    color: var(--rosewater)
}

#license {
    margin-left: 10px;
}

.footer {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    margin-right: 10px;
}

.footer a {
    color: var(--rosewater);
}