<div></div>

<!-- Inspiration -> https://i.pinimg.com/originals/cc/d7/f7/ccd7f7517b5e7f77742302f637d0922e.jpg -->
  *,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  overflow: hidden;
}

:root {
  --dark-brown: rgb(103, 76, 54);
  --log-light: rgb(251, 207, 107);
  --log-dark: rgb(231, 175, 86);
  --door-light: #b5a68b;
  --door-dark: #b5a68b;
  --door-frame: rgb(103, 76, 54);
}


body {
  --sky: #CCF2FF;
  --grass-dark: linear-gradient(rgb(107, 128, 48) 0%, rgb(107, 128, 48) 100%) 0vmin 90vh / 100% 20vmin no-repeat;
  --grass-light: linear-gradient(rgb(126, 155, 51) 0%, rgb(126, 155, 51) 100%) 0vmin 90vh / 100% 5vmin no-repeat;
  --cloud-one-1: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 20vmin 20vmin / 10vmin 10vmin no-repeat;
  --cloud-one-2: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 23vmin 20vmin / 10vmin 10vmin no-repeat;
  --cloud-one-3: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 26vmin 20vmin / 10vmin 10vmin no-repeat;
  --cloud-one-4: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 21.5vmin 18vmin / 10vmin 10vmin no-repeat;
  --cloud-one-5: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 24.5vmin 18vmin / 10vmin 10vmin no-repeat;
  
  --cloud-two-1: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 30vmin 30vmin / 10vmin 10vmin no-repeat;
  --cloud-two-2: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 33vmin 30vmin / 10vmin 10vmin no-repeat;
  --cloud-two-3: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 36vmin 30vmin / 10vmin 10vmin no-repeat;
  --cloud-two-4: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 31.5vmin 28vmin / 10vmin 10vmin no-repeat;
  --cloud-two-5: radial-gradient( #fff 0%, #fff 30%, #fff 40%, transparent 40%) 34.5vmin 28vmin / 10vmin 10vmin no-repeat;
  
  --trunk-big-1: linear-gradient(-80deg, #855726 5%, transparent 5.5%) 7vmin 75vmin / 80vmin 15vmin no-repeat;
  --trunk-big-2: linear-gradient(80deg, #855726 5%, transparent 5.5%) 87vmin 75vmin / 80vmin 15vmin no-repeat;
  
  --tree-big-top-1: linear-gradient(-60deg, #5f8333 12%, transparent 12.5%) 27vmin 51vmin / 60vmin 18vmin no-repeat;
  --tree-big-top-2: linear-gradient(60deg, #5f8333 12%, transparent 12.5%) 87vmin 51vmin / 60vmin 18vmin no-repeat;
  
  --tree-big-middle-1: linear-gradient(-60deg, #5f8333 12%, transparent 12.5%) 7vmin 68vmin / 80vmin 8vmin no-repeat;
  --tree-big-middle-2: linear-gradient(60deg, #5f8333 12%, transparent 12.5%) 87vmin 68vmin / 80vmin 8vmin no-repeat;
  
  --tree-big-bottom-1: linear-gradient(-60deg, #5f8333 12%, transparent 12.5%) -13vmin 75vmin / 100vmin 10vmin no-repeat;
  --tree-big-bottom-2:linear-gradient(60deg, #5f8333 12%, transparent 12.5%) 87vmin 75vmin / 100vmin 10vmin no-repeat;
  
  
  --mountain-one-1: linear-gradient(-35deg, #ccc 12%, transparent 12.5%) 0vmin 12vh / 250vmin 78vmin no-repeat;
  --mountain-one-2: linear-gradient(35deg, #ccc 12%, transparent 12.5%) 250vmin 12vh / 250vmin 78vmin no-repeat;

  --mountain-two-1: linear-gradient(-35deg, #cac7c7 12%, transparent 12.5%) -200vmin 12vh / 250vmin 78vmin no-repeat;
  --mountain-two-2: linear-gradient(35deg, #cac7c7 12%, transparent 12.5%) 50vmin 12vh / 250vmin 78vmin no-repeat;

  --mountain-three-1: linear-gradient(-35deg, #eee 12%, transparent 12.5%) -400vmin 12vh / 570vmin 78vmin no-repeat;
  --mountain-three-2: linear-gradient(35deg, #eee 12%, transparent 12.5%) 170vmin 12vh / 570vmin 78vmin no-repeat;
  
  
  min-height: 100vh;
  background:
    var(--cloud-one-5),
    var(--cloud-one-4),
    var(--cloud-one-3),
    var(--cloud-one-2),
    var(--cloud-one-1),
    
    var(--cloud-two-5),
    var(--cloud-two-4),
    var(--cloud-two-3),
    var(--cloud-two-2),
    var(--cloud-two-1),
    
    var(--tree-big-top-1),
    var(--tree-big-top-2),
    var(--tree-big-middle-1),
    var(--tree-big-middle-2),
    var(--tree-big-bottom-1),
    var(--tree-big-bottom-2),
    var(--trunk-big-2),
    var(--trunk-big-1),
    
    var(--mountain-one-1),
    var(--mountain-one-2),
    var(--mountain-two-1),
    var(--mountain-two-2),
    var(--mountain-three-1),
    var(--mountain-three-2),
    
    var(--grass-light), 
    var(--grass-dark),
    var(--sky);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding-bottom: 10vmin;
}

div {
  --base: linear-gradient(rgb(123, 106, 100) 0%, rgb(123, 106, 100) 100%) 0vmin 39vmin / 100% 1vmin no-repeat;
  --terrace-1: linear-gradient(rgb(188, 152, 115) 0%, rgb(188, 152, 115) 100%) 23vmin 39vmin / 14vmin 1vmin no-repeat;
  --terrace-2: linear-gradient(rgb(232, 216, 193) 0%, rgb(232, 216, 193) 100%) 22.5vmin 38vmin / 15vmin 1vmin no-repeat;

  --logs: linear-gradient(180deg, rgb(251, 207, 107) 25%, rgb(231, 175, 86) 25%, rgb(231, 175, 86) 50%, rgb(251, 207, 107) 50%, rgb(251, 207, 107) 75%, rgb(231, 175, 86) 75%, rgb(231, 175, 86) 100%) 0vmin 25vmin / 4vmin 4vmin;
  --roof-beam: linear-gradient(rgb(171, 130, 78) 0%, rgb(171, 130, 78) 100%) 0vmin 16vmin / 100% 1vmin no-repeat;
  --roof-base: linear-gradient(rgb(123, 106, 101) 0%, rgb(123, 106, 101) 100%) 0vmin 0vmin / 100% 16vmin no-repeat;

  --roof-boarding-1: linear-gradient(#4F4139 0%, #4F4139 100%) 0vmin 0vmin / 100% 1vmin no-repeat;
  --roof-boarding-2: linear-gradient(#4F4139 0%, #4F4139 100%) 0vmin 16vmin / 100% 1vmin no-repeat;
  --roof-boarding-3: linear-gradient(#4F4139 0%, #4F4139 100%) 4vmin 4vmin / 30vmin 1vmin no-repeat;
  --roof-boarding-4: linear-gradient(#4F4139 0%, #4F4139 100%) 35vmin 8vmin / 22vmin 1vmin no-repeat;
  --roof-boarding-5: linear-gradient(#4F4139 0%, #4F4139 100%) 20vmin 8vmin / 5vmin 1vmin no-repeat;
  --roof-boarding-6: linear-gradient(#4F4139 0%, #4F4139 100%) 30vmin 12vmin / 12vmin 1vmin no-repeat;
  --roof-boarding-7: linear-gradient(#4F4139 0%, #4F4139 100%) 5vmin 12vmin / 20vmin 1vmin no-repeat;
  --roof-boarding-8: linear-gradient(#4F4139 0%, #4F4139 100%) 44vmin 4vmin / 10vmin 1vmin no-repeat;
  --roof-boarding-9: linear-gradient(#4F4139 0%, #4F4139 100%) 2vmin 8vmin / 9vmin 1vmin no-repeat;
  --roof-boarding-10: linear-gradient(#4F4139 0%, #4F4139 100%) 50vmin 12vmin / 7vmin 1vmin no-repeat;

  --minor-roof-1: linear-gradient(150deg, transparent 34.21%, #A88352 34.21%, #A88352 50%, transparent 50%) 22.5vmin 14vmin / 8vmin 8vmin no-repeat;
  --minor-roof-2: linear-gradient(-150deg, transparent 34.21%, #A88352 34.21%, #A88352 50%, transparent 50%) 29.5vmin 14vmin / 8vmin 8vmin no-repeat;
  --minor-roof-3: linear-gradient(150deg, transparent 34.21%, #8C6F43 34.21%, #8C6F43 50%, transparent 50%) 23.5vmin 15vmin / 8vmin 7vmin no-repeat;
  --minor-roof-4: linear-gradient(-150deg, transparent 34.21%, #8C6F43 34.21%, #8C6F43 50%, transparent 50%) 28.5vmin 15vmin / 8vmin 7vmin no-repeat;

  --minor-roof-5: linear-gradient(#4F4139, #4F4139) 24.5vmin 17vmin / 11vmin 3vmin no-repeat;
  --minor-roof-6: linear-gradient(#8C6F43, #8C6F43) 23.5vmin 20vmin / 13vmin 1vmin no-repeat;
  --minor-roof-7: linear-gradient(#8C6F43, #8C6F43) 29.5vmin 17vmin / 1vmin 4vmin no-repeat;
  --minor-roof-8: linear-gradient(#8C6F43, #8C6F43) 35.5vmin 20vmin / 1vmin 4vmin no-repeat;
  --minor-roof-9: linear-gradient(#8C6F43, #8C6F43) 23.5vmin 20vmin / 1vmin 4vmin no-repeat;


  --door-knob: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 33vmin 30vmin / 0.5vmin 1.5vmin no-repeat;
  --door-frame: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 25vmin 23vmin / 10vmin 17vmin no-repeat;
  --door: linear-gradient(90deg, #b5a68b 15%, #827d6b 15%, #827d6b 25%, #b5a68b 25%, #b5a68b 45%, #827d6b 45%, #827d6b 55%, #b5a68b 55%, #b5a68b 75%, #827d6b 75%, #827d6b 85%, #b5a68b 85%, #b5a68b 100%) 25.9vmin 24vmin / 8vmin 16vmin no-repeat;

  --window-one-bg: linear-gradient(#fff 0%, #fff 100%) 10vmin 23vmin / 8vmin 10vmin no-repeat;
  --window-one-shutter-1-1: linear-gradient(rgb(85, 132, 90) 0%, rgb(85, 132, 90) 100%) 6vmin 23vmin / 4vmin 10vmin no-repeat;
  --window-one-shutter-1-2: linear-gradient(rgb(85, 132, 90) 0%, rgb(85, 132, 90) 100%) 18vmin 23vmin / 4vmin 10vmin no-repeat;
  --window-one-shutter-2-1: linear-gradient(rgb(62, 112, 77) 0%, rgb(62, 112, 77) 100%) 7vmin 24vmin / 2vmin 8vmin no-repeat;
  --window-one-shutter-2-2: linear-gradient(rgb(62, 112, 77) 0%, rgb(62, 112, 77) 100%) 19vmin 24vmin / 2vmin 8vmin no-repeat;
  --window-one-glass-1: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 11vmin 24vmin / 1.5vmin 3vmin no-repeat;
  --window-one-glass-2: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 13vmin 24vmin / 1.5vmin 3vmin no-repeat;
  --window-one-glass-3: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 15vmin 24vmin / 1.5vmin 3vmin no-repeat;
  --window-one-glass-4: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 11vmin 28vmin / 5.5vmin 4vmin no-repeat;

  --window-two-bg: linear-gradient(#fff 0%, #fff 100%) 42vmin 23vmin / 8vmin 10vmin no-repeat;
  --window-two-shutter-1-1: linear-gradient(rgb(85, 132, 90) 0%, rgb(85, 132, 90) 100%) 38vmin 23vmin / 4vmin 10vmin no-repeat;
  --window-two-shutter-1-2: linear-gradient(rgb(85, 132, 90) 0%, rgb(85, 132, 90) 100%) 50vmin 23vmin / 4vmin 10vmin no-repeat;
  --window-two-shutter-2-1: linear-gradient(rgb(62, 112, 77) 0%, rgb(62, 112, 77) 100%) 39vmin 24vmin / 2vmin 8vmin no-repeat;
  --window-two-shutter-2-2: linear-gradient(rgb(62, 112, 77) 0%, rgb(62, 112, 77) 100%) 51vmin 24vmin / 2vmin 8vmin no-repeat;
  --window-two-glass-1: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 43vmin 24vmin / 1.5vmin 3vmin no-repeat;
  --window-two-glass-2: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 45vmin 24vmin / 1.5vmin 3vmin no-repeat;
  --window-two-glass-3: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 47vmin 24vmin / 1.5vmin 3vmin no-repeat;
  --window-two-glass-4: linear-gradient(rgb(103, 76, 54) 0%, rgb(103, 76, 54) 100%) 43vmin 28vmin / 5.5vmin 4vmin no-repeat;

  --pot-1: linear-gradient(#7D6D61, #7D6D61) 23vmin 36vmin / 2vmin 2vmin no-repeat;
  --pot-2: linear-gradient(#7D6D61, #7D6D61) 35vmin 36vmin / 2vmin 2vmin no-repeat;
  --pot-plant-1: radial-gradient(rgb(126, 155, 51) 50%, transparent 50%) 21.5vmin 32.5vmin / 5vmin 5vmin no-repeat;
  --pot-plant-2: radial-gradient(rgb(126, 155, 51) 50%, transparent 50%) 33.5vmin 32.5vmin / 5vmin 5vmin no-repeat;


  height: 40vmin;
  width: 60vmin;
  position: relative;
  background:
    var(--pot-1),
    var(--pot-2),
    var(--pot-plant-1),
    var(--pot-plant-2),

    var(--terrace-2),
    var(--terrace-1),
    var(--base),

    var(--door-knob),
    var(--door),
    var(--door-frame),
    var(--window-one-glass-1),
    var(--window-one-glass-2),
    var(--window-one-glass-3),
    var(--window-one-glass-4),
    var(--window-one-shutter-2-1),
    var(--window-one-shutter-2-2),
    var(--window-one-shutter-1-1),
    var(--window-one-shutter-1-2),
    var(--window-one-bg),

    var(--window-two-glass-1),
    var(--window-two-glass-2),
    var(--window-two-glass-3),
    var(--window-two-glass-4),
    var(--window-two-shutter-2-1),
    var(--window-two-shutter-2-2),
    var(--window-two-shutter-1-1),
    var(--window-two-shutter-1-2),
    var(--window-two-bg),


    var(--minor-roof-7),
    var(--minor-roof-1),
    var(--minor-roof-2),
    var(--minor-roof-3),
    var(--minor-roof-4),
    var(--minor-roof-5),
    var(--minor-roof-6),
    var(--minor-roof-8),
    var(--minor-roof-9),

    var(--roof-boarding-1),
    var(--roof-boarding-2),
    var(--roof-boarding-3),
    var(--roof-boarding-4),
    var(--roof-boarding-5),
    var(--roof-boarding-6),
    var(--roof-boarding-7),
    var(--roof-boarding-8),
    var(--roof-boarding-9),
    var(--roof-boarding-10),
    var(--roof-beam),
    var(--roof-base),
    var(--logs);
}

div::after {
  --bush-1: radial-gradient(#667761 0%, #667761 30%, #667761 40%, transparent 40%) 23% 43vmin / 3vmin 18vmin no-repeat;
  --bush-2: radial-gradient(#392F5A 0%, #392F5A 30%, #392F5A 40%, transparent 40%) 21% 46vmin / 3vmin 12vmin no-repeat;
  --bush-3: radial-gradient(#E396DF 0%, #E396DF 30%, #E396DF 40%, transparent 40%) 25% 48vmin / 3vmin 8vmin no-repeat;
  --bush-4: radial-gradient(#E365C1 0%, #E365C1 30%, #E365C1 40%, transparent 40%) 60% 45vmin / 3vmin 15vmin no-repeat;
  --bush-5: radial-gradient(#EDB230 0%, #EDB230 30%, #EDB230 40%, transparent 40%) 63% 48vmin / 3vmin 15vmin no-repeat;
  --bush-6: radial-gradient(#E77728 0%, #E77728 30%, #E77728 40%, transparent 40%) 62% 40vmin / 5vmin 20vmin no-repeat;


  --trunk-1: linear-gradient(-80deg, #855726 5%, transparent 5.5%) -33vmin 40vmin / 40vmin 15vmin no-repeat;
  --trunk-2: linear-gradient(80deg, #855726 5%, transparent 5.5%) 7vmin 40vmin / 40vmin 15vmin no-repeat;
  
  --tree-top-1: linear-gradient(-60deg, #6d9839 12%, transparent 12.5%) -25vmin 36vmin / 32vmin 8vmin no-repeat;
  --tree-top-2: linear-gradient(60deg, #6d9839 12%, transparent 12.5%) 7vmin 36vmin / 32vmin 8vmin no-repeat;
  
  --tree-middle-1: linear-gradient(-60deg, #6d9839 12%, transparent 12.5%) -31vmin 40vmin / 38vmin 8vmin no-repeat;
  --tree-middle-2: linear-gradient(60deg, #6d9839 12%, transparent 12.5%) 7vmin 40vmin / 38vmin 8vmin no-repeat;
  
  --tree-bottom-1: linear-gradient(-60deg, #6d9839 12%, transparent 12.5%) -33vmin 42vmin / 40vmin 10vmin no-repeat;
  --tree-bottom-2: linear-gradient(60deg, #6d9839 12%, transparent 12.5%) 7vmin 42vmin / 40vmin 10vmin no-repeat;

  --chimney-1: linear-gradient(180deg, #e0764c 10%, #ab4a0a 10%, #ab4a0a 20%, #e0764c 20%, #e0764c 30%, #ab4a0a 30%, #ab4a0a 40%, #e0764c 40%, #e0764c 50%, #ab4a0a 50%, #ab4a0a 60%, #e0764c 60%, #e0764c 70%, #ab4a0a 70%, #ab4a0a 80%, #e0764c 80%, #e0764c 90%, #ab4a0a 90%, #ab4a0a 100%) 40vmin 7vmin / 5vmin 8vmin no-repeat;
  --chimney-2: linear-gradient(90deg, #e0764c 50%, #ab4a0a 50%) 39.5vmin 7vmin / 6vmin 2vmin no-repeat;


  content: '';
  position: absolute;
  z-index: 2;
  top: -15vmin;
  left: -25vmin;
  bottom: 0;
  right: -25vmin;
  background:
    var(--bush-1),
    var(--bush-2),
    var(--bush-3),
    var(--bush-4),
    var(--bush-5),
    var(--bush-6),
    var(--chimney-2),
    var(--chimney-1),
    
    var(--tree-top-1),
    var(--tree-top-2),
    var(--tree-middle-1),
    var(--tree-middle-2),
    var(--tree-bottom-1),
    var(--tree-bottom-2),
    
    var(--trunk-2),
    var(--trunk-1);
}

div:before {
  --roof-skew-1: linear-gradient(105deg, transparent 34.21%, #7B6B65 34.21%, #7B6B65 50%, transparent 50%) -7vmin 0vmin / 30vmin 17vmin no-repeat;
  --roof-skew-2: linear-gradient(-105deg, transparent 34.21%, #7B6B65 34.21%, #7B6B65 50%, transparent 50%) 48vmin 0vmin / 30vmin 17vmin no-repeat;
  --roof-boarding-11: linear-gradient(#4F4139 0%, #4F4139 100%) 5vmin 0vmin / calc(100% - 10vmin) 1vmin no-repeat;
  --roof-boarding-12: linear-gradient(#4F4139 0%, #4F4139 100%) 0vmin 16vmin / 10vmin 1vmin no-repeat;
  --roof-boarding-13: linear-gradient(#4F4139 0%, #4F4139 100%) 61vmin 16vmin / 10vmin 1vmin no-repeat;
  content: '';
  position: absolute;
  z-index: 2;
  top: 0px;
  left: -6vmin;
  bottom: 0px;
  right: -6vmin;
  background:
    var(--roof-boarding-11),
    var(--roof-boarding-12),
    var(--roof-boarding-13),
    var(--roof-skew-1),
    var(--roof-skew-2);
}



/* Disable mountain and big tree on mobile/tablet */

@media (max-width: 767px) {
  body {
    background:
    var(--cloud-one-5),
    var(--cloud-one-4),
    var(--cloud-one-3),
    var(--cloud-one-2),
    var(--cloud-one-1),
    
    var(--cloud-two-5),
    var(--cloud-two-4),
    var(--cloud-two-3),
    var(--cloud-two-2),
    var(--cloud-two-1),
    
    var(--grass-light), 
    var(--grass-dark),
    var(--sky);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.