Typography and Codes

<style>
  /* Quiz */
.quiz-con,.quiz-options label{display:block;position:relative;border-radius:10px}
.quiz-con{width:100%;background:var(--post-card-bg);box-shadow:0 10px 40px rgba(149,157,165,.2);padding:0 0 10px;margin:25px 0 25px 0;min-height: 80px}
.Result-Container{position:relative;padding:10px 15px;margin:20px auto;width:100%;background-color:#fff;box-shadow:0 2px 15px -2px rgb(0 0 0 / 12%);border-radius:3px}.option-point{background: var(--linkB);padding:5px 12px;color:#fff;border-radius:8px;margin:0 10px 0 0}.quiz-options{margin:5px 0 15px}.Result-Container div{text-align:center;font-size:16px}.Result-Container p{font-size:15px;margin:0 auto}.Result-Container p:last-child{font-size:13px;line-height:1.5em;margin-top:15px;font-style:italic;opacity:.8;margin:0:}
.quiz-options label{background:var(--post-card-bg);padding:5px;margin-bottom:2px;cursor:pointer;font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;word-wrap:break-word}
.quiz-container-section input{display:none;border:2px solid #fff;box-shadow:0 0 0 1px var(--buttonBg);appearance:none;border-radius:50%;width:12px;height:12px;background-color:#fff;transition:.2s ease-in;margin-right:10px}.quiz-container-section input:checked{background-color:var(--buttonBg)}.quiz-options label:hover{background-color:#ddd}.qus-no-field{position:absolute;top:0;right:0;min-width:40px;color:#fff;background: var(--linkB);border-radius:0 20px;padding:0 13px;opacity:.6}.explaination-table{background:#a0e8ff;border-color:#030;width:95%;margin:0 0 35px;border-radius:10px;padding:10px}.correct-answer,.correct-tag-text{color:green;font-weight:700}.wrong-answer,.wrong-tag-text{color:red;font-weight:700}.not-answered-tag-text{color:#00f;font-weight:700}.quiz-container-section svg {height: auto;width: auto;}

  </style>


<div class="quiz-container-section" data-quis="auto">
<!--Enter your Quiz-->



<!--<form><div class="quiz-con"><span class="qus-no-field"></span><div class="quiz-bar">
        
    </div></div><div class="quiz-options">
    <label><span class="option-point">A</span><input type="radio" name="radio" value="flase"/></label>
    <label><span class="option-point">B</span><input type="radio" name="radio" value="false"/></label>
    <label><span class="option-point">C</span><input type="radio" name="radio" value="flase"/></label>
    <label><span class="option-point">D</span><input type="radio" name="radio" value="false"/></label></div>
<div class="explaination-table note" id="explain-tab" hidden><span id="explainresult"></span>
<div>   </div> 
</div></form>-->  
</div>

<div class="submit-button" style="display: blank; text-align: center;"><button class="button" id="quiz-submit-button">Submit</button></div>
<!--[Final Visible Result]-->
<div class="Result-Container hidden"><div role="region" tabindex="0"><table><caption>Congratulations, You have completed this quiz.</caption><thead><tr><th>Mark</th><th><span id="result-percentage-mark"></span></th></tr></thead><tbody><tr><td>Total Questions</td><td><span id="total-questions"></span></td></tr><tr><td>Answered</td><td><span id="result-answered-Questions"></span></td></tr><tr><td>Not answered</td><td><span id="result-not-answered-Questions"></span></td></tr><tr><td>Correct answers</td><td> <span id="result-correct-result"></span></td></tr><tr>
<td>Wrong answers</td><td><span id="result-wrong-answer"></span></td></tr></tbody><tbody></tbody></table></div><p>Practice makes perfect so try again and again for increase in knowledge..!<a class="button" href="javascript:;" id="Reset-Quiz">try again</a></p><div id="Guideraw-credits"><p>HTML Quiz made by <a href="https://guideraw.blogspot.com" id="Guideraw-credit-link" rel="dofollow">GuideRaw</a></p></div></div> 
  
<script src="https://cdn.jsdelivr.net/gh/Shivanode2001/project-quiz@79e6d60c385e673210a5ea153b852458a6b5e310/app-quiz-js-guideflare.js"></script>