body {
  background-color: #ccc;
  margin: 0;
  padding: 0;
}

#accordion {
  width: 60%;
  margin: 150px auto;
  height: 50%;
}

#accordion ul {
  text-align: center;
  margin: 0;
}

#accordion ul li {
  list-style-type: none;
  cursor: pointer;
  font-family: "roboto", sans-serif;
  padding: 0.4em;
  font-size: 1.4em;
  color: white;
  letter-spacing: 0.2em;
  transition: 0.3s ease all;
  text-shadow: -1px 0 grey, 0 1px grey, 1px 0 grey, 0 -1px grey;
}

#accordion ul li:nth-of-type(1) { background-color: #3498db; }

#accordion ul li:nth-of-type(2) { background-color: #2c3e50; }

#accordion ul li:nth-of-type(3) { background-color: #e74c3c; }

#accordion ul li:nth-of-type(4) { background-color: #1abc9c; }

#accordion ul li:hover { color: #ccc; }

#accordion ul a { color: #333; }

.panel {
  display: none;
  padding: 25px;
  border: 3px #bfbfbf solid;
  margin: 10px;
  font-family: "roboto", sans-serif;
  padding: 0.4em;
  font-size: 1.4em;
  color: white;
  letter-spacing: 0.2em;
  background-color: white;
  color: #333;
}
 @media (max-width: 800px) {

#accordion {
  width: 100vw;
  height: 100vh;
  margin: 0;
}
}

/*# sourceMappingURL=styles.css.map */