Beta version

assets/styles/main.scss

@@ -2,14 +2,25 @@
 @import '@fontsource/Lato/index.css';
 @import '@fontsource/Alexandria/700.css';
 
+$grid-breakpoints: (
+  xs: 0,
+  sm: 601px,
+  md: 996px,
+  lg: 1281px,
+  xl: 1921px,
+  xxl: 2561px
+);
+
 // Bootstrap & animations.
-@import 'bootstrap/dist/css/bootstrap.css';
-@import 'transition.scss';
-@import 'animate.css';
+@import '../../node_modules/bootstrap/scss/bootstrap';
+@import '../../node_modules/animate.css/animate';
+@import 'transitions';
 
 // CSS Variables.
 :root {
+  --animate-duration: 1s;
   --animate-delay: 0.75s;
+  --animate-repeat: 1;
 }
 
 // The HTML page.
@@ -49,6 +60,10 @@ body {
   color: inherit;
 }
 
+.list-style-type-none {
+  list-style-type: none;
+}
+
 .text-align-center {
   text-align: center;
 }
@@ -57,17 +72,45 @@ body {
   font-size: 14px;
 }
 
+.grid-cols-3 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.display-xs-none {
+  display: none;
+}
+
+.alex {
+  font-family: 'Alexandria', sans-serif;
+}
+
 // Query-overridable classes.
-.enderesque {
+.background {
   background-color: rgba(0, 0, 0, 0.5);
 }
 
+.dimensions {
+  width: 100%;
+  height: 100%;
+}
+
 .link {
   color: inherit;
-}
+  text-decoration: none;
+  transition: 0.3s ease;
 
-.link:hover {
-  color: cornflowerblue;
+  &:hover {
+    color: cornflowerblue;
+  }
+
+  &-hi {
+    @extend .link;
+    color: cornflowerblue;
+
+    &:hover {
+      color: royalblue;
+    }
+  }
 }
 
 .radial-gradient {
@@ -79,17 +122,79 @@ body {
   );
 }
 
-@media (prefers-color-scheme: dark) {
+@property --scrollbar {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: rgba(255, 255, 255, 0.15);
+}
+
+.scrollbar {
+  min-height: 128px;
+
+  transition: --scrollbar 0.15s ease;
+
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.3);
+
+  &:hover {
+    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.3);
+    --scrollbar: rgba(255, 255, 255, 0.3);
+  }
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 8px;
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 8px;
+    background-color: var(--scrollbar);
+  }
+}
+
+.fade-mask {
+  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0));
+}
+
+@media (prefers-color-scheme: light) {
   body {
     color: black;
   }
 
-  .enderesque {
+  .scrollbar {
+    scrollbar-color: rgba(0, 0, 0, 0.15) rgba(255, 255, 255, 0.3);
+
+    &:hover {
+      scrollbar-color: rgba(0, 0, 0, 0.3) rgba(255, 255, 255, 0.3);
+      --scrollbar: rgba(0, 0, 0, 0.3);
+    }
+
+    &::-webkit-scrollbar-track {
+      background-color: rgba(255, 255, 255, 0.3);
+    }
+  }
+
+  .background {
     background-color: rgba(255, 255, 255, 0.75);
   }
 
-  .link:hover {
-    color: darkslateblue;
+  .link {
+    &:hover {
+      color: royalblue;
+    }
+
+    &-hi {
+      color: royalblue;
+
+      &:hover {
+        color: darkblue;
+      }
+    }
   }
 
   .radial-gradient {
@@ -102,43 +207,57 @@ body {
   }
 }
 
-// Dimensions.
-@media (max-width: 575px) {
-  .enderesque {
-    width: 100%;
-  }
-}
-
-@media (min-width: 576px) {
-  .enderesque {
+// Dynamic classes.
+@include media-breakpoint-up(sm) {
+  .dimensions {
     width: 80%;
+    height: auto;
+
+    max-height: 90%;
   }
 
   .rounded-card {
     border-radius: 1em;
   }
+
+  .display-xs-none {
+    display: block;
+  }
+
+  .animate__animated-sm {
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-duration: var(--animate-duration);
+    animation-duration: var(--animate-duration);
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+  }
+
+  .animate__delay-1-5s {
+    -webkit-animation-delay: 1s;
+    animation-delay: 1s;
+    -webkit-animation-delay: calc(var(--animate-delay) * 1.5);
+    animation-delay: calc(var(--animate-delay) * 1.5);
+  }
 }
 
-@media (min-width: 768px) {
-  .enderesque {
+@include media-breakpoint-up(md) {
+}
+
+@include media-breakpoint-up(lg) {
+  .dimensions {
     width: 60%;
   }
 }
 
-@media (min-width: 992px) {
-  .enderesque {
-    width: 60%;
-  }
-}
-
-@media (min-width: 1200px) {
-  .enderesque {
-    width: 60%;
-  }
-}
-
-@media (min-width: 2000px) {
-  .enderesque {
+@include media-breakpoint-up(xl) {
+  .dimensions {
     width: 40%;
   }
 }
+
+@include media-breakpoint-up(xxl) {
+  .dimensions {
+    width: 30%;
+  }
+}

assets/styles/scrollbar.css

@@ -0,0 +1,14 @@
+body::-webkit-scrollbar {
+  width: 1em;
+}
+
+body::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: darkgrey;
+  outline: 1px solid slategrey;
+}
+
+/*# sourceMappingURL=scrollbar.css.map */

assets/styles/scrollbar.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["scrollbar.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EACI;;;AAGJ;EACE;EACA","file":"scrollbar.css"}

assets/styles/transition.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["transition.scss"],"names":[],"mappings":"AACE;EAEE;;AAGF;EAEE;EACA","file":"transition.css"}

assets/styles/transitions.css

@@ -6,4 +6,4 @@
   filter: blur(1rem);
 }
 
-/*# sourceMappingURL=transition.css.map */
+/*# sourceMappingURL=transitions.css.map */

assets/styles/transitions.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["transitions.scss"],"names":[],"mappings":"AACE;EAEE;;AAGF;EAEE;EACA","file":"transitions.css"}

assets/styles/transitions.scss

@@ -7,6 +7,6 @@
   &-enter-from,
   &-leave-to {
     opacity: 0;
-    filter: blur(1rem);
+    filter: blur(1em);
   }
 }