body {
   min-height: calc(100dvh - 1rem);
   max-width: calc(100dvw - 1rem);
   width: 70rem;
   margin: .5rem auto;
   display: grid;
   grid-template:
      'header header header' auto
      'nav nav nav' auto
      'l_aside main r_aside' 1fr
      'footer footer footer' 4rem
      / 12rem auto 12rem;
   gap: .5rem;
   background-color: black;
   background-image: url('/assets/images/space2.gif');
   color: white;
}

#uc {
   justify-self: center;
}

header {
   text-align: center;
   grid-area: header;
}

img#title_img {
   filter: drop-shadow(0 0 10px #ff00ff);
}

nav#main_nav {
   grid-area: nav;
   text-align: center;
   box-sizing: border-box;
   line-height: 0;
   border: 1px solid hsl(290, 100%, 50%);
}

nav#sub_nav {
   color: magenta;
   line-height: 2rem;
   font-family: "Comic Sans MS";
   max-width: 100%;
   display: flex;
   flex-direction: column;
}

nav#sub_nav ul {
   line-height: 2rem;
   list-style: none;
   padding-left: 1rem;
}

nav#sub_nav a {
   color: white;
}

nav#sub_nav a:hover {
   color: #0f0;
   filter: drop-shadow(0 0 5px #0f0);
}

nav#sub_nav a:active {
   color: red;
}

nav#sub_nav ul>details>ul>li>a {
   display: block;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
}

nav#sub_nav ul>details>ul {
   padding-left: 1.5rem;
   list-style: "✧ ";
}

main#main {
   grid-area: main;
   border: 1px solid hsl(280, 100%, 50%);
   padding: .5rem;
}

aside#left_side {
   grid-area: l_aside;
   border: 1px solid hsl(280, 100%, 50%);
}

aside#right_side {
   grid-area: r_aside;
   border: 1px solid hsl(280, 100%, 50%);
   background-image: url('/assets/images/matrix.gif');
}

footer#footer {
   grid-area: footer;
   border: 1px solid hsl(270, 100%, 50%);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
}


table {
   width: 100%;
}

#init-loader {
   display: none;
}

.discs {
   display: flex;
   flex-direction: column;
}

.discs>a>img {
   width: 128px;
}

.discs>a {
   margin: auto;
   margin-bottom: -5rem;
   transition-duration: 100ms;
}

.discs>a:last-child {
   margin: auto;
}

.discs>a:hover {
   transform: translateY(-1rem);
   transition: cubic-bezier(0.445, 0.05, 0.55, 0.95);
   transition-duration: 100ms;
}

.discs>a#blue_gem:hover {
   filter: drop-shadow(0 0 10px rgb(0, 110, 255));
}
.discs>a#poison_green:hover {
   filter: drop-shadow(0 0 10px rgb(0, 255, 55));
}
.discs>a#yellow_gold:hover {
   filter: drop-shadow(0 0 10px rgb(255, 242, 0));
}
.discs>a#pink_cherry:hover {
   filter: drop-shadow(0 0 10px rgb(255, 0, 144));
}
.discs>a#mystic_purple:hover {
   filter: drop-shadow(0 0 10px rgb(102, 0, 255));
}