/* Choose a base color on which to build color variables from lightest to darkest. */
/* You'll also define an "accent" color for links. */
:root {
  /* 5. Replace "darkorchid" with another color name of your choosing.
        Make sure it's a medium color (not too light or dark).
        You can find color names at http://tinyurl.com/css-colors. */
    --medium: oklch(from rgb(95,133,153) l c h) ; ;
  /* 1. Add an abbreviation for "calculate". 
        ⚠️ Leave a space around the "plus". */
  --lighter: oklch( from var(--medium) calc(l + .3) c h ) ; 
  /* 2. Fill in the blank to make an even lighter version of your medium color. */
  --lightest: oklch( from var(--medium) calc(l + .2) c h ) ;
  /* 3. Follow the "calc" pattern above to change these to oklch functions. 
        This time reduce the "l" value gradually. */
        ⚠️ The "l" is a lower-case L, not a number 1.
 --darker: oklch( from var(--medium) calc(l - .3) c h ) ;
  --darkest: oklch( from var(--medium) calc(l - .5) c h ) ;
  /* 4. Add 120 or 240 to adjust the link to a split-opposite color.
        You can also use "calc" to adjust the lightness or chroma. */
  --accent: oklch( from var(--medium) l c calc(h + 120) ) ;
  /* 6. Tweak your numbers until you're pleased with the result,
        then post this Pen to the appropriate channel.
        ⚠️ Remember not every combination of l c h will generate a color! */
}
/* Do not change anything below this line. */
body {
  margin: 5% ;
  font-family: verdana ;
  background-color: var(--lighter) ;
  font-size: 1.1em ;
}
h1 {
  color: var(--lightest) ;
  text-shadow: var(--medium) 6px 6px 6px ;
}
h3 {
  color: var(--lighter) ;
}
div {
  position: relative ;
  float: left ;
  margin: 20px ;
  margin-bottom: 5% ;
}
.subsection {
  width: 45% ;
  color: var(--darker) ;
}
.panel {
  padding: 1em ;
  font-size: .9em ;
  border-radius: 6px ;
  background-color: var(--medium) ;
  color: var(--darkest) ;
}
a {
  color: var(--accent) ;
}