/**********************************/
/* Elements for default structure */
/**********************************/

img#consoleps4,
 img#consoleps5 {
  height: 2rem;
  opacity: 0;
  position: absolute;
  right: .8rem;
  transition: all 300ms ease-in-out;
  z-index: -1; }

img#consoleps4 {
  top: 2.5rem; }

img#consoleps5 {
  top: .5rem; }



/**********************************/
/* Elements for default structure */
/**********************************/

button#scroll {
  bottom: .75rem;
  cursor: pointer;
  display: none;
  position: fixed;
  right: .75rem;
  z-index: 100; }

button#scroll:before {
  background-image: url('../images/scroll.png');
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  left: -3rem;
  content: '';
  line-height: 4rem;
  position: absolute;
  top: 0;
  width: 5rem; }



/**********************************/
/* Elements for default structure */
/**********************************/

button#scroll {
  background: transparent; }

button#scroll span {
  color: rgba(var(--color-pink-dark), 1);
  display: block;
  font-family: 'SignPaint';
  font-size: 3.5rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 2.5rem;
  text-align: right;
  text-shadow:
    -.2rem 0 .1rem rgba(var(--foreground), 1),
    0 .2rem .1rem rgba(var(--foreground), 1),
    .2rem 0 .1rem rgba(var(--foreground), 1),
    0 -.2rem .1rem rgba(var(--foreground), 1);
  user-select: none; }


button#scroll span:nth-child(1) {
  margin-left: -.5rem;
  text-align: left; }

button#scroll span:nth-child(2) {
  font-size: 3rem;
  text-align: right; }



/**********************************/
/* Elements for default structure */
/**********************************/

div#content {
  opacity: 0;
  transition: opacity 300ms ease-in-out; }