/*********************************
 * Stylesheet copyright notice
 * Web design: Peter Grondelaers
 * Original date: < 2013-02-04
 * Last update: 2021-04-14
 ********************************/

/* Transitions:
 *  show shadow: duration: .75s, delay: .5s
 *  show text:   duration: .75s, delay: .5s
 *  show logo:   duration: .75s, delay: 0s
 *  hide shadow: duration: .75s, delay: 0s
 *  hide text:   duration: .75s, delay: 0s
 *  hide logo:   duration: .75s, delay: .5s
 */

#copyright_notice {
  background       : rgba(255,255,255,0);
  display          : grid;
  grid-template-columns: 1fr 5.5em;
  line-height      : 1.2;
  position         : fixed;
  bottom           : .75em;
  right            : .75em;
  transition       : background .75s, box-shadow .75s, width 0s .75s, height 0s .75s; /* hide shadow */
  z-index          : 999;
  width            : 0;
  height           : 0;
}

#copyright_notice:hover {
  background       : rgba(255,255,255,.75);
  box-shadow       : 0 0 10px rgba(0,0,0,.5);
  transition       : background .75s .5s, box-shadow .75s .5s; /* show shadow */
  width            : 14em;
  height           : 5.5em;
}

#copyright_notice p,
#copyright_notice a {
  color            : #000;
  font-family      : Calibri, Sans-Serif;
  font-size        : 1em;
}

#copyright_notice p {
  align-self       : center;
  opacity          : 0;
  text-align       : right;
  transition       : .75s; /* hide text */
  visibility       : hidden;
}

#copyright_notice:hover p {
  opacity          : 1;
  transition       : .75s .5s; /* show text */
  visibility       : visible;
}

#copyright_notice a {
  text-decoration  : none;
}

#copyright_notice a:hover,
#copyright_notice a:focus {
  text-decoration  : underline;
}

/* logos */
#copyright_notice svg.logo_grey,
#copyright_notice svg.logo_color {
  position         : absolute;
  bottom           : .75em;
  right            : .75em;
  transition       : .75s .5s; /* hide logo */
  transform-origin : bottom right;
}

#copyright_notice svg.logo_grey {
  animation        : show_copyright_notice 2s;
  opacity          : .6;
  transform        : scale(1);
  width            : 2em;
  height           : 2em;
}

#copyright_notice svg.logo_color {
  opacity          : 0;
  transform        : scale(.5);
  width            : 4em;
  height           : 4em;
}

@keyframes show_copyright_notice {
  from { transform-origin: center; transform: scale(0) rotate(-360deg); }
  to   { transform-origin: center; transform: scale(1) rotate(0deg); }
}

#copyright_notice:hover svg.logo_grey,
#copyright_notice:hover svg.logo_color {
  transition       : .75s; /* show logo */
}

#copyright_notice:hover svg.logo_grey {
  opacity          : 0;
  transform        : scale(2);
}

#copyright_notice:hover svg.logo_color {
  opacity          : 1;
  transform        : scale(1);
}