<div></div>
:root {
  --size: 200px;
  --width: var(--size);
  --height: calc(var(--size) * 1.5);
  --bg0: #cc9966;
  --bg1: #f0dfd3;
  --bg2: #e6c4c0;
  --frame1: #6e522b;
  --frame2: #584738;
  --frame3: #5c4524;
  --frame4: #372915;
  --frame5: #463b2e;
  --blind1: #fff;
  --blind2: #ddd;
  --blind3: #888;
  --blind-handle: #000;
  --blind-string: #fff;
  --paper-bg: #f6f9fc;
  --paper-line: #9facb1;
  --paper1: #9facd1;
  --paper2: #9fdcb1;
  --paper3: #e7ece4;
  --paper4: #dfccb1;
  --paper5: #efacb1;
  --shadow: rgba(0, 0, 0, 0.4);
  --highlight: #00f3;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg0);
  background-image:
    radial-gradient(circle at 40px 55px, transparent 0 10px, var(--paper1) 0 12px, transparent 0 15px, var(--paper2) 0 17px, transparent 0),
    radial-gradient(circle at 13px 55px, transparent 0 5px, var(--paper4) 0 7px, transparent 0),
    radial-gradient(circle at 67px 55px, transparent 0 5px, var(--paper4) 0 7px, transparent 0),
    radial-gradient(circle at 1px 55px, transparent 0 3px, var(--paper5) 0 5px, transparent 0),
    radial-gradient(circle at 79px 55px, transparent 0 3px, var(--paper5) 0 5px, transparent 0),
    linear-gradient(transparent 30px, var(--paper-bg) 0 32px, var(--paper-line) 0 34px, var(--paper-bg) 0 76px, var(--paper-line) 0 78px, var(--paper-bg) 0 80px, transparent 0),
    linear-gradient(transparent 0 calc(50% + 130px), var(--frame5) 0 calc(50% + 150px), var(--bg0) 0),
    linear-gradient(to right, var(--bg1) 50%, var(--bg2) 0);
  background-size: 80px 100px, 80px 100px, 80px 100px, 80px 100px, 80px 100px, 100px 100%, 100px 100%, 100px 100%;
  background-position: center top, center top, center top, center top, center top, center center, center center, center center;
  background-repeat: repeat-x;
  overflow: hidden;
}

div {
  position: absolute;
  display: block;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  width: 200px;
  height: 300px;
  min-height: 300px;
  max-height: 450px;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -150px;
  resize: vertical;
  overflow: auto;
  outline: none;
  background-image: 
    linear-gradient(var(--frame1) 10px, transparent 0 180px, var(--frame1) 0 200px, transparent 0 275px, var(--frame1) 0 290px, var(--frame4) 0 291px, var(--frame2) 0 300px, transparent 0),
    linear-gradient(to right, var(--frame1) 12px, transparent 0 188px, var(--frame1) 0),
    linear-gradient(135deg, transparent 10%, white 0 15%, transparent 0 20%, white 0 35%, transparent 0),
    linear-gradient(var(--paper3), var(--paper3));
  background-repeat: no-repeat;
  background-size: 200px 300px;
  cursor: default;
  box-shadow: 
    -100px 300px var(--bg0),
    100px 300px var(--bg0),
    -30px 291px var(--frame3),
    -25px 290px var(--shadow),
    30px 291px var(--frame3),
    25px 290px var(--shadow),
    -1px 0 3px var(--shadow),
    1px 0 3px var(--shadow),
    12px 12px 0 12px var(--frame3),
    -12px 12px 0 12px var(--frame3),
    /* -60px 280px var(--frame5),
    60px 280px var(--frame5), */
    -10px 30px 0 30px var(--bg1),
    10px 30px 0 30px var(--bg2),
    0px 29px 0 30px var(--shadow),
    0px -5px 0 30px var(--frame3);
}

div::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(transparent, transparent),
    linear-gradient(var(--blind-handle), var(--blind-handle)),
    linear-gradient(var(--blind-handle), var(--blind-handle)),
    linear-gradient(to right, transparent 184px, white 0 187px, transparent 0),
    linear-gradient(to right, transparent 193px, white 0 196px, transparent 0);
  background-size: 50px 50px, 10px 15px, 10px 15px, 200px 250px, 100% 100%;
  background-position: bottom right, 181px 250px, bottom right, top left, top left;
  background-repeat: no-repeat;
  filter: drop-shadow(-1px -1px 3px);
}

div::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background-image:
    repeating-linear-gradient(var(--blind1) 0 2%, var(--blind2) 6.5%, var(--blind3) 0 6.666%);
  background-size: 196px clamp(30px, calc(900px - 200%), 290px);
  background-position: 2px 0;
  background-repeat: no-repeat;
}

div:hover::after {
  background-image:
    linear-gradient(var(--highlight), var(--highlight)),
    linear-gradient(var(--blind-handle), var(--blind-handle)),
    linear-gradient(var(--blind-handle), var(--blind-handle)),
    linear-gradient(to right, transparent 184px, var(--blind-string) 0 187px, transparent 0),
    linear-gradient(to right, transparent 193px, var(--blind-string) 0 196px, transparent 0);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.