:root {
  --catyellow: #EBE1A0;
  --off-black: #171404;
  --logo-outline: #393419;
  --accent-yellow:#B1973D;
}


* {
  margin:0;
  padding: 0;
}


html {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 12px;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--catyellow);
  color: var(--off-black);
}

div#container {
width: 700px;
height: auto;
margin: 0px auto;
}
                  
header {
  width: 100%;
  height: auto;
  float: left;
}

header img {
  width: 20%;
  padding: 20px;
  margin: 0px auto;
  display: block;
}

main {
  width: 100%;
  height: auto;
  float: left;
}

main p {
  text-align: center;
  padding: 30px;
  padding-top: 10px;
  padding-bottom: 50px;
 
}

nav {
  width: 50%;
  height: auto;
  float: left;
}


ul, li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 213px;
}

ul {
  margin: 0px auto;
  display: block;
}



li {
  height: 20px; 
  margin: 5px;
  padding-top:5px;

}

nav a {
  text-decoration: none;
  color: var(--off-black);

}



nav img {
  width: 25px;
  margin-top:-5px;
  float: left;
  margin-right: 20px;
}

span {
  font-style: italic;
  color: var(--logo-outline);
  font-size: 10px;
}

nav a:hover, nav a:hover span{
color: var(--accent-yellow);
}


content {
  width: 50%;
  height: auto;
  float: left;

}

content img {
  width: 70%;
  margin: 0px auto;
  display: block;
}



@media(max-width: 700px) {
  div#container {
    background-color: red;
    width: 100%;
    margin: 0px auto;

  }

  header img {
  padding: 10px;
    min-width: 120px;
  }

  main p {
  padding: 20px;
 
}


  main, nav {
    font-size: 12px;
  }

  nav {
    width: 100%;
  }

  ul {
    display: block;
    margin: 0px auto;
  }

  content {
    width: 100%;
  }

  content img {
    width: 60%;
    max-width: 400px;
    margin-top: 20px;

  }



  
}