* {
    box-sizing: border-box;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

html {
    font-family: sans-serif;
    color: #003153;
    background-color: #F2D0A4;
    --background-color: #003153;
    --border-level-1: 13px solid var(--background-color);
    --border-level-2: 8px solid var(--background-color);
    --border-level-3: 5px solid var(--background-color);
    --border-level-4: 3px solid var(--background-color);
    --border-level-5: 2px solid var(--background-color);
    --border-level-6: 1px solid var(--background-color);
    --space-level-1: 2.3rem;
    --space-level-2: 1.6rem;
    --space-level-3: 1.0rem;
    --space-level-4: 0.6rem;
    --space-level-5: 0.4rem;
    --space-level-6: 0.2rem;
}

body {
    display: flex;
    flex-direction: column;
    gap: var(--space-level-1);
    margin: var(--space-level-1) auto;
    padding: var(--space-level-1);
    max-width: 80ch;
    border: var(--border-level-1);
    & header {
	border: var(--border-level-2);
	padding: var(--space-level-2);
	& nav {
	    border: var(--border-level-3);
	    padding: var(--space-level-3);
	    display: flex;
	    gap: var(--space-level-3);
	    & a {
		border: var(--border-level-4);
		padding: var(--space-level-4);
	    }
	}
    }
    & main {
	display: flex;
	flex-direction: column;
	gap: var(--space-level-2);
	border: var(--border-level-2);
	padding: var(--space-level-2);
	& p {
	    border: var(--border-level-3);
	    padding: var(--space-level-3);
	    & small {
		border: var(--border-level-4);
		padding: var(--space-level-4);		
	    }
	}
	& div {
	    border: var(--border-level-3);
	    padding: var(--space-level-3);
	    display: flex;
	    flex-direction: column;
	    gap: var(--space-level-3);
	    & p {
		border: var(--border-level-4);
		padding: var(--space-level-4);
	    }
	    & ul {
		border: var(--border-level-4);
		padding: var(--space-level-4);
		display: flex;
		flex-direction: column;
		gap: var(--space-level-4);
		& li {
		    border: var(--border-level-5);
		    padding: var(--space-level-5);
		}
	    }
	}
    }
    & footer {
	border: var(--border-level-2);
	padding: var(--space-level-2);
	display: flex;
	flex-direction: column;
	gap: var(--space-level-2);
	& small {
	    border: var(--border-level-3);
	    padding: var(--space-level-3);
	    & a {
		border: var(--border-level-4);
		padding: var(--space-level-4);
	    }
	}
    }
}