$wall: #889199;
$white: #fff;
$none: rgba(#fff, 0);
$wood: #826851;
$blk: #211f1d;
$win: lighten($wall, 20);
$wenge: #221111;
$plastic: #2e1110;
$books: 200;
html {
/* font-size: 1vw;*/
}
html,
body {
height: 100%;
margin: 0;
}
div {
transform-style: preserve-3d;
perspective: 100rem;
position: relative;
*,
*:before,
*:after,
&:after {
content: "";
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
transform-style: preserve-3d;
/* backface-visibility: hidden;*/
}
}
div,
room,
wall {
width: 100%;
height: 100%;
}
room {
transform: translateZ(-50rem) rotateY(0deg);
&:has(.switch:checked) {
wall:nth-of-type(3) {
--light: #ffe;
}
wall:nth-of-type(4) {
--light: #ffc1;
}
}
}
wall {
--auxwall: linear-gradient(#0000 0 0);
background: var(--auxwall), radial-gradient($wall, darken($wall, 20));
width: 100rem;
box-shadow: inset 0 0 2rem darken($wall, 20);
border: 2px solid darken($wall, 20);
transform-style: preserve-3d;
//skirting board
&:nth-of-type(1),
&:nth-of-type(2),
&:nth-of-type(5) {
&:after,
&:before {
width: 100%;
height: 1.5rem;
background: radial-gradient(circle, lighten($wall, 5), darken($wall, 5));
top: auto;
bottom: 0;
transform: translate3d(0, 0, 0.25rem);
box-shadow: inset 0 0 0.5rem darken($wall, 20);
}
&:before {
transform: translate3d(0, -0.75rem, -0.5rem) rotateX(90deg);
background: lighten($wall, 5);
}
}
//left
&:nth-of-type(1) {
transform: translateX(-50%) rotateY(90deg);
background: none;
//window
& > u {
width: 100%;
height: calc(100% - 39rem);
height: 13%;
background: radial-gradient($wall, darken($wall, 20));
background-size: 100% calc(100% + 39rem);
background-size: 100% 700%;
&:before {
width: 100%;
height: 10rem;
background: radial-gradient(at top, $wall, lighten($wall, 10));
transform: translate3d(0, 5rem, -5rem) rotateX(90deg);
top: auto;
bottom: 0;
box-shadow: inset 0 2.5rem 1rem rgba($blk, 0.5);
}
}
& > u:nth-of-type(2) {
width: calc(100% - 85rem);
width: 25%;
height: 100%;
background-size: calc(100% + 85rem) 100%;
background-size: 400% 100%;
}
& > u:nth-of-type(3) {
width: calc(100% - 75rem);
width: 25%;
height: 100%;
right: 0;
left: auto;
background-size: calc(100% + 75rem) 100%;
background-size: 400% 100%;
transform: scaleX(-1);
&:before {
transform: rotateY(-90deg);
width: 9rem;
height: 100%;
background: radial-gradient(
at right,
lighten($wall, 5),
lighten($wall, 10)
);
left: 63%;
transform-origin: 100% 0;
box-shadow: inset 1rem 0 1rem rgba($blk, 0.5);
}
}
//w bottom
& > u:nth-of-type(4) {
top: auto;
bottom: 0;
height: calc(100% - 33rem);
height: 27%;
background-size: 100% calc(100% + 33rem);
background-size: 100% 400%;
transform: scaleY(-1);
&:before {
transform: translate3d(0, 5rem, -5rem) rotateX(90deg);
background: radial-gradient(
at right,
lighten($wall, 15),
lighten($wall, 20)
);
}
}
}
//right
&:nth-of-type(2) {
transform: translateX(50%) rotateY(-90deg);
left: auto;
right: 0;
switch {
width: 3rem;
aspect-ratio: 1;
left: 90%;
top: 50%;
background: linear-gradient(#fff1, #0000 10% 90%, #0001),
linear-gradient(90deg, #fff2, #0000 10% 90%, #0001),
radial-gradient(circle at 30% 30%, #fff3, #fff0),
linear-gradient(#989a95 0 0);
transform-style: preserve-3d;
position: absolute;
& .switch {
position: absolute;
top: 0;
left: 0;
appearance: none;
width: 100%;
height: 100%;
border: 0;
display: block;
margin: 0;
transform: translateZ(0.2rem) rotateX(10deg);
&::after {
content: "";
width: 30%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #c8cac5;
}
&::before {
content: "";
width: 30%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
background: #888a85;
transform-origin: 100% 50%;
transform: translate(-50%, -50%) rotateY(-90deg);
}
&:checked {
transform: translateZ(0.2rem) rotateX(-10deg);
}
}
}
}
//top
&:nth-of-type(3) {
transform: rotateX(-90deg) translate3d(-1rem, 0, -50rem);
width: calc(100% + 2rem);
height: 100rem;
background: radial-gradient(lighten($wall, 5), darken($wall, 10));
--light: #fff3;
& fixtures, & fixtures::before, & fixtures::after {
--rim: #485159;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 20%, var(--light) 1.5rem, var(--rim) 1.7rem 2rem, #0000 2.2rem),
radial-gradient(circle at 80% 20%, var(--light) 1.5rem, var(--rim) 1.7rem 2rem, #0000 2.2rem),
radial-gradient(circle at 20% 80%, var(--light) 1.5rem, var(--rim) 1.7rem 2rem, #0000 2.2rem),
radial-gradient(circle at 80% 80%, var(--light) 1.5rem, var(--rim) 1.7rem 2rem, #0000 2.2rem);
}
& fixtures::before {
--light: #0000;
transform: translateZ(0.075rem)
}
& fixtures::after {
--rim: #687179;
--light: #0000;
transform: translateZ(0.15rem)
}
}
//bottom
&:nth-of-type(4) {
transform: rotateX(90deg) translate3d(0, 0, -50rem);
top: auto;
bottom: 0;
width: 100%;
height: 100rem;
background:
var(--auxwall),
repeating-linear-gradient(
to right,
$none,
$none 2rem,
rgba(darken($wood, 10), 0.5) 2.2rem
),
//
radial-gradient($wood, darken($wood, 20));
box-shadow: inset 0 1rem 2rem rgba(lighten($wall, 10), 0.5);
--light: #fff0;
--auxwall:
radial-gradient(circle at 20% 20%, var(--light), #fff0 20%),
radial-gradient(circle at 80% 20%, var(--light), #fff0 20%),
radial-gradient(circle at 20% 80%, var(--light), #fff0 20%),
radial-gradient(circle at 80% 80%, var(--light), #fff0 20%)
;
}
&:nth-of-type(5) {
transform: translateZ(-49rem);
width: 100%;
--sizepos: 1.5rem calc(100% - 3rem) / 2rem 2rem no-repeat;
--auxwall:
radial-gradient(farthest-side at 37% 50%, #0008 10%, #0000 0) var(--sizepos),
radial-gradient(farthest-side at 63% 50%, #0008 10%, #0000 0) var(--sizepos),
radial-gradient(farthest-side, #0001 60%, #0004 0 65%, #0000 0) var(--sizepos),
linear-gradient(#fff1, #0000 10% 90%, #0003) var(--sizepos),
linear-gradient(90deg, #fff2, #0000 10% 90%, #0002) var(--sizepos),
radial-gradient(circle at 30% 30%, #fff3, #fff0) var(--sizepos),
radial-gradient(at 100% 0, #0000, #0003) var(--sizepos),
linear-gradient(#989a95 0 0) var(--sizepos);
}
}
// @import "light";
light {
right: 0;
margin: auto;
transform: rotateX(-90deg) translate3d(0, 0, 0) scale(0.7);
transform-origin: 0 0;
box-shadow: 2rem 0 1rem rgba($blk, 0.25),
//
5rem 0 3rem rgba($blk, 0.1),
//
10rem 0 3rem rgba($blk, 0.1),
//
15rem 0 5rem rgba($blk, 0.1);
&,
&:before,
&:after,
& > u:nth-of-type(1),
& > u:nth-of-type(1):after,
& > u:nth-of-type(2),
& > u:nth-of-type(2):before,
& > u:nth-of-type(2):after,
& > u:nth-of-type(3),
& > u:nth-of-type(3):before,
& > u:nth-of-type(3):after,
& > u:nth-of-type(4),
& > u:nth-of-type(4):before {
width: 5rem;
height: 5rem;
border-radius: 50%;
background: linear-gradient(90deg, $blk, $wall, $white, $blk, $wall, $blk);
}
&:after {
transform: translate3d(0, 0, 0.3rem) scale(0.7);
}
&:before {
transform: translate3d(0, 0, 0.2rem);
background: lighten($blk, 10);
}
& > u:nth-of-type(1) {
transform: translate3d(0, 0, 0.5rem) scale(0.7);
background: lighten($blk, 10);
&:before {
transform: translate3d(0, 0, 5rem);
transform: translateZ(-5rem);
background: linear-gradient(90deg, $blk, $wall, $wall, $blk, $wall, $blk);
height: 10rem;
width: 1rem;
transform: rotateX(90deg) translate3d(0, 0, 2rem);
right: 0;
margin: auto;
}
&:after {
transform: translate3d(0, 0, 2rem) scale(0.7);
background: lighten($blk, 10);
}
}
& > u:nth-of-type(2) {
transform: translate3d(0, 0, 2.9rem);
&:before {
transform: translate3d(0, 0, 0.25rem);
background: lighten($blk, 10);
}
&:after {
transform: translate3d(0, 0, 0.5rem) scale(0.8);
}
}
& > u:nth-of-type(3) {
transform: translate3d(0, 0, 3.6rem) scale(0.8);
&:before {
transform: translate3d(0, 0, 0.25rem);
}
&:after {
transform: translate3d(0, 0, 0.5rem);
}
}
u:nth-of-type(4) {
transform: translate3d(0, 0, 4.3rem);
&:before {
transform: translate3d(0, 0, 0.25rem);
background: lighten($blk, 10);
}
}
& > u:nth-of-type(5) {
transform: rotate(0) translate3d(0, 0, 5rem);
animation: rotate 3s linear infinite;
right: 0;
margin: auto;
width: 5rem;
height: 5rem;
background: lighten($blk, 10);
border-radius: 50%;
@media (max-width: 400px) {
animation-play-state: paused;
transform: rotate(180deg) translate3d(0, 0, 5rem) !important;
}
&:after,
&:before {
width: 5rem;
height: 5rem;
background: lighten($blk, 10);
border-radius: 50%;
transform: translate3d(0, 0, 0.25rem);
}
&:after {
transform: translate3d(0, 0, 0.5rem);
}
u,
u:before {
width: 19rem;
height: 5rem;
background: $wood;
border-radius: 70% 20% 20% 70% / 40% 20% 20% 40%;
transform: translate3d(2.5rem, 0, 0) rotate(20deg) rotateX(15deg);
transform-origin: 0;
}
u:before {
transform: rotateX(5deg);
}
u {
animation: rlight 3s -2s linear infinite;
transition: all 0.2s cubic-bezier(0.5, 2, 0.5, 0.8);
@media (max-width: 400px) {
animation-play-state: paused !important;
transform: translate3d(2.5rem, 0, 0) rotate(20deg) rotateX(15deg)
rotateY(-45deg);
}
}
u:nth-of-type(2) {
transform: translate3d(2.5rem, 0, 0) rotate(120deg) rotateX(15deg);
animation: rlight 3s -1s linear infinite;
@media (max-width: 220px) {
transform: translate3d(2.5rem, 0, 0) rotate(120deg) rotateX(15deg)
rotateY(-70deg);
}
}
u:nth-of-type(3) {
transform: translate3d(2.5rem, 0, 0) rotate(240deg) rotateX(15deg);
animation: rlight 3s linear infinite;
@media (max-width: 220px) {
transform: translate3d(2.5rem, 0, 0) rotate(240deg) rotateX(15deg)
rotateY(-90deg);
}
}
}
@keyframes rlight {
50% {
filter: brightness(0.5);
}
}
@keyframes rotate {
100% {
transform: rotate(-360deg) translate3d(0, 0, 5rem);
}
}
}
// @import "window";
window {
width: 50%;
height: 60%;
transform: translate3d(0, 0, -8rem);
left: 25%;
top: 13%;
&:before {
width: 100%;
height: 1rem;
background: $wall;
}
&:after {
width: 100%;
height: 1rem;
background: $win;
transform: translate3d(0, 0.5rem, -0.5rem) rotateX(90deg);
}
//bottom
u:nth-of-type(1) {
background: $wall;
width: 50rem;
height: 27rem;
height: 1rem;
transform: translate3d(0, 0, 0);
bottom: 0;
top: auto;
&:after {
width: 100%;
height: 1rem;
background: $win;
transform: translate3d(0, -0.5rem, -0.5rem) rotateX(90deg);
}
}
//right
u:nth-of-type(2) {
background: $wall;
width: 1rem;
height: 100%;
transform: translate3d(0, 0, 0);
left: auto;
right: 0;
&:after {
width: 1rem;
height: 100%;
background: $win;
transform: translate3d(0, -0.5rem, -0.5rem) rotateY(90deg);
}
}
//middle
u:nth-of-type(3) {
background: $wall;
width: 1rem;
height: 100%;
left: 50%;
&:after {
width: 1rem;
height: 100%;
background: $win;
transform: translate3d(0, -0.5rem, -0.5rem) rotateY(90deg);
}
}
}
.sig {
&,
* {
height: 9.25em;
overflow: hidden;
border-radius: 0.5em;
}
position: absolute;
left: auto;
right: 1rem;
top: 1rem;
font-size: 0.2rem;
color: $white;
width: 10em;
transform: skewX(10deg) scaleY(0.45) rotate(2deg);
mix-blend-mode: difference;
&:before,
*:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 5em;
height: 5em;
background: currentColor;
transform: translate3d(-2.5em, 0, 0) rotate(-45deg);
box-shadow: -3em 3em 0 0 currentColor;
border-radius: 0.5em 2em 0.5em 2em;
}
* {
width: 5em;
transform: translate3d(3.75em, 0, 0) scaleY(0.95);
display: block !important;
&:before {
transform: translate3d(-3em, -2em, 0) rotate(-45deg);
box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
border-radius: 0.5em;
}
}
}
@keyframes fly {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
fly {
width: 0.5rem;
aspect-ratio: 1;
background: #000;
border-radius: 50%;
offset-path: path("M0,0 C100,0 150,0 300,300 200,200 300,300 180,300 300,100 50,100 0,0");
animation: fly 4s infinite alternate linear;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateX(-60deg);
&::before, &::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #000;
border-radius: 50%;
transform: rotateY(40deg)
}
&::after {
background: #fff6;
transform: rotateY(-40deg);
}
}
@media (max-width: 600px) {
fly { display: none; }
}
tv {
width: 42rem;
height: 19rem;
background-color: $plastic;
box-shadow: inset 4px 4px 20px grey;
transform: translate3d(40rem, 10rem, -47rem);
& > u {
width: 40rem;
height: 17rem;
background-color: $wenge;
transform: translate3d(1rem, 1rem, 0);
box-shadow: inset -1px -1px 10px grey;
}
}
@keyframes flicker {
0%, 10%, 20%, 100% {
--light: #ffffdd05;
}
5%, 15% {
--light: #ffffdd01;
}
}
lamp {
width: 1rem;
height: 60%;
background:
linear-gradient(90deg, #fff3, #fff0 80%, #000c),
#222;
bottom: 0;
left: 8rem;
top: auto;
transform: translateZ(-30rem);
// left: 50%;
// transform: translateZ(0rem);
&:has(input:checked) {
& top u {
--light: #ffd8;
}
& mast u {
--light: #ffd5;
}
& lightray u {
--light: #ffffdd05;
animation: flicker 1s linear 1 forwards;
}
}
& lampbase {
width: 6rem;
aspect-ratio: 1;
border-radius: 50%;
background: #222;
top: 100%;
left: 50%;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(0.5em);
& u {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(at 30% 70%, #fff1, #fff0), #222;
border-radius: 50%;
&:nth-child(1) { transform: translateZ(-0.1em); }
&:nth-child(2) { transform: translateZ(-0.2em); }
&:nth-child(3) { transform: translateZ(-0.3em); }
&:nth-child(4) { transform: translateZ(-0.4em); }
&:nth-child(5) { transform: translateZ(-0.5em); }
}
}
& u {
&:nth-child(1) { --t: 36deg; }
&:nth-child(2) { --t: 72deg; }
&:nth-child(3) { --t: 108deg; }
&:nth-child(4) { --t: 144deg; }
&:nth-child(5) { --t: 180deg; }
&:nth-child(6) { --t: 216deg; }
&:nth-child(7) { --t: 252deg; }
&:nth-child(8) { --t: 288deg; }
&:nth-child(9) { --t: 324deg; }
&:nth-child(11) { --t: 54deg; }
&:nth-child(12) { --t: 90deg; }
&:nth-child(13) { --t: 126deg; }
&:nth-child(14) { --t: 162deg; }
&:nth-child(15) { --t: 198deg; }
&:nth-child(16) { --t: 234deg; }
&:nth-child(17) { --t: 270deg; }
&:nth-child(18) { --t: 306deg; }
&:nth-child(19) { --t: 342deg; }
&:nth-child(20) { --t: 18deg; }
}
& input {
--size: 0.4rem;
appeareance: none;
-webkit-appearance: none;
width: var(--size);
height: 10rem;
z-index: 999;
background: red;
transform: translateX(1rem);
transition: height 0.25s;
cursor: pointer;
background:
linear-gradient(90deg, #fff5, #0002) 0 100% / 100% 10%,
linear-gradient(#0000 90%, #edb 0),
radial-gradient(farthest-side circle, #000 99%, #0000) 0 0 / var(--size) var(--size)
;
&:checked {
height: 13rem;
}
}
& mast {
width: 100%;
height: 100%;
& u {
--t: 0deg;
--light: #fff0;
width: 100%;
height: 100%;
background:
linear-gradient(var(--light), #fff0 80%),
linear-gradient(90deg, #fff3, #0002),
#222;
transform: rotateY(var(--t));
}
}
& lightray {
width: 1800%;
height: 100%;
left: 50%;;
top: 0;
transform: translateX(-50%);
pointer-events: none;
& + lightray {
transform: translate(-50%, -105%) scaleY(-1);
aopacity: 0.5;
& u {
height: 70%;
-webkit-mask: linear-gradient(#fff5, #fff);
background: linear-gradient(var(--light), #fff0);
opacity: 0.8;
clip-path: polygon(46% 0%, 54% 0%, 100% 100%, 0 100%)
}
}
& u {
--light: #fff0;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform: rotateY(var(--t));
background: radial-gradient(50% 120% at 50% 100%, var(--light), #fff0);
}
}
& top {
width: 100%;
height: 100%;
& u {
--t: 0deg;
--light: #fff3;
width: 5em;
height: 12em;
background:ivory;
left: 50%;
top: -15%;
transform: translate(-50%, 0%) rotateY(var(--t)) translateZ(2em) rotateX(15deg);
transform-origin: 50% 0;
clip-path: polygon(37% 0, 63% 0, 83.5% 100%, 16.5% 100%);
background:
linear-gradient(#0005, #0000, #0003 5%, #0000 0 95%, #fff5 0, #0003 96%, #0000, #0005),
linear-gradient(#dcc 5%, #0000 0 95%, #fee),
linear-gradient(90deg, #0002, #0000 10%),
radial-gradient(farthest-side at 20% 40%, var(--light), #fff0),
#a98
;
}
}
}
@media (max-width: 300px) {
lamp {
left: 50%;
&:has(input:checked) {
& mast u {
--light: #ffd0;
}
}
& top u {
clip-path: none;
background: radial-gradient(at 30% 30%, #fff1, #fff0), #000;
transform: translate(-50%, 0%) rotateY(var(--t)) translateZ(1em);
height: 1em;
width: 1em;
top: 0;
}
& lightray {
display: none;
}
}
}
/*** CSS ***/
bookshelf {
--wood: #8a97a1;
--back: #3e515b;
width: 30%;
height: 99%;
top: 0.5%;
left: 25%;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
border: 2vh solid var(--wood);
transform: translateZ(-45rem);
box-shadow: 0 0 1px 1px #0008, 0 2px 3px 0px #40484f;
background-position: 0 20px, 0 0, 0 0;
background:
linear-gradient(180deg, #fff0 18vh, var(--wood) 0 calc(20vh + 0vh), #0006 calc(20vh + 1px) calc(20vh + 2px), #fff0 0 38vh, var(--wood) 0 calc(40vh), #0006 calc(40vh + 1px) calc(40vh + 2px), #fff0 0 57.5vh, var(--wood) 0 calc(59.5vh + 0px), #0006 calc(59.5vh + 1px) calc(59.5vh + 2px), #fff0 0 77vh, var(--wood) 0 calc(79vh + 0px), #0006 calc(79vh + 1px) calc(79vh + 2px), #fff0 0 100%),
linear-gradient(90deg, #0009 0, #f000 5vw 100%),
linear-gradient(-90deg, #0009 0, #f000 3px 100%),
linear-gradient(180deg, #0009 0, #f000 3px 100%),
linear-gradient(180deg, var(--back) 2vh, #000D calc(18vh + 0px), var(--back) 0 calc(20vh + 2px), #000D calc(38vh + 0px), var(--back) calc(40vh + 0px), #000D calc(57vh + 0px), var(--back) calc(57vh + 0px), #000D calc(79vh + 0px), var(--back) calc(79vh + 1px), #000D calc(95vh + 0px), #000 0 100%);
}
book {
opacity: 0.9;
transition: all 1s ease 0s;
border-left: 2px solid #fff8;
border-top: 2px solid #fff8;
border-right: 1px solid #0004;
border-bottom: 1px solid #0004;
margin-top: 2vh;
margin-bottom: 1vmin;
position: relative;
box-shadow: 0px -4px 3px -1px #0004;
&:before {
content: "";
width: calc(100% - 1px);
height: calc(100% - 1px);
position: absolute;
transition: all 1s ease 0s;
box-shadow:
1vmin 1vmin 3vmin -1.5vmin #fffc inset,
-1vmin -1vmin 3vmin -1.5vmin #000c inset;
}
&:after {
bottom: 3.5vh;
left: calc(100% - 0.25vw);
font-size: 0.5vmin;
font-family: 'Noto Sans Phoenician', serif;
content: " π€π€ π€π€π€π€ π€π€π€ π€π€π€π€ π€π€ π€π€π€π€
π€ π€
π€π€π€ π€π€π€ π€π€π€π€π€ π€π€π€ π€π€π€π€
π€ π€π€π€ π€π€π€
π€π€ π€π€π€
π€π€π€
π€π€π€ π€π€π€π€π€. π€
π€π€ π€π€π€π€ π€π€π€ π€π€π€π€ π€π€π€π€π€ π€π€π€π€ π€π€ π€π€ π€π€
π€π€π€
π€π€π€ π€π€π€π€π€π€ π€π€π€π€π€ π€π€π€π€ π€π€
π€π€π€.";
overflow: hidden;
border: 0;
color: #0008;
font-weight: bold;
text-align: center;
padding: 5px;
transform: rotate(-90deg);
transform-origin: 1px bottom;
position: absolute;
transition: all 1s ease 0s;
box-shadow:
1vmin 1vmin 3vmin -1.5vmin #fffc inset,
-1vmin -1vmin 3vmin -1.5vmin #900c inset;
background:
repeating-linear-gradient(180deg, #fff 1px, #fff8 3px),
linear-gradient(-90deg, #fff0 1px, #fff 2px, #fff0 3px 100%);
background-repeat: no-repeat;
background-size: 1% 100%, 100% 100%;
background-position: 100% 0, 0 0;
}
@for $i from 1 through $books {
&:nth-child(#{$i}) {
filter: sepia(random(5) * 0.25) brightness((random(3) + 2) * 0.21); ;
$height: random(5) + 11.5vh; /*11.75vh*/
$width: random(2) + 0.75vw;
height: $height;
width: $width;
$b-radius: random(5) * 0.5px;
border-radius: $b-radius;
$color: hsl((random(25) + 10), 80%, 40%);
background: linear-gradient(150deg, $color 0%, lighten($color, 50%));
$rotate: (random(5) + 2 - 3) + deg;
transform: rotate($rotate);
&:before {
border-radius: $b-radius;
$book-text: (random(87645) + 12345);
content: "#{$book-text}";
overflow: hidden;
font-size: 10px;
font-weight: 600;
text-align: center;
text-shadow: 0 -1px 0 #fff8;
color: #0008;
padding-right: 2px;
padding-bottom: 1.25vh;
display: flex;
align-items: end;
justify-content: center;
font-family: Arial, Helvetica, serif;
background: linear-gradient(0deg, #fff0 0.5vh, #0008 0.55vh, #fff 0.6vh 3vh, #0008 3.05vh, #fff0 3.1vh 100%);
}
&:after {
top: auto;
height: ($width - 0.5vw);
border-radius: $b-radius;
width: ($height - 3.75);
$fontsize: (random(2) + 2) * 4px;
font-size: $fontsize;
text-indent: random(50) * $fontsize * -0.1 ;
line-height: $fontsize;
}
}
}
&:nth-child(5n+4) {
&:before {
background:
linear-gradient(0deg, #fff0 0.5vh, #0008 0.55vh, #fff 0.6vh 3vh, #0008 3.05vh, #fff0 3.1vh 100%),
repeating-linear-gradient(180deg, #fff0 15%, #fff 16%, #0004 18% 20%, #fff 22%, #fff0 23% 35%);
}
&:after {
font-size: 0;
}
}
&:nth-child(4n+2) {
&:after {
font-family: 'Noto Sans Old Persian', sans-serif;
content: "πΏπΌπ»π‘ππΆπ π΄πΊπ πππΏπΊπ«π΄π«πΌπ πππΏπΈπ’π«π±π΄π΄π πππΊπΌπ«π΄π«π‘ππ π±π‘ππ¨,ππ₯π π’πΌπΊππ½π’ππ ππ ππ‘π£π πΌππ½π’ππ ππ¨ππΏπΆπ π΄π πππ‘πΊππΊπΌπ«π΄π«π‘ππππ‘π«π‘ππΏπΌπ»π‘ππ¨π‘π«π΄π π«πΌπ£ππ£π«π‘π²πΉπ πΆππΏπ’πΏπΆπ±π΄π΄π πππΏπ΄π«π‘ππππ π±π‘ππ¨,ππΏπΌπ»π‘π±π‘ππ²π΄ππ’π«πΊπ²π πΊπ΄πΉπ ππ±πΌπΏπ±πΌπΆππΊπΉπΊππΌπ΄π¬π’ππ";
}
}
&:nth-child(5n+3) {
&:after {
font-family: 'Noto Sans Old Italic', cursive;
content: "ππππππ πππ πππππ πππππ ππππππ πππ πππ ππππ ππ πππππ πππππ ππ π
ππππ πππ πππ πππππ πππππ π πππ πππ ππ ππππ πππ ππππ ππππ ππππ ππππ πππππ ππ
ππ ππ πππππ πππ ππππ πππππ
ππ πππ
ππ ππππ πππππ ππππ ππππ ππ
ππ ππππππ πππππ ππππππ πππππ ππππ ππππ πππππ πππππ ππππ ππππππ ππ πππππ ππππππ πππππππ πππ";
}
}
&:nth-child(6n+5) {
&:after {
font-family: 'Noto Sans Thaana', sans-serif;
content: "ήή¬ήή°ήή¬ήή° ήή©ήή¦ήήͺΨ ήή¦ή
ήͺήή¬ήή¨ήή¦ήήͺήή¦ήή¨Ψ ήήͺήή¦ήή¦ ήή¦ήήͺήή«ήήͺήή° ήή¨ήήͺήή¦ήή° ήήͺήήͺήήͺήήͺήή¦ήή¨Ψ ήή¬ήή°ήήͺή
ή¬ήή¨ήή¬ήή° ήήͺήή§ήή¬ήή¬ήή¬. ήή¦ή
ήͺήή¬ήή¨ήή¦ήή§ήή¨Ψ ήή¦ή
ήͺήή°ήή¬ ήή¨ήή¦ήή§ήή¨ήή¦ήή©Ψ ήήήή¬ ήήͺήή¨ήή§ ήή¨ήήͺήή¦ήή° ήήͺήήͺήήͺήήͺήή¦ήή¨Ψ ήή¬ήή°ήήͺή
ή¬ήή¨ήή¬ήή° ήήͺήή§ήή¬ήή¬ήή¬. ήή¦ή
ήͺήή¬ήή¨ήή¦ήή§ήή¨Ψ ήή¦ή
ήͺήή°ήή¬";
}
}
&:nth-child(7n+10) {
transform: rotate(12deg);
transform-origin: right bottom;
margin-right: 2.5vmin;
}
&:nth-child(8n+7) {
transform: rotate(-10deg);
transform-origin: left bottom;
margin-left: 2.75vmin;
margin-right: 0;
}
&:nth-child(7n+4) {
&:after {
font-family: 'Noto Sans Coptic', sans-serif;
content: "β²₯β²β²©β²β²β²₯β² β²£β²±β²β² β²β²β² β²β²©Ο£β²Ο£ β² β²β²β²©β²β²£β²β²© Ο©β² β²β²©β²β²β²β²β²β²β²₯ⲩβ²β². β²β²©β² Οβ²β² β²β²β²β²© β²β²§β²£β²β²©β²β²β²β²©β² β²β²©β²± ϣϣⲠβ²β²§β²£β²β²©β²£β²β²β²§β²β²β²β²₯β²β².";
}
}
}
legs {
width: 30%;
background: linear-gradient(90deg, #fff0 1vmin, #828d93 0 2vmin, #fff0 0 calc(100% - 2vmin), #828d93 0 calc(100% - 1vmin), #fff0 0 100% );
height: 2%;
transform: translateZ(-45.1rem);
top: 99%;
left:25%;
}
rug {
--u: 1.175vmin;
--hue: hue-rotate(0deg);
--c1: #000000;
--c2: #9a1f22;
--c3: #e35e13;
--gp: 50%/calc(var(--u) * 12) calc(var(--u) * 17.05);
height: 60%;
width: 70%;
left: 15%;
top: 30%;
filter: blur(1px) saturate(0.85);
border-radius: 3vmin;
box-shadow: 0 15px 10px 1px #0008, 0 5px 2px 1px #000, 2px -4px 5px 1px #fff8 inset, -4px 14px 4px 0 #0008 inset;
background:
radial-gradient(ellipse at 50% 30%, #fff4, #fff0 65%),
radial-gradient(ellipse at 65% 70%, #fff4, #fff0 65%),
radial-gradient(ellipse at 45% 50%, #fff4, #fff0 65%),
conic-gradient(from 0deg at 13.68% 94.08%, #fff0 0 50%, var(--c2) 0% 83.33%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 86.12% 94.08%, #fff0 0 16.66%, var(--c2) 0% 50%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 28.42% 88.14%, #fff0 0 50%, var(--c1) 0% 83.33%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 71.57% 88.14%, #fff0 0 16.66%, var(--c1) 0% 50%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 7.36% 43.70%, #fff0 0 50%, var(--c1) 0% 75%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 92.64% 43.70%, #fff0 0 25%, var(--c1) 0% 50%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 43.15% 82.22%, #fff0 0 50%, var(--c3) 0% 83.33%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 56.84% 82.22%, #fff0 0 16.66%, var(--c3) 0% 50%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 23.15% 50.37%, #fff0 0 50%, var(--c3) 0% 75%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 76.85% 50.37%, #fff0 0 25%, var(--c3) 0% 50%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 50% 73.33%, #fff0 0 16.66%, var(--c1) 0% 83.33%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 36.84% 56.29%, #fff0 0 50%, var(--c1) 0% 75%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 63.15% 56.29%, #fff0 0 25%, var(--c1) 0% 50%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 50% 51.11%, #fff0 0 33.33%, var(--c2) 0% 66.66%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 50% 39.25%, #fff0 0 33.33%, var(--c1) 0% 66.66%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 50% 26.66%, #fff0 0 33.33%, var(--c3) 0% 66.66%, #fff0 0 100%) var(--gp),
conic-gradient(from 0deg at 13.68% 5.92%, #fff0 0 66.66%, var(--c2) 0% 100%) var(--gp),
conic-gradient(from 0deg at 86.12% 5.92%, var(--c2) 0 33.33%, #fff0 0% 100%) var(--gp),
conic-gradient(from 0deg at 28.42% 11.85%, #fff0 0 66.66%, var(--c1) 0% 100%) var(--gp),
conic-gradient(from 0deg at 71.58% 11.85%, var(--c1) 0 33.33%, #fff0 0% 100%) var(--gp),
conic-gradient(from 0deg at 43.15% 17.77%, #fff0 0 66.66%, var(--c3) 0% 100%) var(--gp),
conic-gradient(from 0deg at 56.84% 17.77%, var(--c3) 0 33.33%, #fff0 0% 100%) var(--gp);
background-color: var(--c1);
transform: translateZ(5px);
}
.art {
width: 40%;
height: 50%;
background: red;
left: 40%;
top: 20%;
transform: translateZ(2vmin);
border-radius: 2px;
--c1: #c9401d;
--c2: #38861b;
--c3: #207db0;
--c4: #ffd65b;
--bef: 45deg, #fff0 0 0.075vmin;
--aft: 0.1vmin 0.15vmin, #fff0 0.175vmin 0.25vmin;
background: #392e25;
position: relative;
&:before {
width: 2vmin;
height: 100%;
background: linear-gradient(-90deg, #fff4, #0002);
right: 0;
left: auto;
transform: rotateY(-90deg);
transform-origin: 100% 50%;
}
}
.art > div {
overflow: hidden;
width: 100%;
height: 100%;
}
.art > div > div {
width: 72%;
height: 72%;
position: absolute;
transform: rotate(45deg);
top: 14%;
filter: brightness(1.25) blur(2px) saturate(1.25);
}
.red {
background: repeating-linear-gradient(var(--bef), var(--c1) var(--aft));
left: -22%;
z-index: 1;
}
.green {
background: repeating-linear-gradient(var(--bef), var(--c2) var(--aft));
left: 14%;
z-index: 3;
}
.blue {
background: repeating-linear-gradient(var(--bef), var(--c3) var(--aft));
left: -4%;
z-index: 1;
}
.yellow {
background: repeating-linear-gradient(var(--bef), var(--c4) var(--aft));
left: -40%;
z-index: 0;
}
.yellow + .red + .yellow {
left: 79%;
}
.yellow + .red {
left: 61%;
}
.yellow + .blue {
left: 98%;
z-index: -1;
}
@keyframes fly {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
fly {
width: 0.5rem;
aspect-ratio: 1;
background: #000;
border-radius: 50%;
offset-path: path("M0,0 C100,0 150,0 300,300 200,200 300,300 180,300 300,100 50,100 0,0");
animation: fly 4s infinite alternate linear;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateX(-60deg);
&::before, &::after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #000;
border-radius: 50%;
transform: rotateY(40deg)
}
&::after {
background: #fff6;
transform: rotateY(-40deg);
}
}
@media (max-width: 600px) {
fly { display: none; }
}
bed {
// debugging
// transform-origin: -100%;
// transform: rotatey(-35deg) translate(0rem);
// box-shadow: inset 0 0 1rem lime;
inset: auto 0 0 auto; // put to the right
translate: 0 0 -46rem; // put at the back wall
width: var(--width);
height: var(--height);
&::after {
content: "";
width: var(--width);
height: var(--length);
rotate: x 90deg;
translate: 3rem -13rem calc(-3rem + var(--length)/2);
background: #432f;
filter: blur(3rem);
}
// adult
--width: 40rem;
--height: 17rem;
--length: 60rem;
--color: hsl(0 0% 75%);
right: calc((100vw - var(--width)) / 2);
u {
inset: 0;
clip-path: polygon(0 0, 10% 0, 10% 15%, 50% 9%, 90% 15%, 90% 0, 100% 0, 100% 100%, 90% 100%, 90% 80%, 10% 80%, 10% 100%, 0% 100%);
background-color: var(--color);
background-image: radial-gradient(#fff9, #fff0),
linear-gradient(90deg, #0000 10%, #0002 10%, #0000 11%, #0000 11%, #fff0 90%, #fff6 90%, #fff0 91%);
background-blend-mode: hard-light, multply;
}
u:nth-of-type(1) {
translate: 0 -3rem 0;
}
u:nth-of-type(2) {
translate: 0 -3rem 1rem;
}
u:nth-of-type(3) {
translate: 0 -3rem 2rem;
}
u:nth-of-type(4) {
translate: 0 0 calc(var(--length) - 2rem);
}
u:nth-of-type(5) {
translate: 0 0 calc(var(--length) - 1rem);
}
u:nth-of-type(6) {
translate: 0 0 var(--length);
}
u:not(:nth-of-type(3n)) {
background-image: linear-gradient(-12deg, #fff0 50%, #fff4 76%, #fff6 75%, #fffa 84%, #fff0 88%, #fff0 96%, #ffff 96%, #ffff);
}
b {
inset: 7rem 0 3rem;
transform-origin: 0%;
width: var(--length);
rotate: y 90deg;
translate: .5rem 0 calc(var(--length));
background-color: var(--color);
background-image: radial-gradient(#fff9, #fff0);
background-blend-mode: hard-light;
}
b:nth-of-type(2) {
transform-origin: 0%;
translate: calc(var(--width) - .5rem) 0 calc(var(--length));
}
p {
transform-origin: 0%;
translate: 2rem -2rem 5rem;
inset: 0;
box-shadow: inset 0 0 8rem magenta;
rotate: x 15deg;
width: 18rem;
height: 12rem;
clip-path: polygon(0 45%, 3% 23%, 0 0, 34% 13%, 46% 24%, 64% 8%, 100% 0, 95% 27%, 100% 65%, 99% 98%, 0% 100%);
border-radius: 2rem;
background-image: radial-gradient(ellipse at 26% 36%, rgba(184, 131, 170, 1) 0%, rgba(160, 102, 160, 1) 40%, rgba(113, 38, 113, 1) 100%),
repeating-linear-gradient(220deg, rgba(200,0,0, 0.25), rgba(200,0,0, 0.25) 6px, transparent -19px, transparent 10px),
repeating-linear-gradient(36deg, rgba(0,0,200, 0.25), rgba(0,0,200, 0.25) 1px, transparent 0px, transparent 2px);
background-size: 100%, 6px, 12px;
background-blend-mode: multiply;
box-shadow: 0rem -1rem 2rem #000a inset;
border: none;
}
p:nth-of-type(2) {
translate: 20rem -1.5rem 5rem;
}
// junior
@media (max-width: 1200px) {
--color: hsl(210 70% 60%);
--width: 21rem;
--height: 10rem;
--length: 50rem;
right: 3px;
&::after {
translate: 3rem -15rem calc(-3rem + var(--length)/2);
}
u {
clip-path: polygon(0 9%, 21% 3%, 34% 1%, 50% 0%, 66% 1%, 79% 3%, 100% 9%, 100% 100%, 96% 100%, 96% 80%, 4% 80%, 4% 100%, 0% 100%);
background-image: radial-gradient(#fff4, #fff0),
linear-gradient(90deg, #0000 4%, #0002 4%, #0000 5%, #fff0 95%, #fff3 95%, #fff0 96%);
background-blend-mode: soft-light, multply;
}
u:nth-of-type(1) {
translate: 0 0 0;
}
u:nth-of-type(2) {
translate: 0 0 1rem;
}
u:nth-of-type(3) {
translate: 0 0 2rem;
}
b {
inset: 5rem 0 1.5rem;
}
p {
height: 10rem;
translate: 2rem -2rem 5rem;
}
p:nth-of-type(2) {
clip-path: none;
width: 40rem;
height: 20rem;
translate: 10.3rem -6rem 6rem;
rotate: .9 .9 .9 240deg;
}
}
// baby
@media (max-width: 800px) {
--color: hsl(0 0% 80%);
--width: 30rem;
--height: 15rem;
--length: 20rem;
&::after {
translate: 2rem 5rem calc(-5rem + var(--length)/2);
}
u {
translate: 0 0 -25rem;
clip-path: polygon(0 0, 3% 0, 3% 5%, 50% 5%, 97% 5%, 97% 0, 100% 0, 100% 100%, 97% 100%, 97% 80%, 3% 80%, 3% 100%, 0% 100%);
background: linear-gradient(to right, #ccc, #fff 10%, #999 30%, transparent 30%) 41% 100%/2rem;
border: 1rem white solid;
border-top-width: 1.2rem;
border-bottom-width: 3.5rem;
}
b {
inset: .5rem 0 3rem;
}
p {
height: 6rem;
translate: 2rem 5rem 5rem;
}
p:nth-of-type(2) {
clip-path: none;
width: 20rem;
height: 28rem;
translate: 16rem -4rem 0;
rotate: .9 .9 .9 240deg;
}
}
// pillow only
@media (max-width: 31.4rem) {
--width: min(13rem, 80vw);
--height: 20rem;
--length: 20rem;
right: 1rem;
u, b, p:nth-of-type(2), &::after {
display: none;
}
p {
width: var(--width);
height: var(--height);
translate: 0 4rem 30rem;
rotate: 1 .0 .1 77deg;
margin: 0;
clip-path: none;
border-radius: 3rem;
background-image: radial-gradient(ellipse at 26% 36%, rgba(184, 131, 170, 1) 0%, rgba(160, 102, 160, 1) 40%, rgba(113, 38, 113, 1) 100%),
repeating-linear-gradient(220deg, rgba(200,0,0, 0.25), rgba(200,0,0, 0.25) 6px, transparent -19px, transparent 10px),
repeating-linear-gradient(36deg, rgba(0,0,200, 0.25), rgba(0,0,200, 0.25) 1px, transparent 0px, transparent 2px);
background-size: 100%, 6px, 12px;
background-blend-mode: multiply;
box-shadow: 0 .8rem 2rem #0006, 0rem -1rem 2rem #000a inset;
border: none;
border-radius: 100% 78% 34% 39% / 100% 100% 66% 58%;
}
}
}
!
