Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <div class="living-room" />
  <a target="_blank" href="http://pattylikes.pizza/assets/living%20room.JPG">Living Room IRL</a>
</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Lilita+One');

:root {
  --wall: #ccc4b8;
  --couch: #D48640;
  --couch-border: #AD6D34;
  --couch-legs: #986035;
  --rug-base: #e8d8bc;
  --rug-light-grey: #a89e87;
  --rug-dark-grey: #5E5246;
  --rug-orange: #D97A24;
  --rug-border: #A39D93;
  --artwork-white: #F5EEE0;
  --artwork-canvas-frame: #B3ADA2;
  --artwork-frame: #453E37;
  --artwork-blue: #11A5DB;
  --artwork-yellow: #EAD53D;
  --pot: #47422E;
  --dirt: #6E5330;
  --leaf: #768C14;
  --leaf-dark: #5C6E0F;
  --artwork-1-gradient-1: rgba(72, 98, 245, 0.5);
  --artwork-1-gradient-2: rgba(235, 146, 95, 0.5);
  --artwork-2-dark-blue: #6A6170;
  --artwork-2-light-blue: #95CDE5;
  --artwork-3-light: #DDD9D6;
  --artwork-3-blue: #11A5D8;
  --artwork-3-yellow: #E3D258;
  --artwork-4-sky: #9EC7DD;
  --artwork-4-rock: #389DD7;
  --artwork-4-yellow: #DFEF90;
  --artwork-4-green: #6FCE9F;
  --artwork-4-pink: #B79398;
  --lamp-pole: #A39D9D;
  --lamp-light: #E2E0CF;
}

html {
  font-size: 10px;
}

body {
  align-items: center;
  background-color: var(--wall);
  display: flex;
  font-family: 'Lilita One';
  justify-content: center;
  margin: 0;
}

.container {
  align-items: center;
  background-color: var(--wall);
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  position: relative;
  width: 100vw;
}

a {
  color: var(--rug-orange);
  cursor: pointer;
  font-size: 1.3rem;
  text-decoration: none;
  transform: translateY(20rem);
  
  &:hover {
    text-decoration: underline;
  }
}

.living-room {  
  background-image:    
    // couch
    linear-gradient(90deg, var(--couch-legs), var(--couch-legs)), // couch bottom trim
    linear-gradient(90deg, var(--couch-legs), var(--couch-legs)), // couch bottom leg left
    linear-gradient(90deg, var(--couch-legs), var(--couch-legs)), // couch bottom leg right
    linear-gradient(90deg, var(--couch-border) 7%, var(--couch) 7% 93%, var(--couch-border) 93%), // couch left arm body
    radial-gradient(circle at 50% 100%, var(--couch) 50%, transparent 50%), // couch left arm round top 
    radial-gradient(circle at 50% 100%, var(--couch-border) 50%, transparent 50%), // couch left arm round top border
    linear-gradient(90deg, var(--couch-border) 7%, var(--couch) 7% 93%, var(--couch-border) 93%), // couch right arm body
    radial-gradient(circle at 50% 100%, var(--couch) 50%, transparent 50%), // couch left arm round top 
    radial-gradient(circle at 50% 100%, var(--couch-border) 50%, transparent 50%), // couch right arm round top border

    
    // plant stuff
    linear-gradient(90deg, var(--leaf-dark), var(--leaf-dark)), // leaf 1 dark line
    radial-gradient(ellipse at 100% 90%, var(--leaf), 50%, transparent 50%), // leaf 1 top
    radial-gradient(ellipse at 100% 0%, var(--leaf), 50%, transparent 50%), // leaf 1 bottom
    radial-gradient(circle at 0% 50%, var(--leaf) 50%, transparent 50%), // leaf 1 base
    radial-gradient(ellipse at 0% 100%, transparent, 48%, var(--leaf) 48%  52%, transparent 52%), // stem 1
    linear-gradient(90deg, var(--leaf-dark), var(--leaf-dark)), // leaf 2 dark line
    radial-gradient(ellipse at 100% 90%, var(--leaf), 50%, transparent 50%), // leaf 2 top
    radial-gradient(ellipse at 100% 0%, var(--leaf), 50%, transparent 50%), // leaf 2 bottom
    radial-gradient(circle at 0% 50%, var(--leaf) 50%, transparent 50%), // leaf 2 base
    radial-gradient(ellipse at 0% 100%, transparent, 48%, var(--leaf) 48%  52%, transparent 52%), // stem 2
    linear-gradient(90deg, var(--leaf-dark), var(--leaf-dark)), // leaf 3 dark line
    radial-gradient(ellipse at 0% 90%, var(--leaf), 50%, transparent 50%), // leaf 3 top
    radial-gradient(ellipse at 0% 0%, var(--leaf), 50%, transparent 50%), // leaf 3 bottom
    radial-gradient(circle at 100% 50%, var(--leaf) 50%, transparent 50%), // leaf 3 base
    radial-gradient(ellipse at 100% 100%, transparent, 48%, var(--leaf) 48%  52%, transparent 52%), // stem 3
    radial-gradient(ellipse at 50% 100%, var(--dirt) 50%, transparent 50%), // dirt
    radial-gradient(circle at 50% 0%, var(--pot) 50%, transparent 50%), // pot bottom
    linear-gradient(90deg, var(--pot), var(--pot)), // pot body
    radial-gradient(ellipse at 50% 100%, var(--pot) 50%, transparent 50%), // pot top
    
    
    // lamp
    radial-gradient(circle at 50% 0%, var(--lamp-pole) 50%, transparent 50%), // light bottom
    radial-gradient(circle at 50% 0%, var(--lamp-light) 50%, transparent 50%), // light top
    linear-gradient(90deg, var(--lamp-pole), var(--lamp-pole)), // lamp pole
    radial-gradient(ellipse at 50% 50%, var(--lamp-pole) 50%, transparent 50%), // lamp base
    
    
    
    // artwork
    linear-gradient(0deg, var(--artwork-1-gradient-1), var(--artwork-1-gradient-2)), // art 1 gradient
    linear-gradient(90deg, var(--artwork-canvas-frame) 5%, transparent 5% 95%, var(--artwork-canvas-frame) 95%), // art 1 frame vertical
    linear-gradient(180deg, var(--artwork-canvas-frame) 5%, var(--artwork-white) 5% 95%, var(--artwork-canvas-frame) 95%), // art 1 frame horizontal
    radial-gradient(circle at 50% 50%, var(--artwork-2-dark-blue) 50%, transparent 50%), // art 2 balloon
    radial-gradient(circle at 50% 50%, var(--artwork-white) 50%, transparent 50%), // art 2 moon
    linear-gradient(0deg, var(--artwork-2-dark-blue) 37%, var(--artwork-2-light-blue) 37%), // art 2 main
    linear-gradient(90deg, var(--artwork-white), var(--artwork-white)), // art 2 white frame
    linear-gradient(90deg, var(--artwork-frame), var(--artwork-frame)), // art 2 black frame
    radial-gradient(circle at 50% 50%, var(--artwork-3-blue) 50%, transparent 50%), // art 3 balloon
    radial-gradient(circle at 50% 50%, var(--artwork-3-yellow) 50%, transparent 50%), // art 3 sun
    linear-gradient(0deg, var(--artwork-3-blue) 35%, var(--artwork-3-light) 35%), // art 3 main
    linear-gradient(90deg, var(--artwork-white), var(--artwork-white)), // art 3 white frame
    linear-gradient(90deg, var(--artwork-frame), var(--artwork-frame)), // art 3 black frame
    linear-gradient(225deg, transparent 25%, var(--artwork-yellow) 25% 90%, transparent 90%), // art 4 left roof
    linear-gradient(135deg, transparent 25%, var(--artwork-yellow) 25% 90%, transparent 90%), // art 4 right roof
    linear-gradient(90deg, var(--artwork-white) 20%, var(--artwork-4-pink) 20% 50%, var(--artwork-4-green) 50%), // art 4 house
    linear-gradient(90deg, var(--artwork-4-rock) 65%, var(--artwork-white) 65% 85%, var(--artwork-4-rock) 85%), // art 4 mountain/water
    radial-gradient(circle at 50% 50%, var(--artwork-4-sky) 90%, transparent 90%), // art 4 sky
    linear-gradient(90deg, var(--artwork-canvas-frame) 3%, transparent 3% 97%, var(--artwork-canvas-frame) 97%), // art 4 frame vertical
    linear-gradient(180deg, var(--artwork-canvas-frame) 3%, var(--artwork-white) 3% 97%, var(--artwork-canvas-frame) 97%), // art 4 frame horizontal
    
    
    // couch pillows
    radial-gradient(ellipse at 100%, transparent 45%, var(--couch-border) 45% 55%, transparent 55%),  // couch bottom pillow border 1
    linear-gradient(90deg, var(--couch-border), var(--couch-border)), // couch bottom pillow border 2
    radial-gradient(ellipse at 0%, transparent 45%, var(--couch-border) 45% 55%, transparent 55%), // couch bottom pillow border 3
    linear-gradient(90deg, var(--couch-border) 1.5%, var(--couch) 1.5% 98.5%, var(--couch-border) 98.5%), // couch bottom main
    radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), // couch bottom round top border
    radial-gradient(ellipse at 50% 100%, var(--couch-border) 50%, transparent 50%), // couch bottom round top border
    radial-gradient(ellipse at 100% 35%, transparent 45%, var(--couch-border) 45% 55%, transparent 55%), // couch pillow border 1
    linear-gradient(90deg, var(--couch-border), var(--couch-border)), // couch pillow border 2
    radial-gradient(ellipse at 0% 35%, transparent 45%, var(--couch-border) 45% 55%, transparent 55%), // couch pillow border 3
    linear-gradient(90deg, var(--couch-border) 2%, var(--couch) 2% 98%, var(--couch-border) 98%), // couch back main
    radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), // couch main top 1
    radial-gradient(ellipse at 50% 100%, var(--couch-border) 50%, transparent 50%), // couch main top border 1
    radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), // couch main top 2
    radial-gradient(ellipse at 50% 100%, var(--couch-border) 50%, transparent 50%), // couch main top border 2
    radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), // couch main top 3
    radial-gradient(ellipse at 50% 100%, var(--couch-border) 50%, transparent 50%), // couch main top  3
    radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), // couch main top border 4
    radial-gradient(ellipse at 50% 100%, var(--couch-border) 50%, transparent 50%), // couch main top border 4
    linear-gradient(170deg, transparent 50%, var(--couch-border) 50% 53%, var(--couch) 53%), // couch left main
    linear-gradient(190deg, transparent 50%, var(--couch-border) 50% 53%, var(--couch) 53%), // couch right main

    
    // rug sides to cover patterns and add border
    linear-gradient(120deg, var(--wall) 14%, var(--rug-border) 14% 15.5%, transparent 15.5%), // rug sides left
    linear-gradient(60deg, transparent 84.5%, var(--rug-border) 84.5% 86%, var(--wall) 86%), // rug sides right
    linear-gradient(90deg, var(--rug-border), var(--rug-border)), // rug top border
    linear-gradient(90deg, var(--rug-border), var(--rug-border)), // rug bottom border
    
    
    // rug row 1
    linear-gradient(30deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), // sq1, left
    linear-gradient(330deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), // sq1, right
    linear-gradient(30deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), // sq2, left
    linear-gradient(330deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), // sq2, right
    linear-gradient(30deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), // sq3, left
    linear-gradient(330deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), // sq3 right
    
    
    // rug row 2
    linear-gradient(30deg, var(--rug-orange) 0% 8%, var(--rug-light-grey) 8% 14%, transparent 14% 22%, var(--rug-dark-grey) 22% 28%, var(--rug-light-grey) 28% 34%, transparent 34%), // sq1, top right
    linear-gradient(150deg, var(--rug-orange) 0% 15%, var(--rug-light-grey) 15% 19%, transparent 19% 25%, var(--rug-dark-grey) 25% 30%, var(--rug-light-grey) 30% 34%, transparent 34%), // sq1, bottom right
    linear-gradient(330deg, var(--rug-orange) 0% 8%, var(--rug-light-grey) 8% 16%, transparent 16% 23%, var(--rug-dark-grey) 23% 31%, var(--rug-light-grey) 31% 38%, transparent 38%), // sq2, top left
    linear-gradient(30deg, var(--rug-orange) 0% 8%, var(--rug-light-grey) 8% 16%, transparent 16% 23%, var(--rug-dark-grey) 23% 31%, var(--rug-light-grey) 31% 38%, transparent 38%), // sq2, top right
    linear-gradient(220deg, var(--rug-orange) 0% 7.5%, var(--rug-light-grey) 7.5% 13.5%, transparent 13.5% 20%, var(--rug-dark-grey) 20% 27%, var(--rug-light-grey) 27% 33%, transparent 33%), // sq2, bottom left
    linear-gradient(140deg, var(--rug-orange) 0% 7.5%, var(--rug-light-grey) 7.5% 13.5%, transparent 13.5% 20%, var(--rug-dark-grey) 20% 27%, var(--rug-light-grey) 27% 33%, transparent 33%), // sq2, bottom right
    linear-gradient(330deg, var(--rug-orange) 0% 8%, var(--rug-light-grey) 8% 16%, transparent 16% 23%, var(--rug-dark-grey) 23% 31%, var(--rug-light-grey) 31% 38%, transparent 38%), // sq3, top left
    linear-gradient(30deg, var(--rug-orange) 0% 8%, var(--rug-light-grey) 8% 16%, transparent 16% 23%, var(--rug-dark-grey) 23% 31%, var(--rug-light-grey) 31% 38%, transparent 38%), // sq3, top right
    linear-gradient(220deg, var(--rug-orange) 0% 7.5%, var(--rug-light-grey) 7.5% 13.5%, transparent 13.5% 20%, var(--rug-dark-grey) 20% 26.5%, var(--rug-light-grey) 26.5% 33%, transparent 33%), // sq3, bottom left
    linear-gradient(140deg, var(--rug-orange) 0% 7.5%, var(--rug-light-grey) 7.5% 13.5%, transparent 13.5% 20%, var(--rug-dark-grey) 20% 26.5%, var(--rug-light-grey) 26.5% 33%, transparent 33%), // sq3, bottom right
    linear-gradient(330deg, var(--rug-orange) 0% 8%, var(--rug-light-grey) 8% 14%, transparent 14% 22%, var(--rug-dark-grey) 22% 28%, var(--rug-light-grey) 28% 34%, transparent 34%), // sq4, top left
    linear-gradient(210deg, var(--rug-orange) 0% 15%, var(--rug-light-grey) 15% 19%, transparent 19% 25%, var(--rug-dark-grey) 25% 30%, var(--rug-light-grey) 30% 34%, transparent 34%), // sq4, bottom left
    
    
     // rug row 3
    linear-gradient(150deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), // sq1, left
    linear-gradient(210deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), // sq1, right
    linear-gradient(150deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), // sq2, left
    linear-gradient(210deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), // sq2, right
    linear-gradient(150deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), // sq3, left
    linear-gradient(210deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), // sq3 right
    
    
    // rug base
    linear-gradient(120deg, transparent 15%, var(--rug-base) 15% 70%, transparent 70%), // rug base left 
    linear-gradient(60deg, transparent 30%, var(--rug-base) 30% 85%, transparent 85%), // rug base right
    ;
  background-repeat: no-repeat;
  background-position:    
    // couch
    50% 72%, // couch bottom trim
    30% 75%, // couch bottom leg left
    70% 75%, // couch bottom leg right
    23.7% 64.5%, // couch left arm body
    24.2% 48.5%, // couch left arm round top
    23.7% 47.5%, // couch left arm round top border
    76.3% 64.5%, // couch right arm body
    76% 48.5%, // couch left arm round top
    76.3% 47.5%, // couch right arm round top border
    
    
    // plant stuff
    4% 30.2%, // leaf 1 dark line
    -1% 27%, // leaf 1 top
    -1% 32%, // leaf 1 bottom
    12.3% 29%, // leaf 1 base
    14% 31%, // stem 1
    2% 15%, // leaf 2 dark line
    -4.4% 10.3%, // leaf 2 top
    -4.4% 16.4%, // leaf 2 bottom
    11.3% 11.9%, // leaf 2 base
    15% -4%, // stem 2
    31% 37.6%, // leaf 3 dark line
    32.7% 35.4%, // leaf 3 top
    32.7% 39.5%, // leaf 3 bottom
    26.3% 37%, // leaf 3 base
    20% 41%, // stem 3
    18.3% 58%, // dirt
    16% 71.3%, // pot bottom
    18.2% 65%, // pot main
    17.1% 57.8%, // pot top
    
    
    // lamp
    80.1% 26%, // light base
    81.7% 22%, // light top
    79% 50%, // lamp pole
    83% 72%, // lamp bottom
    
    
    // artwork 
    41.1% 7.5%, // art 1 gradient
    41% 7%, // art 1 frame horizontal
    41% 7%, // art 1 frame vertical
    62.4% 3.5%, // art 2 balloon
    61% 5%, // art 2 moon
    61.5% 3.1%, // art 2 main
    61.7% 2%, // art 2 white frame
    62% 1.3%, // art 2 black frame
    38% 22%, // art 3 balloon
    43.5% 23%, // art 3 sun
    37.7% 23%, // art 3 main
    37.1% 22%, // art 3 white frame
    36.7% 21.5%, // art 3 black frame
    61.3% 20.5%, // art 4 roof right
    59.5% 20.5%, // art 4 roof left
    60.5% 22.4%, // art 4 house
    61.5% 27.5%, // art 4 mountain/sky
    61.7% 23.5%, // art 4 sky
    62% 22.5%, // art 4 frame horizontal
    62% 22.5%, // art 4 frame vertical
    
    
    // couch pillows
    39% 68.5%, // couch bottom pillow border 1
    50% 63.5%, // couch bottom pillow border 2
    61% 68.5%, // couch bottom pillow border 3
    50% 67%, // couch bottom main
    50% 58.5%, // couch bottom round top
    50% 57.5%, // couch bottom round top border
    41.5% 61%, // couch pillow border 1
    50% 61%, // couch pillow border 2
    58.5% 61%, // couch pillow border 3
    50% 51%, // couch back main
    35.7% 43%, // couch main top 1
    35.7% 42.3%, // couch main top border 1
    45% 43%, // couch main top 2
    45% 42.3%, // couch main top border 2
    54.3% 43%, // couch main top 3
    54.3% 42.3%, // couch main top border 3
    63.9% 43%, // couch main top 4
    63.9% 42.3%, // couch main top border 4
    28% 45%, // couch left main
    72% 45%, // couch right main,
    
    
    // rug sides to cover patterns and border
    100% 100%, // rug sides left
    100% 100%, // rug sides right
    50% 74.2%, // rug top border
    50% 100.5%, // rug bottom border
    
    
    // rug row 1
    19.7% 82.3%, // sq1, left
    30.7% 82.3%, // sq1, right
    44.5% 82.3%, // sq2, left
    55.5% 82.3%, // sq2, right
    69.3% 82.3%, // sq3, left
    80% 82.3%, // sq3, right
    
    
    // rug row 2
    12% 81.3%, // sq1, top right
    6.5% 105.3%, // sq1, bottom right
    31% 82.3%, // sq2, top left
    43.3% 82.3%, // sq2, top right
    31% 105.3%, // sq2, bottom left
    43% 105.3%, // sq2, bottom right
    57% 82.3%, // sq3, top left
    69.2% 82.3%, // sq3, top right
    57% 105.3%, // sq3, bottom left
    69.2% 105.3%, // sq3, bottom right
    88% 81.3%, // sq4, top left
    93.5% 105.3%, // sq4, bottom left
    
    
    // rug row 3
    10% 99.5%, // sq1, left
    24.7% 99.5%, // sq1, right
    43% 99.5%, // sq2, left
    58% 99.5%, // sq2, right
    75.3% 99.5%, // sq3, left
    90% 99.5%, // sq3, right
    
    
    // rug base
    0% 99%, // rug base left
    0% 99%, // rug base right
    ;
  background-size: 
    // couch
    57% 2%, // couch bottom trim
    3% 5%, // couch bottom leg left
    3% 5%, // couch bottom leg right
    9.3% 17.5%, // couch left arm body
    8% 10%, // couch left arm round top
    9.3% 11%, // couch left arm round top border
    9.3% 17.5%, // couch right arm body
    8% 10%, // couch right arm round top
    9.3% 11%, // couch right arm round top border
    
    
    // plant stuff
    9% 0.5%, // leaf 1 dark line
    13% 5%, // leaf 1 top
    13% 5%, // leaf 1 bottom
    6% 7%, // leaf 1 base
    10% 40%, // stem 1
    10% 0.5%, // leaf 2 dark line
    14.4% 6%, // leaf 2 top
    14.4% 6%, // leaf 2 bottom
    6% 9.4%, // leaf 2 base
    10% 60%, // stem 2
    7% 0.5%, // leaf 3 dark line
    11% 4%, // leaf 3 top
    11% 4%, // leaf 3 bottom
    4% 6.4%, // leaf 3 base
    10% 30%, // stem 3
    13% 1.5%, // dirt
    15% 5%, // pot bottom
    8% 10%, // pot body
    15% 3%, // pot top
    
    
    // lamp
    5% 5%, // light base
    10% 10%, // light top
    1.2% 45%, // lamp pole
    15% 5%, // lamp bottom
    
    
    // artwork
    9.5% 9%, // art 1 gradient
    10% 10%, // art 1 frame horiztonal
    10% 10%, // art 1 frame vertical
    4% 4%, // art 2 balloon
    5% 5%, // art 2 moon
    16% 11%, // art 2 main
    18.5% 13.5%, // art 2 white frame
    20% 15%, // art 2 black frame
    4% 4%, // art 3 balloon
    5% 5%, // art 3 sun
    16% 11%, // art 3 main
    18.5% 13.5%, // art 3 white frame
    20% 15%, // art 3 black frame
    2% 1.7%, // art 4 right roof
    2% 1.7%, // art 4 left roof
    3% 2.5%, // art 4 house
    8.7% 12.5%, // art 4 mountain/sky
    12% 17%, // art 4 sky
    15% 20%, // art 4 frame horiztonal
    15% 20%, // art 4 frame vertical
    
    
    // couch pillows
    3% 20%, // couch bottom pillow border 1,
    0.7% 20%, // couch bottom pillow border 2,
    3% 20%, // couch bottom pillow border 3,
    40% 11%, // couch bottom main
    58% 4%, // couch bottom round top
    57% 5%, // couch bottom round top border
    5% 30%, // couch pillow border 1,
    0.7% 30%, // couch pillow border 2,
    5% 30%, // couch pillow border 3,
    34% 15%, // couch back main
    12% 1.5%, // couch main top 1
    13% 2%, // couch main top border 1
    12% 1.5%, // couch main top 2
    13% 2%, // couch main top border 2
    12% 1.5%, // couch main top 3
    13% 2%, // couch main top border 3
    12% 1.5%, // couch main top 4
    13% 2%, // couch main top border 4
    7% 30%, // couch left main
    7% 30%, // couch right main    
    
    
    // rug sides to cover patterns and border
    100% 27%, // rug sides left
    100% 27%, // rug sides right
    68% 1.7%, // rug top border
    94% 1.7%, // rug bottom border
    
    
    // rug row 1
    10% 10%, // sq1, left
    10% 10%, // sq1, right
    10% 10%, // sq2, left
    10% 10%, // sq2, right
    10% 10%, // sq3, left
    10% 10%, // sq3, right
    
    
    // rug row 2
    17% 17%, // sq1, top right
    28% 20%, // sq1, bottom right
    11% 11%, // sq2, top left
    11% 11%, // sq2, top right
    10.7% 20%, // sq2, bottom left
    10.7% 20%, // sq2, bottom right
    11% 11%, // sq3, top left
    11% 11%, // sq3, top right
    11% 20%, // sq3, bottom left
    11% 20%, // sq3, bottom right
    17% 17%, // sq4, top left
    28% 20%, // sq4, bottom left
    
    // rug row 3
    13% 13%, // sq1, left
    13% 13%, // sq1, right
    13% 13%, // sq2, left
    13% 13%, // sq2, right
    13% 13%, // sq3, left
    13% 13%, // sq3, right
    
    
    // rug base
    100% 25%, // rug base left
    100% 25%, // rug base right
    ;
  
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
  min-height: 37rem;
  min-width: 43rem;
}

              
            
!

JS

              
                // NOTHING HERE NEEDED BECAUSE CSS IS MAGIC
              
            
!
999px

Console