/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

body {
  background-color: #bde094;
  color: #361c1a;
  font-family: Poppins, Helvetica;
   background-image: url("https://lostinzampanio.neocities.org/observer_branches/maze_background_brown.png");
  
   cursor: url('https://lostinzampanio.neocities.org/wanderer.png'),auto;
   
}




div.gallery {
  margin: 5px;
  float: left;
  width: 180px;
   height: auto;
}

div.gallery:hover {
background-color:#277506;
color: white;
 border-radius: 8px;
 border-color: black;
}

div.gallery img {
  width: 100%;
  height: auto;
}

.desc {
  padding: 15px;
  text-align: center;
}




table, th, td {
  border:1px solid black;
  padding: 5px;
}
th {
  background-color: #277506;
  color: white;
}
table {
  border-collapse: collapse;
}


.clear {
  clear: left;
}




.border {
 border-width:3px;
 border-style:solid;
 border-color:#277506;
 border-radius: 8px;
 padding: 17px;
}


#memberlist {
  background-color: #FFFFF0;
  font-family: Times New Roman;
  padding: 2%;
  text-align: left;
  font-size: 22px;
  
  }
  
#memberlist a {color:inherit; text-decoration: underline;}
#memberlist a:visited {color:inherit;}
#memberlist a:hover {text-decoration: none;}
#memberlist a:active {color: red;}

.flyer {
  background-color: #FFFFF0;
  font-family: Times New Roman;
  padding: 2%;
  text-align: center;
  font-size: 22px;
  }
  
  .center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

.greentext {
  color: #277506;
}


.stroke {
    text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
  }

  
.typewriter {
  color: black;
  font-family: Courier;
}

a {
  text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
a:link {
  color: #277506;
}



 /* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #277506;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: fit-content;
  border: 2px solid green;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-radius: 8px;
  
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #339c06;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #FFFFF0;
}

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;
  -epub-word-break: break-all;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -epub-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

#container {
  max-width:800px; /* this is the width of your layout! */
  /* if you change the above value, scroll to the bottom
  and change the media query according to the comment! */
  margin: 0 auto; /* this centers the entire page */
  background-color: #f6e1a2;
  border-radius: 10px;
  border-style: solid;
  border-color: #592d00;
  padding:3%;
   cursor: auto;
}

@media only screen and (max-width: 700px) {
  #flex {
    flex-wrap:wrap;
  }
  aside {
    width:100%;
  }}