:root {
    color-scheme: light dark;
    --mocha_base: #1e1e2e;
    --mocha_surface0: #313244;
    
    --mocha_text: #cdd6f4;
    --mocha_subtext1: #bac2de;
    --mocha_subtext0: #a6adc8;

    --mocha_saphire: #74c7ec;

    --latte_base: #eff1f5;
    --latte_surface0: #ccd0da;
    
    --latte_text: #4c4f69;
    --latte_subtext1: #5c5f77;
    --latte_subtext0: #6c6f85;

    --latte_saphire: #209fb5;

    --base: light-dark(var(--latte_base), var(--mocha_base));
    --surface0: light-dark(var(--latte_surface0), var(--mocha_surface0));
    
    --text: light-dark(var(--latte_text), var(--mocha_text));
    --subtext1: light-dark(var(--latte_subtext1), var(--mocha_subtext1));
    --subtext0: light-dark(var(--latte_subtext0), var(--mocha_subtext0));

    --saphire: light-dark(var(--latte_saphire), var(--mocha_saphire));

	background-color: var(--base);
	color: var(--text);
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

}

body {
    margin: 16px;
}

a {
	color: var(--saphire);
    transition: opacity 100ms linear;
}

a:hover {
    opacity: 75%;
}

#main-website {
    width: 280px;
}

#main-website a {
    background-color: var(--surface0);
    color: var(--text);
    text-decoration-color: var(--text);
    text-decoration: none;

    margin: 16px;
    padding: 8px;
    gap: 8px;

    border-radius: 8px;
    display: flex;
}

#main-website h2 {
    line-height: 0;
}

#main-website p {
    color: var(--subtext0);
    line-height: 8px;
}

#main-website img {
    border-radius: 8px;
}

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