/* Global variables for colours across the site */
:root {
    --accent: #F18049;
    --accent2: #f181493d;
    --main: #333;
    --light: #666;
    --lighter: #f3f3f3;
    --border: #e6e6e6;
    --bg: #fff;
}

body {
    background: var(--bg);
    color: var(--main);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
    font-size: 1.3em;
    display: flex;
    flex-direction: column;
    text-align: left;
    width: 90%;
    margin: 0 auto;
    }

header {
    font-size: 4em;
    font-weight: lighter;
}


code {
    word-wrap: break-word;
}

/* Format hyperlinks */
a, a:visited {
    color: var(--accent);
    text-decoration-color: var(--accent2) ;
}
a:hover, a:focus {
    text-decoration-color: var(--accent);
}


/* Navigation */
ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--main);
}
li.nav {
    float: none;
}
li.nav a {
    display: block;
    color: var(--bg);
    text-align: center;
    padding: 14px;
    text-decoration: none;
}
ul.nav li.nav a:hover:not(.active){
  background-color: var(--accent);
}
.active {
    background-color: var(--accent);
}

/* Make the website responsive - note trying to default to small screen responsive for larger */


@media screen and (min-width: 45em) {
  ul.nav li {float: left;}
  main { width: 70%;
          margin: auto; }
}