style.css

body {
  background: #f5f6f7;
  color: #1b1b32;
  font-family: Helvetica;
  
}

/* 
The logo will be at least 100px wide. 
But will grow with viewport.
And will 18% of VW, if VW greater than 1000px
*/

#logo {
    width: max(100px, 18vw);
    aspect-ratio: 35/4;
    padding: 0.4em;
    background-color: black;
  }

/* use *Flexbox* to put space between the children, and vertically center*/


header {
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    background-color: #1b1b32; 
    height: 50px;
    width: 100%;
    align-items : center;
    position: fixed;
    top:0;
  }

  main {  
    padding-top: 50px;
  }

h1 {
    color: #f1be32;
    font-size : min(5vw, 1.2em);
    text-align: center;
    
  }

  nav {
    width: 50%;
    max-width: 300px;
    height: 50px;
  }

nav > ul {
  display: flex;
  justify-content: space-evenly;
 
  flex-wrap: wrap;

  align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
} 


/*Change the font color of all the anchor elements within the list elements to a contrast ratio of at least 7:1 */
nav a {
  color: #fcfcfc;
  text-decoration: none;
}

nav li:hover {
  color: #1b1b32;
  background-color: #dfdfe2;
  cursor: pointer;
}


nav li {
  color: #dfdfe2;
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;
}


h1, h2 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

h2 {
  border-bottom: 4px solid   #dfdfe2;
  padding-top : 60px;
  margin-top : 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/*To prevent unnecessary repetition, target the before pseudo-element of the p element, and give it a content property of "Question #" */
p::before {
  content: "Question #";
}

section {
  width: max 80% ;
  max-width: 600px;
  margin: 0 0 10px 0;

}

.info {
padding : 50px 0 0 100px;

}


.formrow {
  margin-top : 100px ;
  padding : 0 100px 0 100px;
}

input  {
  font-size: 25px;
}

.info > input {
  width: 50%;
  text-align: left;
}


.info label {
  width: 10%;
  min-width: 55px;
  text-align : right;
}

.info input, .info label{
  display: inline-block;
}


.question-block {
  text-align: left;
  display: block;
  width: 100%;
  margin-top: 20px;
  padding-top: 5px;
 }

 /*Make the paragraph to stand out.*/
 p {
  margin-top: 5px;
  padding-left: 15px;
  font-size: 20px;
}

/*Remove the border and padding from the question class.*/
.question {
  border: 0px none;
  padding-bottom: 0px;
}



/*Remove the bullet styling for the items with the unordered list, and remove the unordered list padding.*/
.answers-list {
  list-style: none;
  padding : 0;
}

/*Give the `button` a freeCodeCamp-style design.*/
button {
  display: block;
  margin: 40px auto;
  width: 40%;
  padding: 15px;
  font-size: 23px;
  background: #d0d0d5;
  border: 3px solid #3b3b4f;
}