/* Styling the Body element i.e. Color,
Font, Alignment */
* {
box-sizing: border-box;
}

html, body {
background-size: 100% auto;
margin: 0;
padding: 0;
}

body {
/* background-color: whitesmoke; */
font-family: Helvetica;
text-align: center;
background: linear-gradient(#141e30, #243b55);
}

/*--------------------Navigation Menu---------------------*/
/* Add a black background color to the top navigation */
.topnav {
  background: rgba(0, 0, 0, 0.8);
  height: 44px;
  z-index: 300;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 15px;
  opacity: 0.8;
}

/* Change the color of links on hover */
.topnav a:hover {
  opacity: 1;
}

input,
div,
span,
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*---------------------End Nav Bar-------------------------*/

/* Container holding the image and the text */
.headcontainer img {
position: relative;
display: inline-block;
opacity: 2;
margin-left: 0%;
max-width: 100%;
max-height: 700px;
width: "device-width";
top: -13px;
}

/* Centered text */
.centered {
width: 100%;
position: absolute;
text-align: center;
color: black;
font-size: 50px;
font-weight: 500;
top: 11%;
left: 50%;
transform: translate(-50%, -20%);
}

#outside {
background: linear-gradient(#141e30, grey);;
padding-top: 25px;
padding-bottom: 25px;
}

h1 {
font-size: 48px;
text-align: center;
text-transform: capitalize;
font-weight: 500;
}

.legend2{
  color: white;
  padding: 22px;
  font-size: 40px;
}

form {
/* Just to center the form on the page */
margin: 0 auto;
width: 82%;
/* To see the limits of the form */
padding: 1em;
border: 1px solid black;
border-radius: 1em;
}

#survey-form {
background-color: white;
}

fieldset {
border: 1px solid white;
margin: 30px;
padding-bottom: 12px;
}

legend {
font-weight: 500;
font-size: 1.5em;
}

#number {
width: 150px;
}


div + div {
margin-top: 1em;
}

/* label {
/* To make sure that all label have the same size and are properly align */
/* display: inline-block; */
/* width: 80px; */
/* text-align: right; }*/

input, textarea {
/* To make sure that all text field have the same font settings
  By default, textarea are set with a monospace font */
/* font: 1em sans-serif; */

/* To give the same size to all text field */
width: 200px;
border-radius: 8px;

/*   -moz-box-sizing: border-box;
    box-sizing: border-box; */

/* To harmonize the look & feel of text field border */
border: 1px solid #999;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

}

input:focus, textarea:focus {
/* To give a little highligh on active elements */
border-color: #0071e3;
}

textarea {
/* To properly align multiline text field with their label */
vertical-align: top;

/* To give enough room to type some text */
height: 5em;
width: 40em;

/* To allow users to resize any textarea vertically
  It works only on Chrome, Firefox and Safari */
resize: vertical;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 80%;
}

.vol-radio{
  width: 2%;
  margin-left: auto;
  margin-right: auto;
}

.volunteered {
  float: center;
  clear: none;
  display: inline;
  padding: auto;
}


.button {
/* To position the buttons to the same position of the text fields */
padding-left: 90px; /* same size as the label elements */
}

button {
cursor: pointer;
white-space: nowrap;
margin: .5em;
font-size: 1em;
text-transform: capitalize;
background-color: #0071e3;
color: white;
border: none;
padding: 5px;
border-radius: 8px;
padding: 8px 16px;
}

#submitbutton {
display: flex;
justify-content: center;
}

.form-group {
  display: inline-block;
  text-align: center;
  position: relative;

}

.dropdown{
  margin:0;
  padding:0;
  width: 200px;
  text-align: center;
}

.page2form {
  padding: 10px 10px;
}

.test-title {
  color: white;
}

.warning {
  color: lightcoral;
}

.text-box {
  padding: 8px 8px;
}

.text-box-conditional {
  display: none;
  text-align: center;
}

p {
  padding: 5px 5px;
}

li {
  padding: 2px 1px;
}