Link to article: 9000contestseekgull-3.
.last-container {
position: relative;
width: 100%;
}
:where(.last, .last2, .last3, .last4) {
--_p-unit: min(calc(.75vw + .475rem), .95rem);
--p-inline: 1.5;
--p-block: 1;
--w: 54;
--shadow-depth: 1;
--shadow-spread: 1;
}
.last,
.last2 {
position: relative;
isolation: isolate;
overflow: visible;
width: min(100%, calc((var(--_p-unit) + .05rem) * var(--w)));
box-sizing: border-box;
padding: calc(var(--_p-unit) * var(--p-block)) calc(var(--_p-unit) * var(--p-inline));
margin-block: 1.5rem;
margin-inline: auto;
--paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/weathered.png);
--p-inline: 2;
--shadow-depth: 0.25;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
mask-repeat: no-repeat;
mask-size: 100% 100%;
color: #000;
}
.last3,
.last4 {
position: absolute;
isolation: isolate;
overflow: visible;
width: min(100%, calc((var(--_p-unit) + .05rem) * var(--w)));
box-sizing: border-box;
padding: calc(var(--_p-unit) * var(--p-block)) calc(var(--_p-unit) * var(--p-inline));
margin: 0; /* remove default margin */
--paper-img: url(https://scp-wiki.wdfiles.com/local--files/component%3Aassorted-paper/weathered.png);
--p-inline: 2;
--shadow-depth: 0.25;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
mask-repeat: no-repeat;
mask-size: 100% 100%;
color: #000;
}
.last { top: 0; z-index: 0; }
.last2 { top: -620px; left: 150px; z-index: 1; }
.last3 { top: 250px; left: calc(50% - 200px); z-index: 3; transform: translateX(-50%); }
.last4 { top: 380px; left: calc(50% + 25px); z-index: 2; transform: translateX(-50%); }
.last::before,
.last2::before,
.last3::before,
.last4::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
border-image: var(--paper-img) 100 fill;
border-image-width: 100px;
border-image-repeat: round;
filter: drop-shadow(0 0 calc(.125rem * var(--shadow-spread)) rgb(0 0 0 / calc(.25 * var(--shadow-depth))));
}
.last > *,
.last2 > *,
.last3 > *,
.last4 > * {
position: relative;
z-index: 2 !important;
color: inherit;
}
.doc img {
width: 100%;
height: 100%;
object-fit: cover;
}
.doc {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: -3;
pointer-events: none;
user-select: none;
opacity: 0.6;
}
.weathered {
-webkit-mask-image: linear-gradient(
to bottom,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0.5) 10%,
rgba(0,0,0,0.05) 25%,
rgba(0,0,0,0.05) 75%,
rgba(0,0,0,0.5) 90%,
rgba(0,0,0,1) 100%
);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-image: linear-gradient(
to bottom,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0.5) 10%,
rgba(0,0,0,0.05) 25%,
rgba(0,0,0,0.05) 75%,
rgba(0,0,0,0.5) 90%,
rgba(0,0,0,1) 100%
);
mask-repeat: no-repeat;
mask-size: 100% 100%;
color: black;
}
.bigtext {
position: absolute;
top: 7%;
left: 50%;
transform: translateX(-50%);
width: 80%;
text-align: center;
font-size: 30px;
line-height: 1.5em;
color: white;
z-index: 1;
font-weight: bold;
}
.bigtext2 {
position: absolute;
top: 19%;
left: 50%;
transform: translateX(-50%);
width: 80%;
text-align: center;
font-size: 30px;
line-height: 1.5em;
color: white;
z-index: 1;
font-weight: bold;
}
.bigtext3 {
position: absolute;
top: 30%;
left: 50%;
transform: translateX(-50%);
width: 80%;
text-align: center;
font-size: 30px;
line-height: 1.5em;
color: white;
z-index: 1;
font-weight: bold;
}
.bigtext4 {
position: absolute;
top: 41%;
left: 50%;
transform: translateX(-50%);
width: 80%;
text-align: center;
font-size: 30px;
line-height: 1.5em;
color: white;
z-index: 1;
font-weight: bold;
}
.bigtext5 {
position: absolute;
top: 51%;
left: 50%;
transform: translateX(-50%);
width: 80%;
text-align: center;
font-size: 30px;
line-height: 1.5em;
color: white;
z-index: 1;
font-weight: bold;
}
.bigtext6 {
position: absolute;
top: 62.5%;
left: 50%;
transform: translateX(-50%);
width: 80%;
text-align: center;
font-size: 30px;
line-height: 1.5em;
color: white;
z-index: 1;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.bigtext {
top: 4.5%;
}
.bigtext2 {
top: 17%;
}
.bigtext3 {
top: 28%;
}
.bigtext4 {
top: 39%;
}
.bigtext5 {
top: 49%;
}
.bigtext6 {
top: 60%;
}
}
.note, .note * {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.bigtext5 a:hover {
color: #ff0000 !important;
}
estrella-paper
weathered
bigtext
estrella-paper
weathered
bigtext2
estrella-paper
weathered
bigtext3
estrella-paper
weathered
bigtext4
estrella-paper
weathered
bigtext5
estrella-paper
weathered
bigtext6
last-container
last
last2
last3
last4
doc