2025-06-21 14:03:39 +01:00

109 lines
2.0 KiB
CSS

.blinkies {
justify-content: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.blinkies img {
width: 150px;
height: 20px;
transition: all 0.2s ease-in-out;
}
.blinkies img:hover {
transform: scale(1.1) rotate(5deg);
}
.blinkies img:nth-child(odd):hover {
transform: scale(1.1) rotate(-5deg);
}
.stamps {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 10px;
gap: 5px;
justify-content: center;
align-content: center;
}
.stamps img {
width: 99px;
height: 56px;
transition: all 0.2s ease-in-out;
}
.stamps img:hover {
transform: scale(1.1) rotate(5deg);
}
.stamps img:nth-child(odd):hover {
transform: scale(1.1) rotate(-5deg);
}
#spotify {
background-image: none;
backdrop-filter: blur(2px) brightness(0.6);
border: var(--secondary-background-color) 2px solid;
border-radius: 10px;
padding: 15px;
box-sizing: border-box;
background-repeat: no-repeat;
background-size: contain;
height: 300px;
width: 300px;
display: flex;
flex-direction: column;
}
#spotify-title {
font-size: 1.5rem;
font-weight: 900;
margin: 0;
padding: 0;
mix-blend-mode: difference;
color: white;
}
#spotify-artist {
color: white;
font-size: 1rem;
font-weight: 900;
margin: 0;
padding: 0;
mix-blend-mode: difference;
}
#button-collection {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
#button-collection img {
transition: all 0.2s ease-in-out;
}
#button-collection img:hover {
transform: scale(1.1) rotate(5deg);
}
#button-collection img:nth-child(odd):hover {
transform: scale(1.1) rotate(-5deg);
}
@media screen and (max-width: 650px) {
div#spotify {
box-sizing: border-box;
background-repeat: no-repeat;
background-size: contain;
height: 100%;
width: auto;
aspect-ratio: 1/1;
display: flex;
flex-direction: column;
}
}