HTML/CSS - Radius Problem Solver Online Editor and JavaScript Compiler

html

<!-- 
  Created by Harman Maan
  GitHub - https://github.com/Harman-Maan
  SoloLearn -https://www.sololearn.com/profile/19508177
  Email - maansaab95170@gamail.com
 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
      integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Circle Formula</title>
  </head>
  <body>
    <nav class="navbar">
      <h2>MAAN</h2>
      <ul class="contact">
        <li class="nav-item">

css

/*  
  Created by Harman Maan
  GitHub - https://github.com/Harman-Maan
  SoloLearn -https://www.sololearn.com/profile/19508177
  Email - maansaab95170@gamail.com
  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
  background: linear-gradient(to left top,  #383838b3,  #000000bd);
  color:  #fff;
}
.navbar {
  position: relative;
  width: 100%;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;

BROWSER

Console