Whiteboard design with CSS

HTML

<section class="demo-section">

 <div class="demo-whiteboard-wrap"> 
  <div class="demo-whiteboard-container">
   <div class="demo-whiteboard-header"></div>
    <div class="demo-whiteboard-content">
<div class="demo-content-title">Lesson 1: Walk your own path</div>
<div class="demo-content-body">
<p>People like to judge other people. This peer pressure can make you stray from the path you started to carve for your future. Don’t mind other people’s aspirations, don’t ever let someone else’s goals and dreams influence your vision of life. It’s your path and you decide where it takes you and how long it takes you to see it through.</p>
<p class="demo-quote-author">Joseph Nazoa</p>
</div>
    <div style="padding-top: 2.5em"></div>
   </div>
  <div class="demo-whiteboard-footer"></div>
 </div>
</div>

</section>

CSS

@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');

.demo-section {
background-image: url("bg-wall.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
padding: 2em 4em 6.9em 4em; 
}

.demo-whiteboard-wrap {
margin: 0 auto;
max-width: 940px;
padding: 20px;
border-radius: 20px;
background-color: rgba(255,255,255,0.60);
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.demo-whiteboard-container {
position: relative;
border-radius: 5px;
border: 14px solid #c8c9ca;
box-shadow: 0 0 0 1px #ffffff, 0 0 0 14px #babcbd, inset -1px 2px 2px #edeff0, 0px 5px 15px rgba(0, 0, 0, 0.35);
overflow: hidden;
background: #FFFFFF;
background: radial-gradient(at left top, #FFFFFF, #FDFCFC);
}

.demo-whiteboard-header {
height: 50px;
background-image: url("magnet-buttons.png");
background-repeat: no-repeat;
background-position: bottom right;
margin-right: 10px;
}

.demo-whiteboard-footer {
position: absolute;
width: 100%;
bottom: 0px;
height: 36px;
background-image: url("marker-and-eraser.png");
background-repeat: no-repeat;
background-position: center;
background-size: 300px 36px;
}

.demo-whiteboard-content {
padding: 1em 2em;
font-family: 'Gochi Hand', cursive;
font-size: 1.4vw;
line-height: 1.5vw;
color: #3a4ba1; 
}

.demo-content-title {
border-bottom: 1px dashed #CCCCCC;
padding-bottom: 2px;
margin-bottom: 1em;
}

.demo-quote-author {
text-align: right;
}

@media only screen and (max-width: 798px) {
.demo-whiteboard-content {
font-size: 16px !important;
line-height: 16px;
}
}