/* VARIABLES */
:root {
    /* Colors */
    --color-background: #fff;
    --color-text: #000;
    --color-link: rgba(25, 0, 255, 1);
	--color-link-underline: rgba(25, 0, 255, .2);
    --color-danger: rgba(255, 55, 0, 1);
    --color-border: rgba(0, 0, 0, 0.25);
    /* Typography */
    --text-logo: 2rem; 
    --text-h1: 2.5rem;
    --text-h2: 2rem;
    --text-h3: 1.125rem;
    --text-body: 1.125rem;
    --text-small: 1rem;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #000;
        --color-text: #f0f0f0;
        --color-link: rgb(100, 145, 255);
		--color-link-underline: rgba(100, 145, 255, .4);
        --color-danger: rgba(255, 90, 45, 1);
        --color-border: rgba(255, 255, 255, 0.25);
    }
}

/* RESET */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body {
    font-size: 100%;
    -webkit-text-size-adjust: 100%; /* Prevents automatic font size adjustment in some mobile browsers */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Reset lists */
ul,
ol {
	list-style: none;
}

/* Reset links */
a {
	text-decoration: none;
	color: inherit;
}

/* Reset headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size: inherit;
	font-weight: inherit;
}

/* Reset buttons */
button {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

/* Reset form elements */
input,
textarea,
select {
	font: inherit;
}

/* Reset images */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* BASE */
body {
    background-color: var(--color-background);
    color: var(--color-text);   
}
a, a:visited {
    color: var(--color-link);
    text-decoration: none;
	border-bottom: 1px solid var(--color-link-underline);
}
a:hover {
    color: var(--color-danger);
	border-bottom: 1px solid var(--color-danger);
}

/* TYPOGRAPHY */
body {
	font-size: var(--text-body);
    font-family: Inter, sans-serif;
    line-height: 150%;
}
h1 {
    font-size: var(--text-h1);
    line-height: 110%;
}
h2 {
    font-size: var(--text-h2);
    line-height: 120%;
}
h3 {
    font-size: var(--text-h3);
    line-height: 150%;
	font-weight: 600;
}
.text-small {
    font-size: var(--text-small);
}