Scroll bar missing from my Survey Form

Hi coders. I’m currently working on building the Survey Form but as I am going through the code I realised the scroll bar is missing causing some of the content to be unreadable. Could someone help please?

HTML code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
      <header class="header">
      <h1 id="title">Survey Form</h1>
      <p id="description">We require all users to complete this Survey Form in order for us to get better</p>
      </header>
      <form id="survey-form" />
      <fieldset>
        <label id="name-label" for="name">Name<input id="name" name="name" type="text" placeholder ="Enter your full name" required /></label>
        <label id="email-label" for ="email">Email<input id="email"
        name="email" type="email"  placeholder ="Enter your email address" required /></label>
        <label id="number-label" for="number">Age<input id="number" name="phone-number" type="number", min="18" max="65" placeholder="Age" required /></label>
        </fieldset>
        <fieldset>
                <h4>How did you heard of cryptocurencies?</h4>
            <select id="dropdown" name="dropdown">
            <option value="">(please select one of the following options)</option>
            <option value="1">A friend</option>
            <option value="2">Internet adverts</option>
            <option value="3">Other</option>
            </select>
            </fieldset>
            <fieldset>
            <h4>How would you best describe yourself as?</h4>
            <label for="trader">
              <input id="trader" name="user-type" type="radio" value="Radio" class="inline" checked />Trader</label>
              <label for="investor">
            <input id ="investor"name="user-type" type="radio" value="Radio" class="inline" />Investor</label>
            <label for="both">
            <input id="both" name="user-type" type="radio" value="Radio" class="inline" />Both</label>
            <label for="none-of-the-above">
            <input id="none-of-the-above" name="user-type" type="radio" value="Radio" class="inline" />None of the above</label>
            <h4>What is the primary coin you are investing/trading?</h4>
            <label for="etherum">
              <input id="etherum" name="primary-coin" type="radio" value="Radio" class="inline" checked />Etherum</label>
              <label for="bitcoin">
              <input id="bitcoin" name="primary-coin" type="radio" value="Radio" class="inline" />Bitcoin</label>
              <label for="other">
              <input id="other" name="primary-coin" type="radio" value="Radio" class="inline" />Other</label>
              <textarea></textarea>
            <input name="checkbox" type="checkbox" value="Checkbox" />
            <input name="checkbox" type="checkbox" value="Checkbox" />
            <input id="submit" type="submit" />
              </fieldset>
            </body>

CSS:

body {
  width: 100%;
  height: 100%;
  position:fixed;
  background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) ), url(https://www.colorado.edu/ecenter/sites/default/files/styles/medium/public/article-thumbnail/cryptocurrency.png?itok=HHvIzV6z);
  background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  color: #f5f6f7;
  font-family: ComicSans;
  font-size: 16px;
}

form {
  background-color: rgba(28, 19, 76, 0.8);
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

header {
  margin: 0.5em auto;
  text-align: center;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea, select {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

One way to debug your code is to comment out the css code till you find the line that is causing the issue. I suggest you try this.

Not sure how the comment will help me figure this out?

For eg: maybe you think the problem is somewhere in the body properties but you are not sure so you can comment out the whole selector like this

/*
body {
  width: 100%;
  height: 100%;
  position:fixed;
  background-image: linear-gradient( 115deg, rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7) ), url(https://www.colorado.edu/ecenter/sites/default/files/styles/medium/public/article-thumbnail/cryptocurrency.png?itok=HHvIzV6z);
  background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  color: #f5f6f7;
  font-family: ComicSans;
  font-size: 16px;
}
*/

And see if the scroll bar returns.
If it does, you can comment out less of the body properties till you narrow down which line is the cause.
If commenting out this selector does nothing then you can comment out some other ones. Basically it is a method you can use to find the area of concern.

I’ve tried it but the problem was in fact in the CSS. Had to create another element selector as I’ve had an image overlapping with the body content. Thank you anyway!

body::before 

what@hbar1st mean is use of Comment method as a trick, for general inspection to find where our code is broken or from which line of code caausing particular problem.

Plus, your body shouldnt have a position of fixed