*{
  margin:0;
  padding: 0;
  box-sizing: border-box;

}

body{
  font-family: "Nunito",sans-serif;
  background: #f8f8f8;

}

.input{
  text-align: center;
  margin:  auto;
  color: rgba(43,128,185, 0.75);
 background-color: rgba(155, 155, 155, 0.8);
border-radius: 3px;

padding: 5px ;
width: 100%;

}

input[type="submit"]{
  padding:auto;
  background: #e7e7e7;
  border: none;
  border-radius: 5px;
  font-family: "Nunito",sans-serif;
  font-weight:bold;
  font-size: 15px;
background-color: rgba(155, 155, 155, 0.8);

 color: rgba(43,128,185, 0.75);
 margin: 5px ;


}
input[type="submit"]:hover{

color: rgba(43,128,185, 0.75);
 background: rgba(43,128,185, 0.75);
}
.input input[type="text"]:hover{
    background: rgba(43,128,185, 0.75);
    color: #e7e7e7;
}
.input input[type="text"]{
  width: auto;
  height:auto;
  padding: 5px 10px;
  background: #e7e7e7;
  border: none;
  border-radius: 1px;
  font-family: "Nunito",sans-serif;
  font-weight:bold;
  font-size: 20px;
background-color: rgba(155, 155, 155, 0.8);

}

.card{

  background: #e7e7e7;
  height: auto;
  margin: 5px auto;
  border-radius: 2px;

}


.close{
  float: right;
  margin-top: -2px;
  cursor: pointer;
  margin-right: 20px;
}

.card h1{
  padding: 5px 0;
  text-align: center;
   color: rgba(43,128,185, 0.75);
}

.card p{
  text-align: center;
  margin:4px 0;
  font-size:20px;
   color: rgba(43,128,185, 0.75);

}

.container {
width:auto;
height: auto;
padding:  5px 5px 5px;
}

i.wi {
  font-size: 3em;
  line-height: 1rem;
  display: inline;


}
#app {
    display: flex-block;
    width: auto;
    height: auto;
    flex-vrap: wrap;
     background-color: rgba(43,128,185, 0.75);
     font-size: 10px;
     padding: auto;

}
#app a{
color: rgba(155, 155, 155, 0.8);
}

.parag{
text-shadow: 10px 10px 5px black;

}

.major{
text-shadow: 10px 10px 5px black;
}