:root {
    --color1: #FFF;
    --color2: #000;
	--color3: #222;
	--color4: #67bff9;
	--headim: url(images/nightsky.png)
}

@media (prefers-color-scheme: light) {
  :root{
    --color1: #000;
    --color2: #FFF;
    --color3: #CCC;
    --color4: #054571;
	--headim: url(images/lightsky.png)
}
}

body {
  background: #064D69;
  font-family: "Candara", "Open Sans", sans-serif;
  font-size:medium;
  color: var(--color1);
  }
  
a {
    color: var(--color4);
  }

h1 {
  color: var(--color1);
  text-align: center;
  opacity: 0.999999;
}

summary {
  background-image: linear-gradient(to right, #ffa032cc, #3e82a8cc, #ffa032cc);
  border-radius: 2px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--color1);
  margin-bottom: 2px;
   }
   
details {
  margin-bottom: 12px;
   }

  
.buttons {
    margin-left: auto;
    margin-right: auto;
    width: 8em
}
  
.tiny {
  font-size: 9px;
  margin: 0 auto;
  text-align: center;
  }
  
/*Everything in the main box goes in this*/
.wrapper {
  width: 320px;
  margin: 0 auto;
  top: 0px;
  }
  
/*Everything on wider pages goes in this*/
.wrappercontent {
  width: 100%;
  max-width: 800px;
  margin: auto;
  top: 0px;
  background: var(--color1); 
  }

.header {
  align-items: bottom;
  background: var(--color1); 
  height: 200px;
  border: 3px solid var(--color1);
  text-align: center;
  overflow: hidden;
  background: var(--headim); /*Header image -- replace with your own!*/
  background-size:cover;
  }
  
.header img {
  overflow: hidden;
  }
  
img.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  overflow: hidden;
  float:left;
  border: 3px solid var(--color2);
  }

 /*If you want to use a smaller title or normal text, add .header p or .header h4 or whatever to the list*/
.header h2, .header p, .header h1 {
  color: var(--color1);
  text-align: center;
  margin: 10% auto; /*approx centered*/
  opacity: 0.999999;
}

.links {
  padding: 0px;
  margin:auto;
 }
  
.links ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.links li {
  padding: 30px;
  margin: 20px;
  text-align: center;
  border: 3px solid var(--color1);
  background: url("sky.jpg"); /*Header image -- replace with your own!*/
  background-size:cover;

}
   
.links a {
  color: var(--color1);
  text-align: center;
  text-decoration: none;
  font-size:1.2em;
    
  }
  

.linkbar {
  padding: 10px;
  margin:auto;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background: var(--color2); 
 }
  
.linkbar ul {
  list-style-type: none;
  margin: 0;
  padding: 20;
  width: auto;
}

.linkbar li {
  display: inline;
  margin: 10px;
}
   
.linkbar a {
  color: var(--color1);
  text-align: center;
  text-decoration: none;
  font-size:17px;
    
  }
  
.buttonbar ul {
  list-style-type: none;
  margin: 20;
  padding: 20;
  width: auto;
}

.buttonbar li {
  display: inline;
  margin: 15px;
  padding: 14px;
}
  
.focus {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border: 3px solid var(--color2);
  }

.highlight {
  background-image: linear-gradient(to right, #b43a5bcc, #3e82a8cc, #ffa032cc);
  border-radius: 6px;
  padding: 3px 6px;
   }

.poem {
  margin: auto;
  width: 50%;
  border: 3px solid var(--color4);
  padding: 10px;
  list-style-type: none;
   }

.poem li {
  margin: 2px;
  padding: 8px;
  font-size:17px;  
  text-align: center;
}

.poem a {
  font-size:19px;  
  text-decoration: none;
  font-weight: bold;
}
  
.widepoem {
  margin: auto;
  width: 90%;
  border: 3px solid  var(--color4);
  padding: 10px;
  list-style-type: none;
   }

.widepoem li {
  margin: 2px;
  padding: 8px;
  font-size:17px;  
}

.widepoem a {
  font-size:19px;  
  text-decoration: none;
  font-weight: bold;
}

.main {
  padding: 15px;
  margin: 0 auto;
  background: var(--color3);
  }
  
/*Prevent overflow of large images in main text areas.*/
.main img {
  max-width: 100%;
  height: auto;
  }
  
.footer {
  background: var(--color2);
  padding: 20px;
  padding-top:5px;
  padding-bottom:5px;
  border-top: 3px solid var(--color2);
  text-align: right;
  font-size:14px;
  }


/* ------- Sections ------- 

section {
  padding: calc(6em + 5vw) 5vw 8vw 5vw;
  /* ! Everything below is needed ! 
  display: none;
  position: absolute;
  left: 400;
  min-height: 100vh;
  width: 100%;
  background: var(--bgcolor);
}

section:target { /* Show section 
  display: block;
}

section#home { /* Show #home by default 
  display: block;
}

 
  
/*For narrow screens*/
@media(max-width: 790px) {
  .wrapper {
    width: 95%;
    }
  .header h1, .header h2, .header h3 { /*Vertical centering gets wonky when the box is variable width*/
    margin: 20% 5% auto;
    }
  }  

/*Mobile compatibility*/
@media(orientation: portrait) {
  .wrapper {
    width: 95%;}
  .header {
    height:230px;
    }
  .header h1, .header h2, .header h3 {
    margin: 20% 3% auto;
    }
  }

/* ------- Images Grid ------- */

.grid-container {
  display: grid;
  grid-template-columns: auto auto;
}
.grid-item {
  padding: 20px;
}