body{
  margin-left: auto;
  margin-right: auto;
  color: #787878;
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
}

/*very fundamental, forms container of every component*/
.main {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  max-width: 750px;
  margin-top: 30px;
  margin-bottom: 30px;
}

h1{
    font-family: 'Nunito', sans-serif;
    text-align: center;
    font-size:16px;
    font-weight: bold;
    color: #7E42B6;
}

h2{
    font-family: 'Nunito', sans-serif;
    color: #787878;
    font-size:18px;
    font-weight: 700;
}

h3{
    font-family: 'Nunito', sans-serif;
    text-align: center;
    font-size:12px;
    color: #2A4354;
}

h4{
    font-family: 'Nunito', sans-serif;
    border-bottom: 1px solid #A1AFF0;
    color: #A1AFF0;
    font-size: 18px;
}

h5{
    font-family: 'Nunito', sans-serif;
}

h6 {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: #9A989A;
}

p{
  font-size: 15px;
  margin-bottom: 10px;
  color: #2A4354;
}

li{
  list-style-type: none;
  margin-bottom: 10px;
}

ul{
  list-style-type: none;
  margin-left: 0;
}

a{
  font-weight: bold;
}

.naf{
  float: right;
}

.float{
  float: right;
}

.form {
  width: 80%;
  max-width: 550px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

/* header and footer */
.solid{
  background-color: #E8E8F0;
  padding: 30px;
  margin-bottom: 15px;
}

option{
  font-family: 'Nunito', sans-serif;
}

/* used in form labels*/
.olive{
  text-align: left;
  padding-left: 8px;
  color: #A1AFF0
  text-transform: uppercase;
  font-size: 12px;
  border: 0px solid #A1AFF0;
}

/* makes question buttons responsive */
.question-wrapper{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/*don't think i need this?*/
/* .uppercase{ */
/*   text-align: left; */
/*   color: #A1AFF0; */
/*   text-transform: uppercase; */
/*   font-size: 12px; */
/*   border-bottom: 0px solid #A1AFF0; */
/* } */

/*form stuff*/
.input{
  border-top-style: hidden;
  border-right-style: hidden;
  border-left-style: hidden;
  border-bottom-style: solid;
  border-color: #A1AFF0;
  padding-top: 0px;
  box-shadow: none;
}

/*used in form*/
.grey{
  color: #787878;
}

.button{
  background-color: #9B51E0;
  margin-top: 15px;
  border: 0px #6922AB solid;
  box-shadow: 0px 3px 0px #6922AB;
  border-radius: 3px;
}

.button:hover{
    background-color: #482567;
}

.close-button{
  background-color: #ffffff;
}

button{
  margin-left: auto;
  margin-right: auto;
  background-color: #7E42B6;
  margin-top: 15px;
  border: 0px #6922AB solid;
  box-shadow: 0px 3px 0px #6922AB;
  border-radius: 3px;
}


.static-body {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  max-width: 550px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.header {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  max-width: 550px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.infoCard{
  background-color: white;
  padding: 6% 8% 3% 8%;
  margin: 15px;
}

.info{
  margin-top: 400px;
}

#template-target{
  background-color: lightgray;
}

.footer {
  background-color: gray;
  padding: 2rem 4rem;
  text-align: center;
  color: #fff;
  background: #878787;
}

.infoFeedback{
  visibility: hidden;
  height: 0px;
  margin-left: auto;
  margin-right: auto;
  background-color: #f1f1f1;
}

.inaa{
  margin-top: 9%;
  font-family: 'Poiret One', sans-serif;;
}

#button{
  margin-bottom: 50px;
}

.padding{
  height: 30px;
}

.hide{
  font-size: 3px;
  color: white;
}

.alert{
  color: #A1AFF0;
}

.logo{
  max-width: 75px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px
}

.reveal{
  width: 80%;
  padding: 6% 5%
}

@media (max-width: 600px) {

  .reveal{
    width: 80%;
    min-width:400px;
    padding: 15% 11%
  }

}


.modal-open {
  overflow: hidden;
}