Template:ArmCharsheet

root {

 --main-line-color: hsl(234, 62%, 86%);
 --side-line-color: hsl(350, 100%, 91%);
 --paper-color: hsl(0, 15%, 95%);
 --ink-color: hsl(0, 0%, 12%);
 --line-thickness: 3px;
 --top-space: 3lh;

}

.lpaper {

 background: var(--paper-color);
 margin: 2rem;
 padding: calc(var(--top-space) - 0.5lh) 3rem 1rem 5.5rem;
 font-family: system-ui;
 font-size: 1.5rem;
 line-height: 1.4;
 color: var(--ink-color);
 background-image: 
   /* the red line */ linear-gradient(
     90deg,
     transparent,
     transparent 4rem,
     var(--side-line-color) 4rem,
     var(--side-line-color) 4.25rem,
     transparent 4.25rem
   ),
   /*  The top space  */
     linear-gradient(
       var(--paper-color),
       var(--paper-color) var(--top-space),
       transparent var(--top-space)
     ),
   /* the blue lines */
     repeating-linear-gradient(
       transparent,
       transparent calc(1lh - var(--line-thickness)),
       var(--main-line-color) calc(1lh - var(--line-thickness)),
       var(--main-line-color) 1lh,
       transparent 1lh
     );
 box-shadow: 0 0 1rem rgb(0 0 0 / 0.25);

}

.paper {

 background-color: #eee;
 /* Need position to allow stacking of pseudo-elements */
 position: relative;
 /* Padding for demo purposes */
 padding: 30px;
 box-shadow: 2px 1px 1px 1px rgba(0,0,0,0.15);

}

.paper, .paper::before,

.paper::after {

 /* Add shadow to distinguish sheets from one another */
 box-shadow: 2px 1px 1px 1px rgba(0,0,0,0.15);

}

.paper::before, .paper::after {

 content: "";
 position: absolute;
 width: 100%;
 height: 100%;
 background-color: #eee;

}

/* Second sheet of paper */ .paper::before {

 left: 7px;
 top: 5px;
 z-index: -1;

}

/* Third sheet of paper */ .paper::after {

 left: 12px;
 top: 10px;
 z-index: -2;

}

.box{

 margin:25px;
 width:250px;
 height:250px;
 background:#fff;
 border: solid black;
 border-color: black;
 float:left;

}

.box1{

 border-width: 3px 4px 3px 5px;
 border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
 transform: rotate(2deg);

} .box2{

 width:350px;
 border-width: 3px 3px 5px 5px;
 border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
 transform: rotate(-1deg);

}

.box3{

 border: solid brown;
 border-color: brown;
 padding: 30px;
 border-width: 5px 3px 3px 5px;
 border-radius:95% 4% 97% 5%/4% 94% 3% 95%;
 transform: rotate(.1deg);

}

.oddboxinner{

 margin:15px;
 transform: rotate(-2deg);

} .evenboxinner{

 transform: rotate(2deg);
 margin:15px;
 padding:0 5px;
 float:right;
 background:#ddd;
 border:1px solid #222;
 box-shadow:3px 3px 0 #222;

}

}}