.iphoneheader {
width: 100%; height: 130px; margin-top: 10px; margin-left: auto; margin-right: auto; margin-bottom: 2px; background-image: url(https://smoke-rpg.de/extern/extern/letter3.jpg); background-size: 800px;
border-bottom: #cccccc dashed 1px; border-radius: 3px 15px 5px 30px; }

.iphone {
border-radius: 100px;overflow:hidden;
}
		

----------------------------------- by VIETTLEY @ STORMING GATES

.lee-letter-wrapper { --llw-col-letter-bg: #eee3d5;/* Farbe: Briefpapier
--llw-col-letter-deco: #b3a088;/* Farbe: Rahmen
--llw-col-text: #423a2e;/* Farbe: Schrift
--llw-col-envelope-one: #859f75;/* Farbe: Umschlag
--llw-col-envelope-two: #9fb694;/* Farbe: Umschlag, hell
--llw-col-envelope-three: #6f8560;/* Farbe: Umschlag, dunkel
--llw-font-main: "Pompiere", sans-serif;/* Schriftart: Haupttext
--llw-font-sig: "Herr Von Muellerhoff", cursive;/* Schriftart: Unterschrift }

-------------- #1 - ALLGEMEINES

.lee-letter-wrapper { 
width: 500px; 
margin: auto; 
box-sizing: 
border-box; 
text-align: justify; 
font-family: var(--llw-font-main); 
font-size: 18px; 
line-height: normal; 
color: var(--llw-col-text); } 

.lee-letter-wrapper * { 
box-sizing: border-box; 
}/*

.lee-letter-wrapper *::selection { 
background: rgba(66, 58, 46, 0.1); 
}

-------------- #2 - UMSCHLAG

.llw-envelope { width: 540px; height: 370px; margin: 100px 0 0 20px; background: var(--llw-col-envelope-one); position: relative; z-index: 5; transform: rotate(20deg); overflow: hidden; transition: 1s; }

.llw-envelope::before, .llw-envelope::after { content: ""; width: 540px; height: 540px; border-radius: 0 0 20px 0; position: absolute; transform: rotate(45deg); }

.llw-envelope::before { margin-top: 210px; background: var(--llw-col-envelope-three); }

.llw-envelope::after { margin-top: -350px; background: var(--llw-col-envelope-two); }

.llw-envelope:hover { transition: 1s; transform: rotate(5deg); }

-------------- #3 - BRIEF

.llw-letter { width: 500px; padding: 20px; margin-top: -290px; background: var(--llw-col-letter-bg); box-shadow: 2px 3px 5px rgba(0,0,0,0.1); position: relative; z-index: 10; }

.llw-l-top, .llw-l-bot { width: 100%; position: relative; }

.llw-l-top::before, .llw-l-top::after, .llw-l-bot::before, .llw-l-bot::after { content: ""; width: 200px; height: 200px; position: absolute; background: url(https://i.ibb.co/fFDdFv8/border-brown.png); background-size: cover; opacity: 0.4; }

.llw-l-top::after { right: 0; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }

.llw-l-bot::before { bottom: 0; -moz-transform: scaleY(-1); -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV"; }

.llw-l-bot::after { right: 0; bottom: 0; -moz-transform: scaleX(-1) scaleY(-1); -o-transform: scaleX(-1) scaleY(-1); -webkit-transform: scaleX(-1) scaleY(-1); transform: scaleX(-1) scaleY(-1); filter: FlipH FlipV; -ms-filter: "FlipH" "FlipV"; }

----------------- #3.1 - TEXT

.llw-l-text { padding: 70px; }

.llw-text { padding-top: 5px; line-height: 31px; position: relative; background-color: var(--llw-col-letter-bg); background-size: 31px 31px; background-image: repeating-linear-gradient( 0deg, var(--llw-col-letter-deco), var(--llw-col-letter-deco) 1.2px, var(--llw-col-letter-bg) 1.2px, var(--llw-col-letter-bg) ); }

.llw-text name { font-family: var(--llw-font-sig); font-size: 40px; }