:root {
    --darkBlue: #1201b9;
    --cyan: #0cfed5;
    --lightBlue: #4dfcff;
    --sand: #f3e7c8;
    --darkSand: #6e572c;
    --black: #1b1410;
}

@font-face {
	font-family: 'ConteScriptReduced';
	src: url('ConteScriptReduced.ttf') format('truetype');
}

body {
    background: linear-gradient(180deg, var(--darkBlue) 0%, var(--cyan) 59%, var(--lightBlue) 100%);
    background-attachment: fixed;
    padding: 4rem;
    font-family: sans-serif;
    color: var(--black);
}

::selection {
    background-color: var(--lightBlue);
}

header,
main,
nav {
    background-color: var(--sand);
    background-image: url('../img/seamless_paper_texture-pale_yellow.jpg');
    border: 4px dashed var(--darkSand);
    border-radius: 1rem;
}

header,
main {
    padding: 2rem;
}

nav {
    flex-shrink: 0;
    margin-right: 3rem;
    width: 12rem;
    position: fixed;
    padding: 2rem 1rem;
}

nav ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

nav ul li {
    margin-bottom: 0.5rem;
}

nav ul li:last-of-type {
    margin-bottom: 0;
}

header {
    text-align: center;
    margin-bottom: 3rem;
}

header,
main {
    margin-left: 18rem;
}

h1, h2 {
    font-family: ConteScriptReduced, sans-serif;
    color: var(--darkBlue);
}

h1 {
    font-size: 3rem;
}

h2 {
    font-size: 2rem;
}

a {
    color: var(--darkBlue);
    text-decoration: none;
    border-bottom: 1px dotted;
    transition: 0.5s;
}

a:hover {
    background: linear-gradient(90deg, var(--lightBlue) 0%, var(--cyan) 100%);
}

hr {
    margin: 2rem auto;
    width: 50%;
    height: 3px;
    border: 0;
    background: linear-gradient(90deg, var(--lightBlue) 0%, var(--cyan) 25%, var(--darkBlue) 50%, var(--cyan) 75%, var(--lightBlue) 100%);
    border-radius: 5px;
}

p.center {
    text-align: center;
}

main ul li::marker {
    color: var(--darkBlue);
}

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

@media screen and (max-width: 1600px) {
    body {
        padding: 3rem;
    }

    nav {
        margin-right: 2rem;
    }

    header {
        margin-bottom: 2rem;
    }

    header,
    main {
        margin-left: 17rem;
    }
}

@media screen and (max-width: 1300px) {
    body {
        padding: 3rem 2rem;
    }

    nav {
        margin-right: 1rem;
        padding: 1rem;
    }

    header,
    main {
        margin-left: 16rem;
        padding: 1rem;
    }

    h1 {
        font-size: 2.5rem;
    }
}

@media screen and (max-width: 900px) {
    nav {
        display: none;
    }

    header,
    main {
        margin-left: 0;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 500px) {
    body {
        padding: 2rem 1rem;
    }
}