diff --git a/src/App.css b/src/App.css
index 0a01657..91eaac4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,403 +1,406 @@
:root {
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -khtml-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- /* browsers agreeing on stuff challenge (impossible) */
- background-color: #121212;
- font-family: monospace;
- overflow-x: hidden;
- color: #ffc8dd;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ /* browsers agreeing on stuff challenge (impossible) */
+ background-color: #121212;
+ font-family: monospace;
+ overflow-x: hidden;
+ color: #ffc8dd;
}
.footer a {
- color: #cdb4db;
+ color: #cdb4db;
}
.footer {
- position: fixed;
- bottom: 0;
- left: 0;
- margin: 10px;
- z-index: 1000;
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ margin: 10px;
+ z-index: 1000;
}
.musicartist {
- font-weight: bolder;
- margin-bottom: .5em;
+ font-weight: bolder;
+ margin-bottom: .5em;
}
.musicbutton {
- background-color: #272525;
- color: pink;
- font-family: Roboto, sans-serif;
- font-weight: 500;
- font-size: 14px;
- padding: 10px 30px;
- box-shadow: none;
- border-radius: 5px;
- transition: 639ms;
- transform: translateY(0);
- display: flex;
- flex-wrap: wrap;
- flex-direction: row;
- align-items: center;
- cursor: pointer;
- border: none;
- margin: 1em;
+ background-color: #272525;
+ color: pink;
+ font-family: Roboto, sans-serif;
+ font-weight: 500;
+ font-size: 14px;
+ padding: 10px 30px;
+ box-shadow: none;
+ border-radius: 5px;
+ transition: 639ms;
+ transform: translateY(0);
+ display: flex;
+ flex-wrap: wrap;
+ flex-direction: row;
+ align-items: center;
+ cursor: pointer;
+ border: none;
+ margin: 1em;
}
.musicdiv {
- background-color: rgba(0, 0, 0, 0.731);
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 1500;
+ background-color: rgba(0, 0, 0, 0.731);
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 1500;
}
.music-close-button-div {
- display: flex;
- justify-content: end;
+ display: flex;
+ justify-content: end;
}
.close-button {
- padding: 2;
- border: none;
- background: none;
- border-radius: 2px;
- background-color: #5e5a5a;
- text-decoration: none;
- color: pink;
- cursor: pointer;
- margin: 1em;
+ padding: 2;
+ border: none;
+ background: none;
+ border-radius: 2px;
+ background-color: #5e5a5a;
+ text-decoration: none;
+ color: pink;
+ cursor: pointer;
+ margin: 1em;
}
.musiclist {
- display: flex;
- justify-content: space-around;
- font-size: larger;
- flex-wrap: wrap;
- height: 80%;
- overflow-x: scroll;
+ display: flex;
+ justify-content: space-around;
+ font-size: larger;
+ flex-wrap: wrap;
+ height: 80%;
+ overflow-x: scroll;
}
.innermusic {
- width: 50%;
- height: 50%;
- border-radius: 2%;
- background: #121212;
- z-index: 1000;
+ width: 50%;
+ height: 50%;
+ border-radius: 2%;
+ background: #121212;
+ z-index: 1000;
}
.musicbutton:hover {
- border-radius: 5px;
- transition: 639ms;
- padding: 10px 30px;
- transform: translateY(-1px);
- border: none;
- box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
- -webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
- -moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
- background-color: #5e5a5a;
- animation: big 500ms infinite;
- transform: translateY(-0.3em);
- transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
+ border-radius: 5px;
+ transition: 639ms;
+ padding: 10px 30px;
+ transform: translateY(-1px);
+ border: none;
+ box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+ -webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+ -moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+ background-color: #5e5a5a;
+ animation: big 500ms infinite;
+ transform: translateY(-0.3em);
+ transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
}
.actualreviewdiv {
- overflow-y: scroll;
- height: 18em;
+ overflow-y: scroll;
+ height: 18em;
}
-.cardchild:hover+.actualreviewdiv {
- transition: 1s;
- transform: rotateY(100);
+.cardchild:hover + .actualreviewdiv {
+ transition: 1s;
+ transform: rotateY(100);
}
.header {
- margin-top: 6em;
- display: flex;
- align-items: center;
- justify-content: center;
+ margin-top: 6em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
-.cardchild h1 {
- font-size: 3em;
- text-align: center;
+.cardchild h1:not(:has(.listeningto)) {
+ font-size: 3em;
+ text-align: center;
}
.reviewheadertext {
- margin-bottom: -.2em;
+ margin-bottom: -.2em;
}
.cardchild p {
- margin-bottom: -1.5em;
+ margin-bottom: -1.5em;
}
.cardchild a {
- font-size: 1.5em;
- text-align: center;
- color: pink;
- text-decoration: underline;
- margin-bottom: 0%;
- animation: spawntop 1s;
+ font-size: 1.5em;
+ text-align: center;
+ color: pink;
+ text-decoration: underline;
+ margin-bottom: 0%;
+ .fadein {
+ animation: spawntop 1s;
+ }
}
.cardchild span {
- font-size: 1.5em;
+ font-size: 1.5em;
}
.cardchild img {
- max-width: 5em;
- margin: 0.5em;
+ max-width: 5em;
+ margin: 0.5em;
}
.cardchild:hover::-webkit-scrollbar {
- display: none;
+ display: none;
}
/* CAN BROWSERS JUST AGREE ON ONE FUCKING THING */
.cardchild {
- -ms-overflow-style: none;
- scrollbar-width: none;
- cursor: default;
- background-color: #272525;
- border-radius: 5%;
- width: 25em;
- height: 25em;
- margin-top: 1em;
- padding: 0.5em 5em 2em 5em;
- transform: translateY(-0em);
- transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
+ -ms-overflow-style: none;
+ scrollbar-width: none;
+ cursor: default;
+ background-color: #272525;
+ border-radius: 5%;
+ width: 25em;
+ height: 25em;
+ margin-top: 1em;
+ padding: 0.5em 5em 2em 5em;
+ transform: translateY(-0em);
+ transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
}
.theeaster {
- color: pink;
- padding: 8px;
- font-size: 21px;
- text-align: center;
- border-width: 0;
- background-color: #5555557a;
- border-style: solid;
- border-radius: 11px;
+ color: pink;
+ padding: 8px;
+ font-size: 21px;
+ text-align: center;
+ border-width: 0;
+ background-color: #5555557a;
+ border-style: solid;
+ border-radius: 11px;
}
.theeaster:focus {
- border-color: pink;
- box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
- -webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
- -moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
- transition: .5s;
+ border-color: pink;
+ box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+ -webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+ -moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+ transition: .5s;
}
.easteregg {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
}
.easteregginner {
- width: 70%;
- background-color: #272525;
- height: 10em;
+ width: 70%;
+ background-color: #272525;
+ height: 10em;
}
.cardchild:hover {
- box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
- -webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
- -moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
- background-color: #5e5a5a;
- animation: big 500ms infinite;
- transform: translateY(-0.3em);
- transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
+ box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+ -webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+ -moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
+ background-color: #5e5a5a;
+ animation: big 500ms infinite;
+ transform: translateY(-0.3em);
+ transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
}
.linktree {
- display: flex;
- justify-content: space-around;
+ display: flex;
+ justify-content: space-around;
}
.linktree img {
- cursor: pointer;
+ cursor: pointer;
}
.singlereview img {
- border-radius: 12%;
+ border-radius: 12%;
}
.singlereview {
- margin: 1em;
- border-radius: 3%;
- background-color: #00000040;
- display: flex;
- align-items: flex-start;
+ margin: 1em;
+ border-radius: 3%;
+ background-color: #00000040;
+ display: flex;
+ align-items: flex-start;
}
.cssishard {
- background-color: #121212;
+ background-color: #121212;
}
.singlemusic {
- cursor: pointer;
- min-width: 15em;
- max-width: 15em;
- margin: 1em;
- padding: 1em;
- border-radius: 3%;
- background-color: #272525;
- display: flex;
- align-items: flex-start;
+ cursor: pointer;
+ min-width: 15em;
+ max-width: 15em;
+ word-wrap: anywhere;
+ margin: 1em;
+ padding: 1em;
+ border-radius: 3%;
+ background-color: #272525;
+ display: flex;
+ align-items: flex-start;
}
.singlemusic img {
- max-width: 5em;
+ max-width: 5em;
}
.innermusic {
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
}
.reviewname {
- margin-bottom: 0.1em;
- font-weight: bolder;
+ margin-bottom: 0.1em;
+ font-weight: bolder;
}
.reviewinfo {
- display: flex;
- flex-direction: column;
+ display: flex;
+ flex-direction: column;
}
.reviewname {
- margin-bottom: 0.1em;
- font-weight: bolder;
+ margin-bottom: 0.1em;
+ font-weight: bolder;
}
.parent {
- width: 100%;
- height: 100%;
- display: flex;
- flex-wrap: wrap;
- justify-content: space-evenly;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
}
.header h1 {
- font-size: 3.6em;
- color: blanchedalmond;
- display: inline-table;
+ font-size: 3.6em;
+ color: blanchedalmond;
+ display: inline-table;
}
.cardchild h2 {
- display: inline-table;
- vertical-align: text-bottom;
+ display: inline-table;
+ vertical-align: text-bottom;
}
.header h1:not(:active) {
- animation: slide-right 1.5s;
+ animation: slide-right 1.5s;
}
.header h1:hover {
- animation: shake 10ms infinite;
+ animation: shake 10ms infinite;
}
.header img {
- border-radius: 25%;
- margin-right: 1em;
- vertical-align: middle;
+ border-radius: 25%;
+ margin-right: 1em;
+ vertical-align: middle;
}
.initialanim {
- animation: slide-left 1.5s;
+ animation: slide-left 1.5s;
}
.gaybackground {
- background-image: url("/gaybackground.png");
+ background-image: url("/gaybackground.png");
}
.animate {
- z-index: 10000000;
- transform: scale(10000);
- transition: 20s;
+ z-index: 10000000;
+ transform: scale(10000);
+ transition: 20s;
}
@keyframes slide-left {
- from {
- transform: translateX(-10000em);
- }
+ from {
+ transform: translateX(-10000em);
+ }
- to {
- transform: translateX(0);
- }
+ to {
+ transform: translateX(0);
+ }
}
@keyframes slide-right {
- from {
- transform: translateX(10000em);
- }
+ from {
+ transform: translateX(10000em);
+ }
- to {
- transform: translateX(0);
- }
+ to {
+ transform: translateX(0);
+ }
}
@keyframes bigsmall {
- 0% {
- max-width: 10em;
- }
+ 0% {
+ max-width: 10em;
+ }
- 50% {
- width: 10.5em;
- max-width: 10.5em;
- }
+ 50% {
+ width: 10.5em;
+ max-width: 10.5em;
+ }
- 100% {
- max-width: 10em;
- }
+ 100% {
+ max-width: 10em;
+ }
}
@keyframes spawntop {
- 0% {
- opacity: 0%;
- transform: translateY(100em);
- }
+ 0% {
+ opacity: 0%;
+ transform: translateY(1em);
+ }
- 100% {
- opacity: 100%;
- transform: translateY(0);
- }
+ 100% {
+ opacity: 100%;
+ transform: translateY(0);
+ }
}
@keyframes shake {
- 0% {
- transform: translate(0, 0) rotate(0deg);
- }
+ 0% {
+ transform: translate(0, 0) rotate(0deg);
+ }
- 25% {
- transform: translate(5px, 5px) rotate(5deg);
- }
+ 25% {
+ transform: translate(5px, 5px) rotate(5deg);
+ }
- 50% {
- transform: translate(0, 0) rotate(0eg);
- }
+ 50% {
+ transform: translate(0, 0) rotate(0eg);
+ }
- 75% {
- transform: translate(-5px, 5px) rotate(-5deg);
- }
+ 75% {
+ transform: translate(-5px, 5px) rotate(-5deg);
+ }
- 100% {
- transform: translate(0, 0) rotate(0deg);
- }
+ 100% {
+ transform: translate(0, 0) rotate(0deg);
+ }
}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index f82885b..da388f9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -121,7 +121,7 @@ function App() {