* {
    padding:0;
    margin:0;
    box-sizing: border-box;
}

body {
    padding: 3% 13%;
    font-family: Montserrat;
    background-image: url(../img/bg.gif);
    background-size: repeat;
    color:rgb(255, 255, 255);
    max-width: 100%;
    display: grid;
    grid-template: "header header header" auto "asideLeft main asideRight" auto "footer footer footer" auto;
    grid-template-rows: auto auto auto;
    grid-template-columns: 220px auto 220px;
    grid-template-areas: "header header header" "asideLeft main asideRight" "footer footer footer";
    column-gap:1em;
}

a {
    color:rgba(190, 120, 240, 0.5);
    font-family: 'Jacquarda Bastarda 9';
    font-size:large;
    font-style: normal;
    text-decoration:none;
    text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.75);
}

a:hover {
    text-decoration: underline wavy rgba(255, 255, 255, 0.75);
    font-style: oblique;
    color:rgb(190, 120, 240);
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.50);
    transition: all 500ms ease-in;
}

.jb9 {
    font-family: 'Jacquarda Bastarda 9';
    font-size:1.3rem;
}

.box {
    background-image: url('../img/purpl065.jpg');
    border:3px rgb(190, 120, 240) double;
    border-radius: 10px;
}

.sparkle {
    text-shadow: 0px 0px 5px rgb(190, 120, 240);
}

.divider {
  text-align: center;
  margin:1em;
}

/* HEADER */

header {
    position: relative;
    text-align: center;
    grid-area:header;
    font-family: 'Jacquarda Bastarda 9';
    font-size: 2.5em;
}

header > a {
    color:rgb(190, 120, 240);
    font-size: inherit;
}

header > a:hover {
    color:rgba(255, 255, 255, 0.75);
    text-decoration: underline dotted;
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.50);
    transition: all 500ms ease-in;
    font-style: normal;
}

/* ASIDES */

aside {
  height: 700px;
  max-height: 100%;
}

#aside-l {
    grid-area:asideLeft;
}

#aside-r {
    grid-area:asideRight;
}

.aside-box {
    position: relative;
    color:rgba(65, 23, 95, 1);
    margin-top: 2em;
  }

.aside-content {
  padding:1em;
  max-height: 200px;
  overflow: auto;
}

.no-margin {
  margin-top:0;
}

.box-title {
    position: absolute;
    right:5px;
    top: -25px;
    z-index: 2;
    color: rgb(190, 120, 240);
    text-transform: lowercase;
}

.aside-box a {
    color:inherit;
    font-family: Montserrat;
    font-size: medium;
}

.aside-box a:hover {
    text-decoration: underline double;
    text-align: end;
    text-shadow: 0px 0px 20px rgba(65, 23, 95, 0.5);
    transition: all 250ms ease-out;
    font-style: normal;
}

ul {
    list-style-type: none;
}

.nav-img {
    width: 20px;
}

/* MAIN */

main {
    height: 700px;
    grid-area: main;
    overflow: auto;
}

.box-main {
  position: relative;
  border: 2px rgba(255, 255, 255, 0.5) double;
  background-color: rgba(65, 23, 95, 1);
  border-radius: 10px;
  color:white;
  padding:1em;
  margin:1em;
  margin-top: 2em;
}

.box-main > .box-title {
  color:rgba(65, 23, 95, 1)
}

p > a:hover {
    text-decoration: underline wavy rgba(255, 255, 255, 0.75);
    font-style: oblique;
    color:rgb(190, 120, 240);
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.50);
    transition: all 500ms ease-in;
}

/* FOOTER */

footer {
    grid-area:footer;
    text-align: end;
    padding-right: 2vh;
    font-family: 'Montserrat Alternates';
}

footer > a {
    text-decoration: none;
    text-shadow: none;
    color:white;
}

footer > a:hover {
    text-decoration: none;
    text-shadow: none;
    color:white;
}

/* STATUS CAFE */

#statuscafe-username {
  display: none;
}

/* CRT EFFECT */
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
.crt {
  animation: textShadow 1.6s infinite;
}