:root {
  --primary: black;
  --secondary: white;
  --border: black;
}
body {
  color: white;
  background-image: none;
  font-family: 'Cassette';
  font-size: 2em;
  text-align: center;
  background-image: url(/assets/corkboard.jpg);
  background-size: cover;
}
@font-face {
  font-family: 'Cassette';
  src: url(/fonts/alphebetizedcassettetapes.ttf);
}
#navigation {
  width: 80%;
}
div {
  display: flex;
  align-items: center;
  justify-content: center;
}
details:hover a {
  color: white;
}
summary {
  text-decoration: underline;
}
a {
  color: black;
}
.stickynote {
  flex-flow: column;
  width: 25%;
  padding: 1%;
  position: absolute;
  aspect-ratio: 1;
  overflow: scroll;
  color: rgb(20, 20, 20);
}
.stickynote h3 {
  margin: 0;
}
.stickynote p {
  margin-bottom: 0;
}
.pink {
  background-color: pink;
}
.green {
  background-color: lightgreen;
}
.yellow {
  background-color: lemonchiffon;
}
#main {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
}
@media only screen and (orientation: portrait) {
  section h2 {
    margin-top: 0;
  }
  .stickynote {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 60%;
    font-size: 0.8em;
    margin: 2%;
  }
  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #main {
    align-items: center;
  }
}