:root {
    --black: #000000;
    --white: #faf0e6;
    --primary: #3cde5a;
    --secondary: #003F91;
    --primShade: #00530F;
    --secondShate: #5DA9E9;
    --tertiary: #F46262; 
  }

  /* p5 play sketch */
  /* #sketchHolder {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    position: relative;
  } */

  /* background */
  body{
    background-color: var(--white);
  }

  /* buttons */
  button{
    color: var(--primShade);
    background-color: var(--white);
    border: 1px solid var(--secondShate);
  }

  button:hover{
    color: var(--primary);
    background-color: var(--secondary);
    border: 1px solid var(--primShade);
  }

/* font */
.logo{
    color: var(--primary);
    text-shadow:
    1px 1px 2px var(--secondary),
    -1px 1px 0 var(--secondary),
    -1px -1px 2px var(--secondary),
    1px -1px 0 var(--secondary);
    font-size: 2.5em;
}

h2{
  color: var(--primShade);
}

h3 {
  color: var(--secondary);
}

p{
  padding-left: 1em;
  padding-right:1em;
}

/* nav bar */
nav {
    background-color: var(--secondary);
    text-align: center;
    padding: .001em;
  }
  
  .navlist {
    display: inline;
    padding: .5em;
  }
  
  .navlist a {
    text-decoration: none;
    background-color: var(--secondary);
    color: var(--white);
    font-size: 1.3em;
  }
  
  .navlist a:hover {
    background-color: var(--primary);
    color: var(--secondary);
    font-size: 1.3em;
  }