@import url('https://fonts.googleapis.com/css2?family=Oswald&family=Noto+Serif&display=swap');

:root {
    --primary-color: #000000;
    --secondary-color: #e5e5e5;
    --accent1-color: #0af4f4;
    --accent2-color: #fc7311;

    --heading-font: 'Oswald', serif;
    --paragraph-font: 'Noto Serif', serif;
    
    --nav-background-color: var(--accent2-color);
    --nav-link-color: #0d1c92;
    --nav-hover-link-color: #292928;
    --nav-hover-background-color: var(--accent2-color);
}

body {
	max-width: 960px;
	/* margin: 2rem auto; */
	font-family: var(--paragraph-font);
    padding: 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color: var(--primary-color);
}

header {
    padding: 20px;
    background-color: var(--accent1-color);
}

p {
    padding: 25px;
}

nav {
    background-color: var(--nav-background-color);
    font-size: 1.2rem;
    display: flex;
}

nav a {
    display: block;
    color: var(--nav-link-color);
    text-decoration: none;
    padding: 1rem;
}

nav a:link, nav a:visited {
    color: var(--nav-link-color);
}

nav a:hover {
    color: var(--nav-hover-background-color);
    background-color: var(--nav-hover-background-color);
}