Added animation for age startup and transitions.

(And removed the unused css file)

assets/css/main.css

@@ -5,7 +5,6 @@
 
 body {
   margin: 0px;
-  height: 100%;
  }
 
 main,
@@ -21,6 +20,13 @@ main {
   margin-bottom: 0;
   margin-top: 0;
   min-height: calc(100vh - 10vh);
+  view-transition-name: main-page;
+  transition-property: opacity, display;
+  transition-duration: 1s;
+  opacity: 1;
+  @starting-style {
+    opacity: 0;
+  }
 }
 
 .main-page {
@@ -717,7 +723,7 @@ textfield {
 
 @font-face {
   font-family: "NerdFontsSymbols Nerd Font";
-  src: url("https://www.nerdfonts.com/assets/fonts/Symbols-2048-em Nerd Font Complete.woff2") format("woff2");
+  src: url("/assets/fonts/nf-symbols.woff2") format("woff2");
 }
 
 .nf-icons {
@@ -950,3 +956,32 @@ textfield {
     }
   }
 }
+
+@view-transition {
+  navigation: none;
+  animation: none;
+  
+}
+
+::view-transition-group(main-page) {
+  animation-timing-function: ease-out;
+}
+::view-transition-old(main-page) {
+  animation-name: fade-out;
+}
+
+::view-transition-new(main-page) {
+  animation-name: fade-in;
+}
+
+@keyframes fade-out {
+  0% { opacity: 1; translate: 0;}
+  50% { opacity: 0; translate: -1wv;}
+  100% { opacity: 0;}
+}
+
+@keyframes fade-in {
+  0% { opacity: 0; translate: -1wv;}
+  50% { opacity: 0; translate: 0;}
+  100% { opacity: 1;}
+}

assets/svg/applemusic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M509.9 452.2C503.5 479.6 482.7 495 454.8 500.2C430.3 504.7 409.9 505.8 390.3 490C366.4 469.9 366.1 436.6 387.6 415.6C404.6 399.4 428.5 396.1 464.4 389.8C470.4 388.7 475.6 387.3 480 382.4C486.4 375.2 484.4 378.3 484.4 219.2C484.4 208 478.9 204.9 467.4 206.9C459.2 208.3 281.7 241.5 281.7 241.5C271.5 243.7 268.3 246.7 268.3 258.2C268.3 492.9 269.4 482.1 265.8 497.7C261.6 515.9 250.4 529.6 235.6 537.2C218.8 546.5 188.4 550.6 172.2 547.6C129 539.5 113.8 489.6 143.1 461C160.1 444.8 184 441.5 219.9 435.2C225.9 434.1 231.1 432.7 235.5 427.8C245.6 416.3 237.3 171.2 240.7 157.6C241.5 152.4 243.7 148 247.8 144.7C252 141.2 259.6 139.2 261.2 139.2C465.2 101 490.1 96.1 493.6 96.1C505.1 95.3 511.7 102.1 511.7 113.7C511.9 458.2 512.8 439.7 509.9 452.2z"/></svg>

assets/svg/bandcamp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 72C183 72 72 183 72 320C72 457 183 568 320 568C457 568 568 457 568 320C568 183 457 72 320 72zM368.2 398.1L187.2 398.1L271.9 242L452.9 242L368.2 398.1z"/></svg>

assets/svg/discord.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M524.5 133.8C524.3 133.5 524.1 133.2 523.7 133.1C485.6 115.6 445.3 103.1 404 96C403.6 95.9 403.2 96 402.9 96.1C402.6 96.2 402.3 96.5 402.1 96.9C396.6 106.8 391.6 117.1 387.2 127.5C342.6 120.7 297.3 120.7 252.8 127.5C248.3 117 243.3 106.8 237.7 96.9C237.5 96.6 237.2 96.3 236.9 96.1C236.6 95.9 236.2 95.9 235.8 95.9C194.5 103 154.2 115.5 116.1 133C115.8 133.1 115.5 133.4 115.3 133.7C39.1 247.5 18.2 358.6 28.4 468.2C28.4 468.5 28.5 468.7 28.6 469C28.7 469.3 28.9 469.4 29.1 469.6C73.5 502.5 123.1 527.6 175.9 543.8C176.3 543.9 176.7 543.9 177 543.8C177.3 543.7 177.7 543.4 177.9 543.1C189.2 527.7 199.3 511.3 207.9 494.3C208 494.1 208.1 493.8 208.1 493.5C208.1 493.2 208.1 493 208 492.7C207.9 492.4 207.8 492.2 207.6 492.1C207.4 492 207.2 491.8 206.9 491.7C191.1 485.6 175.7 478.3 161 469.8C160.7 469.6 160.5 469.4 160.3 469.2C160.1 469 160 468.6 160 468.3C160 468 160 467.7 160.2 467.4C160.4 467.1 160.5 466.9 160.8 466.7C163.9 464.4 167 462 169.9 459.6C170.2 459.4 170.5 459.2 170.8 459.2C171.1 459.2 171.5 459.2 171.8 459.3C268 503.2 372.2 503.2 467.3 459.3C467.6 459.2 468 459.1 468.3 459.1C468.6 459.1 469 459.3 469.2 459.5C472.1 461.9 475.2 464.4 478.3 466.7C478.5 466.9 478.7 467.1 478.9 467.4C479.1 467.7 479.1 468 479.1 468.3C479.1 468.6 479 468.9 478.8 469.2C478.6 469.5 478.4 469.7 478.2 469.8C463.5 478.4 448.2 485.7 432.3 491.6C432.1 491.7 431.8 491.8 431.6 492C431.4 492.2 431.3 492.4 431.2 492.7C431.1 493 431.1 493.2 431.1 493.5C431.1 493.8 431.2 494 431.3 494.3C440.1 511.3 450.1 527.6 461.3 543.1C461.5 543.4 461.9 543.7 462.2 543.8C462.5 543.9 463 543.9 463.3 543.8C516.2 527.6 565.9 502.5 610.4 469.6C610.6 469.4 610.8 469.2 610.9 469C611 468.8 611.1 468.5 611.1 468.2C623.4 341.4 590.6 231.3 524.2 133.7zM222.5 401.5C193.5 401.5 169.7 374.9 169.7 342.3C169.7 309.7 193.1 283.1 222.5 283.1C252.2 283.1 275.8 309.9 275.3 342.3C275.3 375 251.9 401.5 222.5 401.5zM417.9 401.5C388.9 401.5 365.1 374.9 365.1 342.3C365.1 309.7 388.5 283.1 417.9 283.1C447.6 283.1 471.2 309.9 470.7 342.3C470.7 375 447.5 401.5 417.9 401.5z"/></svg>

assets/svg/placeholder.svg

@@ -0,0 +1 @@
+

assets/svg/soundcloud.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M640.2 362.6C638.9 385.7 628.7 407.4 611.8 423.1C594.9 438.8 572.6 447.5 549.5 447.2L331.5 447.2C326.7 447.2 322.1 445.2 318.7 441.8C315.3 438.4 313.4 433.8 313.4 429L313.4 194.2C313.2 190.2 314.3 186.2 316.5 182.8C318.7 179.4 321.8 176.7 325.5 175.1C325.5 175.1 345.6 161.2 387.8 161.2C413.6 161.2 438.9 168.1 461.1 181.3C478.4 191.5 493.4 205.1 505.2 221.4C517 237.7 525.2 256.2 529.4 275.8C536.9 273.7 544.7 272.6 552.5 272.6C564.2 272.5 575.8 274.8 586.7 279.3C597.6 283.8 607.2 290.6 615.4 299C623.6 307.4 630 317.3 634.3 328.3C638.6 339.3 640.6 350.9 640.2 362.6zM286.2 209.1C286.3 208.1 286.2 207.1 285.9 206.2C285.6 205.3 285.1 204.4 284.4 203.6C283.7 202.8 282.9 202.3 282 201.9C280.2 201.1 278 201.1 276.2 201.9C275.3 202.3 274.5 202.9 273.8 203.6C273.1 204.3 272.6 205.2 272.3 206.2C272 207.2 271.9 208.1 272 209.1C266 288 261.4 362 272 440.7C272.2 442.4 273 444 274.3 445.2C276.9 447.6 281.1 447.6 283.7 445.2C285 444 285.8 442.4 286 440.7C297.3 361.3 292.6 288.7 286 209.1L286.2 209.1zM242.2 236.4C242 234.6 241.1 232.9 239.8 231.7C238.5 230.5 236.7 229.8 234.8 229.8C232.9 229.8 231.2 230.5 229.8 231.7C228.4 232.9 227.6 234.6 227.4 236.4C219.5 304.3 219.5 372.9 227.4 440.8C227.7 442.6 228.6 444.2 229.9 445.3C231.2 446.4 233 447.1 234.7 447.1C236.4 447.1 238.2 446.5 239.5 445.3C240.8 444.1 241.7 442.5 242 440.8C250.8 373 250.8 304.3 242.1 236.4L242.2 236.4zM197.9 229.5C197.7 227.7 196.9 226.1 195.6 224.9C194.3 223.7 192.6 223.1 190.8 223.1C189 223.1 187.3 223.8 186 224.9C184.7 226 183.9 227.7 183.7 229.5C177 301.5 173.5 368.8 183.7 440.6C183.7 442.5 184.4 444.3 185.8 445.6C187.2 446.9 188.9 447.7 190.8 447.7C192.7 447.7 194.5 447 195.8 445.6C197.1 444.2 197.9 442.5 197.9 440.6C208.4 367.8 205.2 302.4 198 229.5L197.9 229.5zM153.9 250.1C153.9 248.2 153.1 246.3 151.8 244.9C150.5 243.5 148.6 242.8 146.6 242.8C144.6 242.8 142.8 243.6 141.4 244.9C140 246.2 139.3 248.1 139.3 250.1C131.2 313.4 131.2 377.6 139.3 440.9C139.5 442.7 140.3 444.3 141.7 445.5C143.1 446.7 144.8 447.4 146.5 447.4C148.2 447.4 150 446.7 151.3 445.5C152.6 444.3 153.5 442.7 153.7 440.9C162.5 377.6 162.6 313.4 154 250.1L153.9 250.1zM109.4 297.7C109.4 295.8 108.6 293.9 107.3 292.6C106 291.3 104.1 290.5 102.2 290.5C100.3 290.5 98.4 291.3 97.1 292.6C95.8 293.9 95 295.8 95 297.7C84.5 346.9 89.5 391.6 95.4 441.3C95.7 442.9 96.5 444.4 97.7 445.5C98.9 446.6 100.5 447.2 102.2 447.2C103.9 447.2 105.4 446.6 106.7 445.5C108 444.4 108.8 443 109 441.3C115.6 390.9 120.6 347.2 109.4 297.7zM65.3 290.2C65.1 288.4 64.2 286.7 62.9 285.4C61.6 284.1 59.7 283.5 57.9 283.5C56.1 283.5 54.3 284.2 52.9 285.4C51.5 286.6 50.7 288.3 50.5 290.2C41.2 340.4 44.3 384.6 50.8 434.7C51.5 442.3 64.4 442.2 65.2 434.7C72.4 383.8 75.7 340.9 65.5 290.2L65.3 290.2zM20.7 314.8C20.5 313 19.6 311.3 18.3 310C17 308.7 15.1 308.1 13.3 308.1C11.5 308.1 9.7 308.8 8.3 310C6.9 311.2 6 312.9 5.9 314.8C-2.6 348.5 0 376.4 6.5 410.2C6.7 411.9 7.5 413.5 8.8 414.6C10.1 415.7 11.7 416.4 13.5 416.4C15.3 416.4 16.9 415.8 18.2 414.6C19.5 413.4 20.3 411.9 20.5 410.2C28 375.7 31.7 348.4 20.9 314.8L20.7 314.8z"/></svg>

assets/svg/spotify.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M320 72C183 72 72 183 72 320C72 457 183 568 320 568C457 568 568 457 568 320C568 183 457 72 320 72zM420.7 436.9C416.5 436.9 413.9 435.6 410 433.3C347.6 395.7 275 394.1 203.3 408.8C199.4 409.8 194.3 411.4 191.4 411.4C181.7 411.4 175.6 403.7 175.6 395.6C175.6 385.3 181.7 380.4 189.2 378.8C271.1 360.7 354.8 362.3 426.2 405C432.3 408.9 435.9 412.4 435.9 421.5C435.9 430.6 428.8 436.9 420.7 436.9zM447.6 371.3C442.4 371.3 438.9 369 435.3 367.1C372.8 330.1 279.6 315.2 196.7 337.7C191.9 339 189.3 340.3 184.8 340.3C174.1 340.3 165.4 331.6 165.4 320.9C165.4 310.2 170.6 303.1 180.9 300.2C208.7 292.4 237.1 286.6 278.7 286.6C343.6 286.6 406.3 302.7 455.7 332.1C463.8 336.9 467 343.1 467 351.8C466.9 362.6 458.5 371.3 447.6 371.3zM478.6 295.1C473.4 295.1 470.2 293.8 465.7 291.2C394.5 248.7 267.2 238.5 184.8 261.5C181.2 262.5 176.7 264.1 171.9 264.1C158.7 264.1 148.6 253.8 148.6 240.5C148.6 226.9 157 219.2 166 216.6C201.2 206.3 240.6 201.4 283.5 201.4C356.5 201.4 433 216.6 488.9 249.2C496.7 253.7 501.8 259.9 501.8 271.8C501.8 285.4 490.8 295.1 478.6 295.1z"/></svg>

assets/svg/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M 439.895 112 L 503.879 112 L 364.133 288.199 L 528.527 528 L 399.84 528 L 298.973 382.602 L 183.699 528 L 119.629 528 L 269.066 339.5 L 111.473 112 L 243.422 112 L 334.5 244.898 Z M 417.422 485.801 L 452.855 485.801 L 224.117 152 L 186.055 152 Z"/></svg>

assets/svg/youtube.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M581.7 188.1C575.5 164.4 556.9 145.8 533.4 139.5C490.9 128 320.1 128 320.1 128C320.1 128 149.3 128 106.7 139.5C83.2 145.8 64.7 164.4 58.4 188.1C47 231 47 320.4 47 320.4C47 320.4 47 409.8 58.4 452.7C64.7 476.3 83.2 494.2 106.7 500.5C149.3 512 320.1 512 320.1 512C320.1 512 490.9 512 533.5 500.5C557 494.2 575.5 476.3 581.8 452.7C593.2 409.8 593.2 320.4 593.2 320.4C593.2 320.4 593.2 231 581.8 188.1zM264.2 401.6L264.2 239.2L406.9 320.4L264.2 401.6z"/></svg>

main.css

@@ -1,950 +0,0 @@
-@import url("/assets/css/fonts/jost.css");
-@import url("/assets/css/fonts/noto-sans-jp.css");
-@import url("/assets/css/fonts/plus-jarkata-sans.css");
-@import url("/assets/css/old.css");
-
-body {
-    margin: 0px;
-    height: 100%;
-}
-
-main,
-textarea,
-textfield {
-    font-family: Jost, "Noto Sans Japanese", sans-serif, --apple-system;
-    font-size: 1.25rem;
-}
-
-main {
-    margin: 0.75rem;
-    height: 100%;
-    margin-bottom: 0;
-    margin-top: 0;
-    min-height: calc(100vh - 10vh);
-}
-
-.main-page {
-    max-width: 2300px;
-    margin: 0 auto;
-}
-
-.logo {
-    height: 3.75rem;
-    width: auto;
-}
-
-hr {
-    margin: 2rem 0px;
-}
-
-nav {
-    z-index: 4;
-    position: -webkit-sticky;
-    position: sticky;
-    /*   width:100%; */
-    top: 10px;
-    background-color: #f5f5f5;
-    font-family:
-        "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
-    font-size: 1.25rem;
-    padding: 4px;
-    margin: 10px;
-    margin-top: 15px;
-    border-radius: 12px;
-    box-shadow: 0px 0px 12px 0.1px #d0d0d0;
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-
-    ul {
-        padding-left: 15px;
-        list-style-type: none;
-        margin: 0px;
-        align-content: center;
-
-        li {
-            display: inline-block;
-            padding-right: 4px;
-            vertical-align: middle;
-
-            p {
-                padding-top: 0.4rem;
-                vertical-align: middle;
-                margin: 0.5rem 1rem;
-            }
-        }
-
-        img {
-            margin-top: 0.25rem;
-            height: 1.5rem;
-            vertical-align: middle;
-            padding-right: 0.3rem;
-        }
-    }
-
-    a {
-        color: black;
-        text-decoration: none;
-
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-
-    .vertical-line {
-        width: 0.1rem;
-        background-color: black;
-        height: 100%;
-    }
-
-    .social {
-        font-size: 2.5rem;
-        padding-bottom: 0.4rem;
-        transition: 0.3s;
-    }
-
-    .social:hover {
-        opacity: 50%;
-    }
-
-    .dropdown {
-        margin: 0.75rem;
-        position: absolute;
-        background-color: #f5f5f5;
-        box-shadow: 0px 0px 12px 0.1px #d0d0d0;
-        padding: 0.25rem 0.5rem;
-        border-radius: 7px;
-        right: 0;
-        top: 6rem;
-        display: none;
-        opacity: 0;
-        transition: 0.3s;
-    }
-}
-
-.footer {
-    font-family: Jost, "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif;
-    position: sticky;
-    /*   width: 100%; */
-    background-color: white;
-    /*   bottom: 0; */
-    /*   left:0; */
-    z-index: 3;
-    padding: 1rem;
-    background-color: #ddd;
-    margin: 0px;
-    text-align: center;
-    align-content: center;
-}
-
-/*---nav---*/
-
-.menu {
-    padding-top: 0.4rem;
-    padding-bottom: 0.8rem;
-
-    p {
-        background-size: 0% 0.2em;
-        background-image: linear-gradient(#000, #000);
-        background-position-y: 104%;
-        background-position-x: 0%;
-        background-repeat: no-repeat;
-        transition: 0.3s ease-in-out;
-    }
-
-    p:hover,
-    .currentpage {
-        opacity: 60%;
-        background-size: 100% 0.2em;
-    }
-}
-
-.burger {
-    border: none;
-    display: none;
-    width: 70px;
-    height: 70px;
-    margin: 0 0;
-    position: relative;
-    position: relative;
-    cursor: pointer;
-    background-color: #f5f5f5;
-    border-radius: 12px;
-    transition: 0.2s ease-in-out;
-
-    span {
-        transition: 0.2s ease-in-out;
-        box-sizing: border-box;
-        display: block;
-        background-color: #000;
-        border-radius: 2px;
-    }
-
-    #hamburger {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        top: 0%;
-        left: 0%;
-
-        span {
-            width: 70%;
-            height: 5%;
-            top: 17.5%;
-            left: 16%;
-            position: relative;
-            margin: 12% 0;
-        }
-
-        span:nth-child(1) {
-            transition-delay: 0.2s;
-        }
-
-        span:nth-child(2) {
-            transition-delay: 0.3s;
-        }
-
-        span:nth-child(3) {
-            transition-delay: 0.4s;
-        }
-    }
-
-    #cross {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        top: 0%;
-        left: 1.5%;
-        transform: rotate(45deg);
-
-        span:nth-child(1) {
-            height: 0%;
-            width: 5%;
-            position: absolute;
-            right: 46%;
-            /*a / */
-            top: 10%;
-            transform: translate(-50%);
-            transition-delay: 0s;
-        }
-
-        span:nth-child(2) {
-            width: 0%;
-            height: 5%;
-            position: absolute;
-            right: 11%;
-            top: 48%;
-            transition-delay: 0s;
-        }
-    }
-}
-
-.burger:hover {
-    opacity: 40%;
-}
-
-.burger.open {
-    #hamburger {
-        span {
-            width: 0%;
-        }
-
-        span:nth-child(1) {
-            transition-delay: 0s;
-        }
-
-        span:nth-child(2) {
-            transition-delay: 0.1s;
-        }
-
-        span:nth-child(3) {
-            transition-delay: 0.2s;
-        }
-    }
-
-    #cross {
-        span:nth-child(1) {
-            height: 80%;
-            transition-delay: 0.3s;
-        }
-
-        span:nth-child(2) {
-            width: 80%;
-            transition-delay: 0.3s;
-        }
-    }
-}
-
-.dropdown {
-    display: none;
-    overflow: auto;
-    max-height: 70vh;
-}
-
-/*---- main ----*/
-.container {
-    position: relative;
-    height: 50vw;
-    width: 100%;
-    margin: auto;
-    margin-top: 1rem;
-}
-
-.carousel {
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    border: 1px solid #ddd;
-    border-radius: 0.5rem;
-    position: relative;
-    overflow: hidden;
-}
-
-.slider-bg {
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: cover;
-    background-position: center;
-    filter: blur(5px) brightness(75%);
-    -webkit-filter: blur(5px) brightness(60%);
-    z-index: 1;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    transition: 0.3s;
-    padding: auto;
-    border-radius: 0.5rem;
-    transform: scale(1.1);
-}
-
-.slider section {
-    overflow: hidden;
-    z-index: 1;
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-content: center;
-    transition: 0.3s;
-    padding: auto;
-    width: 100%;
-    height: 100%;
-    border-radius: 0.5rem;
-    font-family:
-        "Plus Jakarta Sans", "Noto Sans Japanese", sans-serif, --apple-system;
-
-    div {
-        color: #fff;
-        position: relative;
-        z-index: 2;
-        margin: 0px;
-        display: grid;
-        justify-content: center;
-        grid-template-rows: 3.5fr 1fr 1fr 5rem;
-        grid-template-columns: 1fr auto 1fr;
-    }
-
-    h1 {
-        font-size: 2rem;
-        grid-row-start: 2;
-        grid-row-end: 3;
-    }
-
-    p {
-        font-size: 1.25rem;
-        grid-row-start: 3;
-        grid-row-end: 4;
-    }
-
-    p,
-    h1 {
-        width: 60vw;
-        text-align: center;
-        grid-column-start: 2;
-        /*|•|*/
-        grid-column-end: 3;
-    }
-}
-
-.slider:hover {
-    cursor: pointer;
-}
-
-.prev,
-.next {
-    background-color: rgba(0, 0, 0, 0.3);
-    color: #fff;
-    position: absolute;
-    height: 5rem;
-    width: 5rem;
-    font-size: 4.5rem;
-    top: 50%;
-    transform: translate(0, -50%);
-    z-index: 2;
-    cursor: pointer;
-    border-radius: 0.5rem;
-    font-family: serif;
-
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.next {
-    right: 1rem;
-}
-
-.prev {
-    left: 1rem;
-}
-
-.pgctrl {
-    font-family: sans-serif, --apple-system;
-    z-index: 1;
-    position: absolute;
-    bottom: 0.5rem;
-    left: 50%;
-    vertical-align: middle;
-    transform: translate(-50%);
-    padding: 0px 0.5rem;
-    margin: 0px 0px;
-    background-color: rgba(0, 0, 0, 0.3);
-    border-radius: 10px;
-    list-style: none;
-    display: flex;
-    z-index: 2;
-    font-size: 4rem;
-    color: white;
-    cursor: pointer;
-    transition: 0.75s;
-
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-.control {
-    text-align: center;
-}
-
-/* Cards */
-
-.album-cards {
-    margin: auto;
-    margin-bottom: 2.5rem;
-    justify-content: center;
-    display: grid;
-    grid-template-rows: repeat(auto-fill, 23rem);
-    grid-template-columns: repeat(auto-fill, 23rem);
-    grid-gap: 1rem;
-
-    .card {
-        transition: 0.75s;
-        color: black;
-        background-color: #ddd;
-        height: 23rem;
-        border-radius: 7px;
-        text-decoration: none;
-
-        div {
-            z-index: 1;
-            position: inherit;
-            height: 100%;
-            width: 100%;
-            background-color: #ddd;
-            border-radius: 7px;
-            transition: 0.5s;
-        }
-
-        h2 {
-            font-size: 1.9rem;
-        }
-
-        p {
-            font-size: 1.2rem;
-        }
-
-        h2,
-        p {
-            color: white;
-            padding: 0.3rem 0.75rem 0.3rem 0.75rem;
-            position: relative;
-            z-index: 3;
-            opacity: 0;
-            transition: 0.5s;
-        }
-
-        .bg-img {
-            /*       background: url(/assets/img/t404_null-logo.png); */
-            background-size: cover;
-            position: absolute;
-            height: 23rem;
-            width: 23rem;
-        }
-    }
-
-    .card:hover {
-        .bg-img {
-            filter: blur(5px) brightness(50%);
-            -webkit-filter: blur(5px) brightness(50%);
-        }
-
-        h2,
-        p {
-            filter: none;
-            opacity: 1;
-        }
-    }
-}
-
-.half-image-cards {
-    margin: auto;
-    margin-bottom: 2.5rem;
-    justify-content: center;
-    display: grid;
-    grid-template-rows: repeat(auto-fill, 30rem);
-    grid-template-columns: repeat(auto-fill, minmax(23rem, 60rem));
-    grid-gap: 1rem;
-
-    .card {
-        transition: 0.75s;
-        color: black;
-        background-color: #ddd;
-        height: 30rem;
-        border-radius: 7px;
-        text-decoration: none;
-
-        div {
-            z-index: 1;
-            position: inherit;
-            height: 100%;
-            width: 100%;
-            background-color: #ddd;
-            border-radius: 7px;
-            transition: 0.5s;
-        }
-
-        h2 {
-            font-size: 1.9rem;
-        }
-
-        p {
-            font-size: 1.1rem;
-        }
-
-        h2,
-        p {
-            /*       color: black; */
-            padding: 0.3rem 10vw 0.3rem 5vw;
-            position: relative;
-            z-index: 3;
-            opacity: 0;
-            transition: 0.5s;
-        }
-
-        .bg-img {
-            /*       background: url(/assets/img/t404_null-logo.png); */
-            background-size: cover;
-            position: absolute;
-            background-position: center left;
-            height: 30rem;
-            width: 30rem;
-        }
-    }
-
-    .card:hover {
-        .bg-img {
-            filter: brightness(40%);
-            -webkit-filter: brightness(40%);
-            width: 8vw;
-            border-radius: 7px 0px 0px 7px;
-        }
-
-        h2,
-        p {
-            padding: 0.3rem 5vw 0.3rem 10vw;
-            filter: none;
-            opacity: 1;
-        }
-    }
-}
-
-.contact-cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, 23rem);
-    grid-gap: 1rem;
-    justify-content: center;
-    padding: 0;
-
-    li {
-        border-radius: 7px;
-        background-color: #ddd;
-    }
-}
-
-.contact-email {
-    .inputbox {
-        outline: none;
-        height: 3rem;
-        width: 100%;
-        display: block;
-        background: #efefef;
-        color: black;
-        border: 0px solid #505050;
-        border-radius: 5px;
-        transition: 0.3s;
-        margin-top: 0.5rem;
-        margin-left: -5px;
-        padding: 5px;
-        font-size: 0.95rem;
-    }
-
-    :not(textarea) {
-        text-align: center;
-    }
-
-    .inputbox:hover {
-        background: #dedede;
-    }
-
-    .inputbox:focus {
-        background: #cecece;
-    }
-
-    button {
-        width: 100%;
-        height: 3rem;
-        border-radius: 5px;
-        text-align: center;
-    }
-
-    .formbutton {
-        background: #272727;
-        color: #fff;
-        border: 0px;
-        transition-duration: 300ms;
-        cursor: pointer;
-    }
-
-    .formbutton:hover {
-        background: #727272;
-    }
-
-    .form {
-        border-radius: 5px;
-        align-items: center;
-        justify-content: center;
-        margin: auto;
-        padding: 4rem 2.5rem;
-        width: 65%;
-        background: #fdfdfd;
-        box-shadow: rgba(50, 50, 50, 0.1) 0px 4px 12px;
-    }
-
-    .error_box {
-        background: #ffeeee;
-        border-radius: 5px;
-
-        margin: auto;
-        align-items: center;
-        justify-content: center;
-        text-align: center;
-        padding: 1rem 1rem;
-        margin-bottom: 1.5rem;
-    }
-
-    .box {
-        height: 2rem;
-        width: 100%;
-        text-align: center;
-        border-radius: 5px;
-        margin: auto;
-        align-items: center;
-        justify-content: center;
-        padding: 0.5rem 0px;
-        margin-bottom: 1rem;
-    }
-}
-
-textarea,
-textfield {
-    padding: 5px;
-    resize: vertical;
-    min-height: 5rem;
-}
-
-.topic {
-    padding: 1rem;
-    font-size: 3rem;
-    margin-top: 3vw;
-    margin-bottom: 7vw;
-
-    a {
-        text-decoration: none;
-        color: black;
-        background-size: 0% 0.2em;
-        background-image: linear-gradient(black, black);
-        background-position-y: 104%;
-        background-position-x: 0%;
-        background-repeat: no-repeat;
-        transition: 0.3s ease-in-out;
-    }
-
-    a:hover {
-        opacity: 70%;
-        background-size: 100% 0.2em;
-    }
-}
-
-/* overall */
-.icons {
-    font-size: 2.25rem;
-    font-weight: 500;
-}
-
-@font-face {
-    font-family: "NerdFontsSymbols Nerd Font";
-    src: url("https://www.nerdfonts.com/assets/fonts/Symbols-2048-em Nerd Font Complete.woff2")
-        format("woff2");
-}
-
-.nf-icons {
-    font-family: "NerdFontsSymbols Nerd Font";
-}
-
-/* Releases */
-.release-track {
-    background-size: cover;
-    background-position: center;
-    height: 100%;
-    min-height: calc(100vh - 25rem);
-    padding: 5vw 5vw;
-    border-radius: 10px;
-    border: 1px solid #ddd;
-
-    strong {
-        color: #fff;
-    }
-
-    .text-box {
-        max-width: 1250px;
-        margin: 25% auto;
-        background-color: rgba(0, 0, 0, 75%);
-        height: 100%;
-        color: #ddd;
-        padding: 2rem;
-        border-radius: 7px;
-        font-size: 1.2rem;
-
-        a {
-            text-decoration: none;
-            color: #fff;
-            background-size: 0% 0.2em;
-            background-image: linear-gradient(#ccc, #ccc);
-            background-position-y: 104%;
-            background-position-x: 0%;
-            background-repeat: no-repeat;
-            transition: 0.3s ease-in-out;
-        }
-
-        a:hover {
-            color: #ccc;
-            background-size: 100% 0.2em;
-        }
-    }
-}
-
-/* info */
-.info {
-    text-decoration: none;
-    list-style-type: none;
-    font-size: 1.4rem;
-
-    li {
-        padding: 1rem;
-    }
-
-    a {
-        text-decoration: none;
-        color: #46f;
-        background-size: 0% 0.2em;
-        background-image: linear-gradient(#46f, #46f);
-        background-position-y: 104%;
-        background-position-x: 0%;
-        background-repeat: no-repeat;
-        transition: 0.3s ease-in-out;
-    }
-
-    a:hover {
-        opacity: 70%;
-        background-size: 100% 0.2em;
-    }
-
-    .title {
-        font-size: 1.6rem;
-    }
-}
-
-.subdiv {
-    padding: 1rem;
-}
-
-.long-br {
-    display: block;
-    height: 2rem;
-}
-
-@media screen and (width >=1180px) and (width<=1690px) {
-    /*if(width<1620px&&width>=1125px)*/
-
-    nav {
-        .dropdown {
-            .dropdown-social {
-                position: relative;
-                width: 17.5rem;
-                padding: 0rem 0rem;
-
-                a {
-                    transition: 0.2s;
-                    display: flex;
-                    padding: 1rem;
-                    border-radius: 7px;
-                    margin: 0.3rem 0;
-                }
-
-                a:hover {
-                    background-color: #ddd;
-                }
-
-                strong {
-                    margin-left: auto;
-                    margin-right: auto;
-                    align-content: center;
-                }
-
-                p {
-                    margin: 0.5rem 0;
-                }
-            }
-
-            .dropdown-menu {
-                display: none;
-            }
-        }
-
-        .menu,
-        .dropdown-open.dropdown,
-        .dropdown-open.dropdown-social {
-            opacity: 1;
-            display: initial;
-        }
-
-        .social,
-        .dropdown-open.dropdown-menu {
-            opacity: 0;
-            display: none;
-        }
-
-        .burger {
-            display: block;
-        }
-    }
-}
-
-@media screen and (width<1180px) {
-    /*if(width<1125px)*/
-
-    nav {
-        font-size: 1.4rem;
-
-        ul {
-            img {
-                height: 2.5rem;
-            }
-        }
-
-        .social {
-            font-size: 2rem;
-        }
-
-        .burger {
-            height: 100px;
-            width: 100px;
-        }
-
-        .dropdown {
-            .dropdown-social,
-            .dropdown-menu {
-                position: relative;
-            }
-
-            .dropdown-menu {
-                width: 18rem;
-                padding: 0rem 0rem;
-            }
-
-            .dropdown-social {
-                display: flex;
-                flex-wrap: wrap;
-            }
-
-            .dropdown-menu p,
-            .dropdown-social a {
-                transition: 0.2s;
-                padding: 1rem;
-                border-radius: 7px;
-                margin: 0.3rem 0;
-            }
-
-            .dropdown-menu p:hover {
-                background-color: #ddd;
-            }
-
-            .dropdown-social a:hover {
-                opacity: 50%;
-            }
-
-            hr {
-                margin: 0.75rem 0rem;
-                padding: 1rem;
-                border: 1px solid #aaa;
-            }
-        }
-
-        .social-name {
-            display: none;
-        }
-
-        .social,
-        .menu-item {
-            display: none;
-        }
-
-        .dropdown-open {
-            transition: 0.3s;
-            opacity: 1;
-            display: initial;
-
-            .dropdown,
-            .dropdown-social,
-            .downdown-menu {
-                display: initial;
-            }
-        }
-
-        .burger {
-            display: block;
-        }
-    }
-}