/* You can either copy the below and paste it between style tags on your HTML page, OR you can copy this to a file and name it .css and link it from your HTML page. */


:root {
  --bg-color:#DCE2BD; /* light green */
  --pg-color:#f9fcea; /* very light green */
  --accent:#93C0A4; /* dark green */
  --accent-2:#8E9B90; /* gray */
}

*{
  box-sizing:border-box;
}

html, body {
  margin:0;
  font-family:sans-serif;
  font-size:0.85em;
  /* here is where you'd add a background image */
}
body {
  background-color:var(--bg-color);
}
#container {
  background-color:var(--pg-color);
  width:60%;
  border-left:100px solid var(--accent);
  border-right:1px solid var(--accent-2);
  position:relative;
}
#outer {
  border-left:4px dotted var(--accent-2);
  margin-left:100px;
}
nav {
  background-color:var(--accent);
  position:absolute;
  top:100px;
  left:50px;
  border:1px solid var(--bg-color);
  width:120px;
  height:200px;
  z-index:9;
}
article { 
padding:50px;
  line-height:1.7em;
  
}
h2 {
  font-size:15px;
  border-bottom:1px solid var(--accent-2);
  padding-bottom:8px;
}
nav > ul {
  background-color:var(--accent-2);
  margin:20px;
  padding:0;
  list-style:none;
}
nav > ul > li {
  border-bottom:1px solid white;
  text-align:center;
}
nav > ul > li:last-child {
  border-bottom:none;
  text-align:center;
}
nav > ul > li > a {
  font-size:12px;
  padding-top:5px;
  padding-bottom:5px;
  display:inline-block;
  color:white;
}
 @media only screen and (max-width: 850px) {
   nav {
     left:0;
   }
   #container {
     width:100%;
     margin-left:0;
   }
   #outer {
     margin-left:0;
     
      width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

details {
  user-select: none;
}

details>summary span.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s;
  margin-left: auto;
}

details[open] summary span.icon {
  transform: rotate(180deg);
}

summary {
  display: flex;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

details {
  user-select: none;
}

details>summary span.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s;
  margin-left: auto;
}

details[open] summary span.icon {
  transform: rotate(180deg);
}

summary {
  display: flex;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}




      
.photopile { 
  display: flex; 
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}
.photopile figure { 
  display: inline-block;
  background: white;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  transform: rotate(2deg);
  margin: 15 -25px;
}
.photopile figure img {
  max-width: calc(100% - 2rem);
  margin: 1rem 2rem 0 1rem;
  border: 2px rgb(0,0,0,0.55) inset;
}
.photopile figcaption, .popovers figcaption {
  font-family:  /* set this to have it match the rest of the page */;
  text-align: center
  margin: 0.5rem 1rem 1rem 1rem;
  font-size: 1rem;
  color: black;
}
.photopile button { 
  background: none; 
  border: none;
  max-width: 40%;
}
.photopile button:hover, .photopile button:focus { 
  z-index: 3;
  cursor:pointer;
}
.photopile button:nth-child(2n) { 
  transform: rotate(-10deg);
}
.photopile button:nth-child(3n) {
  transform: rotate(5deg);
}
.photopile button:nth-child(4n) { 
  transform: rotate(4deg);
}
.photopile button:nth-child(5n) { 
  transform: rotate(-2deg);
}
.photopile button:nth-child(6n) {
  transform: rotate(-7deg);
}
:popover-open {
  border: none;
  box-shadow: 1px 4px 5px rgba(0,0,0,0.55);
  position: fixed;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%,-50%);
}
.popovers figure:popover-open {
  display: block;
  background: white;
  width: 88vmin;
}
.popovers figure:popover-open figcaption {
  margin: 2.5vmin 1rem 4vmin 1rem;
  font-size: 175%;
  color: black;
}
.popovers figure:popover-open img {
  margin: 4vmin 4vmin 0 4vmin;
  width: 80vmin;
  border: 4px rgb(0,0,0,0.55) inset;
}

.book {
  border: 7px solid black;
  background-color: white;
  border-radius: 15px;
  padding: 0 4px;
  width: 500px; /* adjust size */
  max-width: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
}
.pageL,	.pageR {
  height: 100%;
  width: 50%;
  display: inline-block;
  position: relative;
  border-radius: 10px;
}
.pageL {
  border-left: 1px grey solid;
}
.pageR { 
  border-right: 1px grey solid;
}
.seam {
  width: 7px;
  background:
    linear-gradient(to right,
    white, grey, white);
}

// Here is where you list your pages! You can use either ABSOLUTE or RELATIVE links. If you're not sure the difference, I recommend using full links starting with 'https://'

// here's where we list the pages. The first item is the URL and the second item is the title.
var webPages = [
            ["https://yesterweb.org/community/", "The Yesterweb Community"],
            ["https://yesterweb.org/link-directory/", "Link Directory"],
            ["https://yesterweb.org/zine/", "The Yesterweb Zine"],
            ["https://yesterweb.org/webring/", "The Yesterweb Webring"],
            ["https://yesterweb.org/radio/", "The Yesterweb Radio"],
            ["https://yesterweb.org/manifesto/", "Internet Manifestos"],
            ["https://yesterweb.org/bb/", "Bulletin Board"],
            ["https://yesterweb.org/community/gemini.html", "Gemini"],
            ["https://yesterweb.org/community/cafe/", "Yesterweb Cafe"],
            ["https://yesterweb.org/mascots/", "Yesterweb Mascots"],
            ["https://yesterweb.org/graphics/buttons.html", "88x31 Buttons"]
            ["https://yesterweb.org/no-to-web3/", "Keep the Web Free, Say No to Web3"]
        ]

// this function shuffles the array (reorder the items randomly)
function shuffle(webPages) {
	let currentIndex = webPages.length, randomIndex;

	// while there are items left to shuffle...
	while (currentIndex != 0) {
	// pick a remaining element...
	randomIndex = Math.floor(Math.random() * currentIndex);

	// decrease
	currentIndex--;

	// swap with current element
	[webPages[currentIndex], webPages[randomIndex]] = [webPages[randomIndex], webPages[currentIndex]];
	}
	return webPages;
}

function displayLinks(num) {
  shuffle(webPages);
  
  for (let i = 0; i < num; i++) {
    var link = "<a href='" + webPages[i][0] + "'>" + webPages[i][1] + "</a><br>";
    document.getElementById('randomPages').innerHTML += link;
   }
}

/* below is the code that executes our program 
you can change the '5' number to anything 
as long as it's lower than the total number of links in your array. */

/* it is guaranteed to have no duplicates! */ 
document.addEventListener("DOMContentLoaded", function() {
  displayLinks(5);
});