/* Flashlight Overlay */

:root {
  cursor: default;
  --cursorX: 50vw;
  --cursorY: 50vh;
}
:root:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  pointer-events: none;
  background: radial-gradient(
    circle 10vmax at var(--cursorX) var(--cursorY),
    rgba(0,0,0,0) 0,
    rgba(0,0,0,.5) 0.125,
    rgba(0,0,0,.95) 0.25
  );
}

body,
.body {
  font-family: "times";
  font-style: italic;
  background-color: rgba(5,5,4,1);
  color: rgba(232,232,192,0.75);
  padding: 0px;
  margin: 0px;
  font-size: 11pt;
  text-align: center;
  transition: 1.5s ease !important;
}
.page-header {
  padding: 10px 0px 5px;
  cursor: default;
  font-size: 12pt;
  width: 100%;
  background-color: transparent;
  position: fixed;
  top: 0px;
}
.page-footer {
  cursor: default;
  font-size: 12pt;
  width: 100%;
  padding: 5px 0px 5px;
  position: fixed;
  bottom: 0px;
  text-align: center;
  background-color: rgba(255,255,255,0.125);
}
.mybox {
  cursor: default;
  /*
  color: rgba(192,192,192,0.75);
  background-color: rgba(63,55,37,0.175);
  background-image: radial-gradient( rgba(63,63,63,0.25) 40%, rgba(63,63,63,0.125), rgba(63,63,63,0) );
  */
  color: rgba(222,222,192,0.75);
  background-color: rgba(192,225,225,0.025);
  border-width: 1px;
  border-style: solid;
  border-color: rgba(192,225,255,0.25);
  border-radius: 15px;
  padding: 40px 30px 30px;
  text-align: center;
  vertical-align: bottom;
  margin: 5% 10%;
  height: auto;
  /*
  overflow: auto;
  box-shadow: 0px 10px 35px 25px rgba(0,0,0,0.25);
  */
  box-shadow: 0px 0px 50px 5px rgba(255,255,255,0.25),
              0px 0px 5px  2px rgba(255,255,255,0.05) inset;
  transition: 0.5s ease;
}
.quote, .punch, .author {
  cursor: default;
  text-align: center;
}
.punch {
  color: rgba(255,255,192,0.5);
}

.mybox:hover {
  color: rgba(222,222,192,1);
  background-color: rgba(192,225,225,0.05);
  text-shadow: 0px 0px 3px rgba(255,255,255,0.25);
  border-color: rgba(192,225,255,0.5);
  box-shadow: 0px 0px 100px 10px rgba(255,255,255,0.5),
              0px 0px   6px  3px rgba(255,255,255,0.125) inset;
  border-radius: 15px;
  transition: 1.5s ease !important;
}
a, a:active, a:visited {
  background-color: transparent;
  color: inherit !important;
  padding: 10px 5px;
  text-decoration: none;
  transition: 0.5s ease;
}
a:hover {
  color: rgba(252,232,31,0.95);
  background-color: rgba(63,63,63,0.25);
  text-decoration: none;
  border-radius: 7px;
  text-shadow: 0px 0px 3px #686868;
}
#container{
  font-size: 2.75em;
  padding: 30px 30px 30px;
  text-align: center;
  min-height: 200px;
}
#quote, #punch {
  font-size: 1em;
  margin-top: 20px;
  margin-bottom: 20px;
}
#author {
  font-size: 0.75em;
  margin-top: 30px;
}

.mybox.quote:root {
  cursor: url('../img/favicon.png'), default;
  /*
  cursor: alias;
  */
  --cursorX: 50vw;
  --cursorY: 50vh;
}
.mybox.quote:root:before   {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  pointer-events: none;
  background: radial-gradient(
    circle 20vmax at var(--cursorX) var(--cursorY),
    rgba(255,0,0,0   ) 0,
    rgba(255,0,0,0.5 ) 0.125,
    rgba(255,0,0,0.95) 0.25
  );
}