/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/food/foo-7/foo635.cur), auto !important;} /* End https://www.cursors-4u.com */body{
  background-color: pink;
}

h1 {
  font-family: CirrusCumulus, monospace;
}

p, ul{
  font-size: 20px;

}


ul{
  margin-top: 15px;
  padding-inline-start: 0px;


}
li{
  list-style: none;
  padding: 0;

}
  li::before {
    content: "✩   ";
  }


nav{
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 15px;
}

header{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  margin-right: 20px;
}

.home{
  display: grid;
  grid-template-rows: repeat(3, 1);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  text-align: center;
  justify-items: center;
  font-size: 2em;
  font-family: CirrusCumulus, monospace;
}


iframe {
  border: 1px dotted;
  
}

.divider{
  outline: solid;
  padding:0;
  margin:0;
}


.letter {
  display: none;
  margin-right: 10%;
  padding: 10px;
  text-align: left;
  border: none;
  box-shadow: 0 0 100px teal;
}

.menu{
  display:none;
  Text-align: center;
}

footer {
 padding-top: 15px;
  padding-bottom: 15px;
  text-align: left;
}

/* Style the collapsible button */
.collapsible {
  background-color: transparent;
  color: black;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 18px;
  position: relative;
  border-top:1px dotted black;
  border-bottom: 1px dotted black;
  text-align: left;
  outline: none;
  font-size: 40px;
}

/* The gold icon for the collapsible button */
.collapsible:after {
  content: '\002B'; /* Unicode character for "plus" sign (+) */
  font-size: 40px;
  color: black;
  float: right;
  margin-left: 5px;
}

/* Style the active state with a different icon */
.collapsible.active:after {
  content: "\2212"; /* Unicode character for "minus" sign (-) */
  color: black;
}

/* Style the content area */
.content {
  padding: 0 18px;
  color:black;
  display: none;
  overflow: hidden;
  background-color: transparent;
  border: 1px dotted black;
}


/* Expanded content */
.collapsible.active + .content {
  /* max-height: 700px; /* Adjust based on content length */
}


#myBtn{
 margin-bottom: 15px;
}


@media screen (max-width: 700px){
  
.playable{
  width:400px;
}
  
}