@font-face{font-family:Mortega Regular;font-style:normal;font-weight:400;src:local("Mortega Regular"),url(/fonts/Mortega.woff2) format("woff2"),url(/fonts/Mortega.woff) format("woff")}:root{--primary-color: #7988f1;--roof-edge-height: 18px;--content-padding-x: 1em}@media screen and (min-width:585px){:root{--content-padding-x: 3em}}body{background:radial-gradient(circle at 75% 35%,#ffd28cd9,#ffd28c00 40%),linear-gradient(to bottom,#5fa6d8,#8ec0e6 35%,#f2c19b 65%,#f6b07a 85%,#f3c6a8) no-repeat #f3c6a8;background-size:100% 100vh}body:before{content:"";position:fixed;inset:-15%;background:radial-gradient(ellipse at 20% 30%,rgba(255,255,255,.28),transparent 45%),radial-gradient(ellipse at 55% 25%,rgba(255,240,220,.25),transparent 50%),radial-gradient(ellipse at 80% 35%,rgba(255,230,210,.22),transparent 48%),radial-gradient(ellipse at 40% 50%,rgba(255,220,200,.18),transparent 55%);filter:blur(55px);pointer-events:none}hr{background:var(--primary-color);height:var(--roof-edge-height);border:0;margin:3em calc(-1 * var(--content-padding-x));box-shadow:0 3px 4px #0000001a}.post-facade{background:url(/texture.png) #ffe8d2;position:relative;&:before{--ledge: 8px;--ledge-shadow: 4px;content:"";display:block;background:var(--primary-color);height:var(--roof-edge-height);width:calc(100% + var(--ledge) * 2);position:absolute;top:0;left:calc(-1 * var(--ledge));clip-path:polygon(0 0,100% 0,calc(100% - var(--ledge)) calc(100% + var(--ledge-shadow)),var(--ledge) calc(100% + var(--ledge-shadow)))}&.rooftop,&.logoRoof{&:before{box-shadow:0 3px var(--ledge-shadow) #0000001a}}}.rooftop{width:59.5%;height:60px}.logoRoof{width:71.5%;padding:calc(var(--roof-edge-height) + 1.2em) 0 1em;margin-bottom:calc(-1 * var(--roof-edge-height));position:relative;z-index:3;display:flex;gap:.5em;flex-direction:column;align-items:center;justify-content:center;img{height:36px}}.logo{font-weight:400;font-size:3em;text-transform:uppercase;margin:0}.navigation{width:88%;padding:var(--roof-edge-height) 1em;margin-bottom:calc(-1 * var(--roof-edge-height));z-index:2;display:flex;align-items:center}.content{width:100%;flex:1;padding:2em var(--content-padding-x);@media screen and (min-width:585px){padding:var(--content-padding-x)}h1{margin-top:0}}button,.button{background:var(--primary-color);color:#fff;display:inline-block;padding:.75em 2em}button{cursor:pointer;font-family:inherit;font-size:inherit;font-weight:700;border:none;width:100%}.postcards{display:flex;flex-direction:column;gap:1em}.postcard{background:#fff;box-shadow:1px 8px 10px #0000000d;display:flex;flex-direction:column-reverse;align-items:center;gap:2em;padding:1em;width:100%;break-inside:avoid;@media screen and (min-width:768px){flex-direction:row;align-items:flex-start}}.postcard-text{width:100%;padding:0 1em}.message{font-family:Courier New,monospace;font-size:1.15em;line-height:1.5;word-wrap:break-word}.author{display:inline-block;font-family:Mortega Regular,cursive;font-size:1.5em;word-break:break-all}.stamp{--r: 10px;background:#f2e3d1;mask:radial-gradient(50% 50%,#0000 66%,#000 67%) round var(--r) var(--r) / calc(2 * var(--r)) calc(2 * var(--r)),conic-gradient(#000 0 0) content-box;padding:var(--r)}.stamp-motif{border:2px solid rgba(87,70,60,.5);padding:3px;margin:5px}.postage{position:relative}.ink-stamp{height:100px;font-family:sans-serif;position:absolute;z-index:2;bottom:-42px;left:30px;transform:rotate(-2deg);@media screen and (min-width:768px){bottom:0;left:-90px}}.outer,.inner{fill:none;stroke:#000}.outer{stroke-width:2}.inner{stroke-width:1.5}.country{font-size:.8em;letter-spacing:2px;text-transform:uppercase}.date{font-size:.9em;text-anchor:middle}.waves{fill:none;stroke:#000;stroke-width:2}.house{--house-width: 260px;--house-height: 360px;--roof-height: 55px;--roof-pattern: url(#shinglePattern);--roof-top-edge: 0px;--roof-bottom-edge: 2px;--door-width: 26px;--door-height: 52px;--facade-style0-visibility: none;--facade-style1-visibility: none;--facade-style2-visibility: none;display:block;width:var(--house-width);height:var(--house-height);&.facade-style-0{--facade-style0-visibility: block;--stairwell-width: 33px;--stairwell-height: 244px;--stairwell-y: var(--roof-height);--base-height: 21px;--base-pattern: url(#brickPattern);--door-portal-width: 42px;--door-portal-height: 61px}&.facade-style-1{--facade-style1-visibility: block;--stairwell-width: 23px;--stairwell-height: 210px;--stairwell-y: 54px;--base-height: 95px;--base-pattern: url(#brickPattern);--door-portal-width: 0;--door-portal-height: 0;--story-1-window-frames-visibility: none}&.facade-style-2{--facade-style2-visibility: block;--roof-height: 50px;--base-height: 30px;--base-pattern: url(#stonePattern);--roof-pattern: var(--accent-color);--roof-top-edge: 4px;--roof-bottom-edge: 2px;--door-portal-width: 42px;--door-portal-height: 64px}}.facade0-only{display:var(--facade-style0-visibility)}.facade1-only{display:var(--facade-style1-visibility)}.facade2-only{display:var(--facade-style2-visibility)}.facade-color-0{--facade-color: #fcf1e1;--facade-pattern: url(#stuccoPattern)}.facade-color-1{--facade-color: #f39292;--facade-pattern: url(#rauputzPuttern)}.facade-color-2{--facade-color: #e8df9a;--facade-pattern: url(#rauputzPuttern)}.facade-color-3{--facade-color: #8ac7ac;--facade-pattern: url(#stuccoPattern)}.facade-color-4{--facade-color: #87b6ef;--facade-pattern: url(#rauputzPuttern)}.accent-color-0{--accent-color: #33b377}.accent-color-1{--accent-color: #d9735f}.accent-color-2{--accent-color: #efefef}.accent-color-3{--accent-color: #e19e50}.door-style-0{--door-color: #563012}.door-style-1{--door-color: #457949}.door-style-2{--door-color: #3d7098}.door-style-3{--door-color: #9a4830}.roof{--roof-stroke-width: calc(var(--roof-top-edge) + var(--roof-bottom-edge));fill:var(--roof-pattern);stroke:url(#brickPattern);stroke-width:var(--roof-stroke-width);width:calc(var(--house-width) + var(--roof-stroke-width));height:var(--roof-height);transform:translate(calc(-.5 * var(--roof-stroke-width))) translateY(calc(var(--roof-top-edge) - .5 * var(--roof-stroke-width)))}.roof-pattern{width:var(--house-width);height:var(--roof-height)}.roof-top-windows{--roof-window-width: 16px;--roof-window-height: 10px;--space-between-windows: calc(var(--house-width) / 5);transform:translate(calc((var(--space-between-windows) - var(--roof-window-width)) / 2),calc((var(--roof-height) - var(--roof-window-height)) / 2));.x2{transform:translate(var(--space-between-windows))}.x3{transform:translate(calc(2 * var(--space-between-windows)))}.x4{transform:translate(calc(3 * var(--space-between-windows)))}.x5{transform:translate(calc(4 * var(--space-between-windows)))}}.broad-gable{--gable-width: 76px;--gable-height: 10px;transform:translate(calc((var(--house-width) - var(--gable-width)) / 2),calc(var(--roof-height) - var(--gable-height)))}.narrow-gable{--gable-width: 48px;--gable-height: 10px;transform:translate(calc((var(--house-width) - var(--gable-width)) / 2),calc(var(--roof-height) - 2 * var(--gable-height)))}.gable{width:var(--gable-width);height:var(--gable-height)}.gable-lining{fill:url(#brickPattern);width:var(--gable-width);height:2px;transform:translateY(-2px)}.facade{transform:translateY(var(--roof-height));width:var(--house-width);height:calc(var(--house-height) - var(--roof-height) - var(--base-height))}.facade-color{fill:var(--facade-color)}.facade-pattern{fill:var(--facade-pattern)}.base{fill:var(--base-pattern);width:var(--house-width);height:var(--base-height);transform:translateY(calc(var(--house-height) - var(--base-height)))}.door-portal{fill:var(--base-pattern);width:var(--door-portal-width);height:calc(var(--door-portal-height) - var(--base-height));transform:translate(calc((var(--house-width) - var(--door-portal-width)) / 2),calc(var(--house-height) - var(--door-portal-height)))}.stairwell{transform:translate(calc((var(--house-width) - var(--stairwell-width)) / 2),var(--stairwell-y))}.round-window{transform:translate(calc(var(--house-width) / 2))}.stairwell-window-band{--window-width: var(--stairwell-width);--window-height: var(--stairwell-height);--cross-bars: 20;.window{stroke-width:1px}}.stairwell-bricks{--stairwell-lining: 2px;fill:transparent;stroke:url(#brickPattern);stroke-width:5;width:calc(var(--stairwell-width) + 2 * var(--stairwell-lining));height:calc(var(--stairwell-height) + 2 * var(--stairwell-lining));transform:translate(calc(-1 * var(--stairwell-lining)),calc(-1 * var(--stairwell-lining)))}.stairwell-window{--window-width: 20px;--window-height: 8px;transform:translate(calc((var(--house-width) - var(--window-width)) / 2),calc(-.5 * var(--window-height)));.window-cross-bar{display:none}}.big-window{--window-width: 30px;--window-height: 32px;--cross-bars: 3}.small-window{--window-width: 24px;--window-height: 32px;--cross-bars: 3}.window-story-1{transform:translateY(270px)}.window-story-2{transform:translateY(205px)}.window-story-3{transform:translateY(140px)}.window-story-4{transform:translateY(75px)}.window-x1{transform:translate(14px)}.window-x2{transform:translate(63px)}.window-x3{transform:translate(173px)}.window-x4{transform:translate(216px)}.window-frame,.window{width:var(--window-width);height:var(--window-height)}.window-frame{stroke:var(--accent-color);stroke-width:8px;display:var(--window-frame-display, block)}.window-story-1{--window-frame-display: var(--story-1-window-frames-visibility)}.window{fill:#313548;stroke:#fff;stroke-width:2px}.window-center-bar{fill:#fff;width:2px;height:var(--window-height);transform:translate(calc(var(--window-width) / 2 - 1px))}.window-cross-bar{--bar-y: calc(var(--window-height) / (var(--cross-bars) + 1));fill:#fff;width:var(--window-width);height:1px;&.y1{transform:translateY(var(--bar-y))}&.y2{transform:translateY(calc(2 * var(--bar-y)))}&.y3{transform:translateY(calc(3 * var(--bar-y)))}&.y4{transform:translateY(calc(4 * var(--bar-y)))}&.y5{transform:translateY(calc(5 * var(--bar-y)))}&.y6{transform:translateY(calc(6 * var(--bar-y)))}&.y7{transform:translateY(calc(7 * var(--bar-y)))}&.y8{transform:translateY(calc(8 * var(--bar-y)))}&.y9{transform:translateY(calc(9 * var(--bar-y)))}&.y10{transform:translateY(calc(10 * var(--bar-y)))}&.y11{transform:translateY(calc(11 * var(--bar-y)))}&.y12{transform:translateY(calc(12 * var(--bar-y)))}&.y13{transform:translateY(calc(13 * var(--bar-y)))}&.y14{transform:translateY(calc(14 * var(--bar-y)))}&.y15{transform:translateY(calc(15 * var(--bar-y)))}&.y16{transform:translateY(calc(16 * var(--bar-y)))}&.y17{transform:translateY(calc(17 * var(--bar-y)))}&.y18{transform:translateY(calc(18 * var(--bar-y)))}&.y19{transform:translateY(calc(19 * var(--bar-y)))}&.y20{transform:translateY(calc(20 * var(--bar-y)))}}.round-window-cross-bar{stroke:#fff;stroke-width:1px}.blinds-1{--blinds-height: .4}.blinds-2{--blinds-height: .7}.blinds-3{--blinds-height: .5}.blinds-4{--blinds-height: .25}.blinds-5{--blinds-height: .65}.blinds{fill:url(#blindsPattern);transform:translate(-1px,-1px);width:calc(var(--window-width) + 2px);height:calc(var(--blinds-height) * calc(var(--window-height) + 2px))}.blinds-area{fill:#457949f2}.blinds-separator{stroke:#365c39f2}.door-group{transform:translate(calc((var(--house-width) - var(--door-width)) / 2),calc(var(--house-height) - var(--door-height)))}.door{fill:var(--door-color);width:var(--door-width);height:var(--door-height)}.door-style-0{.door-group{--door-window-width: 14px;--door-window-height: 20px;--door-window-x: calc((var(--door-width) - var(--door-window-width)) / 2);--door-window-y: 7px}.door-window{fill:#1a1c26;stroke:#fff3;stroke-width:1;shape-rendering:crispEdges;width:var(--door-window-width);height:var(--door-window-height);transform:translate(var(--door-window-x),var(--door-window-y))}.door-window-bar{fill:#ffffff4d;width:calc(var(--door-window-width) - 2px);height:1px;--window-bar-x: calc(var(--door-window-x) + 1px);--window-bar-offset-y: var(--door-window-height) / 4;&.y1{transform:translate(var(--window-bar-x)) translateY(calc(var(--door-window-y) + var(--window-bar-offset-y)))}&.y2{transform:translate(var(--window-bar-x)) translateY(calc(var(--door-window-y) + var(--window-bar-offset-y) * 2))}&.y3{transform:translate(var(--window-bar-x)) translateY(calc(var(--door-window-y) + var(--window-bar-offset-y) * 3))}}.door-protruding{--door-protruding-width: 14px;fill:#3b210c;stroke:#3b210c;width:var(--door-protruding-width);height:10px;transform:translate(calc(calc(var(--door-width) - var(--door-protruding-width)) / 2),34px)}}.door-style-1{--door-protruding-width: 7px;--door-protruding-height: 5px;--door-protruding-offset-x: 5.5px;--door-protruding-offset-y: 4.5px;.door-group{--door-protruding-center-x: calc((var(--door-width) - var(--door-protruding-width)) / 2)}.door-protruding-left{transform:translate(calc(var(--door-protruding-center-x) - var(--door-protruding-offset-x)),var(--door-protruding-offset-y))}.door-protruding-right{transform:translate(calc(var(--door-protruding-center-x) + var(--door-protruding-offset-x)),var(--door-protruding-offset-y))}.door-protruding{width:var(--door-protruding-width);height:var(--door-protruding-height);fill:transparent;stroke:#0000004d;&.y2{transform:translateY(calc(var(--door-protruding-height) + var(--door-protruding-offset-y)))}&.y3{transform:translateY(calc((var(--door-protruding-height) + var(--door-protruding-offset-y)) * 2))}&.y4{transform:translateY(calc((var(--door-protruding-height) + var(--door-protruding-offset-y)) * 3))}&.y5{transform:translateY(calc((var(--door-protruding-height) + var(--door-protruding-offset-y)) * 4))}}}.door-style-2{--door-window-width: 8px;--door-window-height: 2px;--door-window-spacing-y: 4px;.door-windows{transform:translate(calc((var(--door-width) - var(--door-window-width)) / 2),10px)}.door-window{fill:#313548;stroke:#fff3;stroke-width:1;width:var(--door-window-width);height:var(--door-window-height);&.y2{transform:translateY(calc(var(--door-window-height) + var(--door-window-spacing-y)))}&.y3{transform:translateY(calc((var(--door-window-height) + var(--door-window-spacing-y)) * 2))}}}.brick-0{fill:#805841;stroke:#5d3e2e;stroke-width:.5;filter:brightness(.97)}.brick-1{fill:#8a5d46;stroke:#624330;stroke-width:.5;filter:brightness(1)}.brick-2{fill:#6f4a37;stroke:#4b3225;stroke-width:.6;opacity:.92}.shingle{fill:#c66d4b;stroke:#85462f}.stucco{stroke:#000;stroke-linecap:round;&.stucco-0{stroke-width:.5;stroke-opacity:.3}&.stucco-1{stroke-width:.5;stroke-opacity:.2}}.raufaser{fill:#000;opacity:.09}