عدم اعمال 100vh در(.menu) و یکدست نشدن بک گراند

<!DOCTYPE html>
<html dir="rtl" lang="fa">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>پروژه03</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0"
    />
    <link rel="stylesheet" href="/assets/css/style.css" />
  </head>
  <style>
    body,html {
      margin: 0;
      padding: 0;
      background-color: blue;
      overflow: hidden;
    }
    input {
      display: none;
    }
    .burger,
    .close {
      position: absolute;
      top: 20px;
      font-size: 60px;
      color: #fff;
      cursor: pointer;
    }
    .burger {
      left: 30px;
    }
    .close {
      opacity: 0;
    }
    input:checked ~ label .burger {
      opacity: 0;
    }
    input:checked ~ label .close {
      opacity: 1;
    }
    .main ul {
      opacity: 0;
    }
    .main  {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      text-align: center;
      transition: all .5s ease;
    }
    input:checked ~ .main ul {
      opacity: 1;
    }
    input:checked ~ .main {
      background-color: rgb(243, 77, 31);
    }
    input:checked ~ .course  {
      opacity: 0;
    }
.course{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100px;
  margin: auto;
  width: 450px;
  color: #fff;
  font-size: 40px;
}
    .main ul {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      margin: 100px auto;
      text-align: center;
    }
    ul li {
      color: #fff;
      list-style: none;
      margin-bottom: 50px;
      font-size: 30px;
    }
    ul li a {
      color: #fff;
    }
  </style>
  <body>
    <input type="checkbox" id="test" />
    <label for="test">
      <span class="burger material-symbols-outlined"> menu </span>
      <span class="close material-symbols-outlined"> close </span>
    </label>
    <div class="main">
      <ul>
        <li><a href="#">خانه</a></li>
        <li><a href="#">مطالب</a></li>
        <li><a href="#">تماس با ما</a></li>
        <li><a href="#">درباره ما</a></li>
      </ul>
    </div>
    <span class="course">دوره تخصصی طراحی وب </span>
  </body>
</html>

body, html { margin: 0; padding: 0; background-color: blue; overflow: hidden; } input { display: none; } .burger, .close { position: absolute; top: 20px; font-size: 60px; color: #fff; cursor: pointer; z-index: 10; } .burger { left: 30px; } .close { opacity: 0; } input:checked ~ label .burger { opacity: 0; } input:checked ~ label .close { opacity: 1; } .main ul { opacity: 0; } .main { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 100vh; text-align: center; transition: all 0.5s ease; } input:checked ~ .main ul { opacity: 1; } input:checked ~ .main { background-color: rgb(243, 77, 31); } input:checked ~ .course { opacity: 0; } .course { position: absolute; top: 0; bottom: 0; right: 0; left: 0; height: 100px; margin: auto; width: 450px; color: #fff; font-size: 40px; } .main ul { display: flex; justify-content: space-between; align-items: center; flex-direction: column; margin: 100px auto; text-align: center; } ul li { color: #fff; list-style: none; margin-bottom: 50px; font-size: 30px; } ul li a { color: #fff; }