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

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

body {
background: #066964;
font-family: "Candara", "Open Sans", sans-serif;
font-size:16px;
color: var(--color1);
}

a {
  color: #67eff9;
}

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

.buttons {
  margin-left: auto;
  margin-right: auto;
  width: 8em
}

.tiny {
font-size: 12px;
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;
}


.header {
background: var(--color3);
margin-bottom: 30;
border-bottom: 1px solid var(--color1);
text-align: center;
overflow: hidden;
}

.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;
 }

.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(--color3);
padding: 20px;
padding-top:5px;
padding-bottom:5px;
border-top: 1px solid var(--color1);
text-align: right;
font-size:14px;
}




/*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;
  }
}