107 lines
2.0 KiB
CSS
107 lines
2.0 KiB
CSS
.meme-container {
|
|
align-self: flex-start;
|
|
position: relative;
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin-block: 5vh;
|
|
padding-block: 5vh;
|
|
}
|
|
|
|
.meme-bp {
|
|
padding-right: 45%;
|
|
}
|
|
|
|
.meme-wrapper {
|
|
background-image: url("../../../assets/tilted-rectangle.webp");
|
|
background-size: 100% 100%;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
width: 100%;
|
|
padding-block: 2.1em;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
display: flex;
|
|
height: 80vh;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.meme-bg {
|
|
background-image: url("../../../assets/meme.webp");
|
|
background-position: 60% 50%;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
height: calc(100% + 3vh);
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.meme-columns {
|
|
display: grid;
|
|
position: relative;
|
|
margin-block: calc(10% + 1.5625vh);
|
|
}
|
|
|
|
@media screen and (width <=1050px) {
|
|
.meme-container {
|
|
z-index: 999 !important;
|
|
width: 100%;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.meme-bp {
|
|
padding-right: 0%;
|
|
}
|
|
|
|
.meme-wrapper {
|
|
width: 100%;
|
|
padding-inline: 15%;
|
|
padding-left: 18%;
|
|
height: 80vh;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.meme-translucent {
|
|
max-width: 100%;
|
|
transition: 0.5s;
|
|
background-color: #020e10ac;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.meme-bg {
|
|
background-position: 50% 50%;
|
|
z-index: 999 !important;
|
|
}
|
|
|
|
.meme-columns {
|
|
display: grid;
|
|
position: relative;
|
|
margin-block: calc(25% + 1.5625vh);
|
|
transition: 0.5s;
|
|
}
|
|
}
|
|
|
|
@media screen and (width >=2200px) {
|
|
.meme-container {
|
|
width: 100%;
|
|
justify-content: center;
|
|
display: inline-block;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.meme-translucent {
|
|
max-width: 30%;
|
|
transition: 0.5s;
|
|
background-color: none;
|
|
border-radius: 15px;
|
|
}
|
|
}
|
|
|
|
@keyframes textShine {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
100% {
|
|
background-position: 100% 50%;
|
|
}
|
|
} |