:root {
  /* global color variables for simplicity */
  --color-dark:#574E6E;
  --color-med:#7A7094;
  --color-lite:#B5FFF4;
  --color-hlite:#EDFFF5;
  --color-accent:#FF8CF1;
}

html, body {
  background:linear-gradient(#eee6ff, #ffccff, #ffffe6, #e6ffe6, #e6ffff);
  height:100%;                  /* makes gradient span the whole page */
  background-attachment:fixed;  /* keeps background in place during scroll */
  
  font-family:Courier;
  font-size:16px;
  color:var(--color-dark);
}

body {
    cursor: url("https://cursors2.totallyfreecursors.com/thumbnails/dragonflyglitter4.gif"), auto;
}

body a {
  font-style:italic;
  font-variant:small-caps;
  font-size:16px;
  color:var(--color-accent);
}

a:hover {
  color:var(--color-hlite);
}

body h1, h2, h3, h4 {
  font-variant:small-caps;
}

body h1 {
  font-size:50px;
}

body h3 {
  font-size:30px;
}

body h4 {
  font-size:25px;
}

.page-header {
  display:flex;
  align-items:center;
  width:60%;
  margin:auto;
  padding:0px;
}

.header-column {
  flex:1;
}
  

#head-img {
  max-width:100%;
  height:auto;
}

.button {
  font: bold 25px;
  border-radius:10px;
  white-space:nowrap;
  text-decoration: none;
  background-color:var(--color-accent);
  color:var(--color-dark);
  padding: 2px 6px 2px 6px;
  border-top: 1px solid var(--color-hlite);
  border-right: 1px solid var(--color-dark);
  border-bottom: 1px solid var(--color-dark);
  border-left: 1px solid var(--color-hlite);
}

.navigation-bar:a {
    font-style:bold;
    font-variant:small-caps;
    font-size:16px;
    color:var(--color-accent);
}


.reflow-blocks {
  padding:0px;
  display:flex;
  gap:0px;
  flex-flow:row nowrap;
  width:95%;
  margin:auto;
  justify-content:center;
}

.left-sidebar {
  padding:0px;
  display:flex;
  gap:15px;
  flex-flow:column nowrap;
  width:20%;
  margin:10px;
  order:1;
}

.center-column {
  padding:0px;
  display:flex;
  gap:15px;
  flex-flow:column nowrap;
  width:55%;
  margin:10px;
  order:2;
}

.right-sidebar {
  padding:0px;
  display:flex;
  gap:15px;
  flex-flow:column nowrap;
  width:20%;
  margin:10px;
  order:3;
}

.block {
  border:1px;
  border-style:dashed;
  border-color:var(--color-dark);
  padding:0px;
  display:flex;
  flex-direction:column;
}

.block-title {
  background:var(--color-lite);
  text-align:center;
  font-size:18px;
  font-weight:bold;
  padding:5px;
}

.block-content-hlite {
  background:var(--color-hlite);
  padding:30px;
}

.block-content-lite {
  background:var(--color-lite);
  display:grid;
  justify-content:center;
  padding:10px;
}


@media screen and (max-width: 1000px) {
  
  .page-header {
    display:flex;
    align-items:center;
    width:100%;
    margin:auto;
    padding:0px;
  }
  
  .header-column {
    flex:1;
  }
  
  .reflow-blocks {
    padding:0px;
    margin:auto;
    display:flex;
    gap:10px;
    flex-flow:column wrap;
    width:90%;
    justify-content:center;
  }
  .left-sidebar, .center-column, .right-sidebar {
    width:100%;
    margin:auto;
    gap:10px;
  }
  .left-sidebar {
    order:2;
  }
  .center-column {
    order:1;
  }
  .right-sidebar {
    order:3;
  }
}