*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}
body{
  background-color: #cccccc;
  text-align:center;
}
#card{
  background-color:#ffffff;
  width: 380px;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 30px;
}
img{
  width: 80%;
  margin: 0 auto;
  margin-top: 17px;
}
header img{
  width: 240px;
  margin-top: 20px;
  text-align: center;
}
header{
  background-color: #bababa; 
  width: 100%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 5px;
  text-align: center;
  margin: 0 auto;
}
footer h1,h2{
  padding: 20px;
}
a{
  text-decoration: none;
  color: #000;
}
img{border-radius: 8px;}
#separator{
  padding: 20px;
  border-bottom: 2px solid #e0e0e0;
  margin: 20px auto;
}
table {
  width: 99%;
  border-collapse: collapse;
  margin-top: 0 auto;
}
th, td {
  text-align: center;
  padding: 15px;
  margin: 0 auto;
}
th {
  background-color: #f2f2f2;
}
button {
  background-color: white;
  border-radius: 30px;
  padding: 6px 45px;
  font-family: serif;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  margin-top: 20px;
  border: rgb(128, 128, 128, 0.5);
}
iframe{
  width: 310px;
  height: 174px;
}
button:hover { background: #f2f2f2;}
@media(max-width: 600px){
  body{
    background-color: #bababa;
    text-align:center;
  }
  #card {
    width: 100%;
    margin-top: 0px;
    border-radius: 0px;
    margin-bottom: 0px;
  }
  header,img {
    width: 100%;
  }
  header{background-color: #bababa; width: 100%;border-top-left-radius: 0px;border-top-right-radius: 0px;  text-align: center; margin: 0 auto;}
  img{
    width:80%;
  }
  button:hover { background: #ffffff;}
  th, td {
    text-align: center;
    padding: 20px;
    margin: 0;
  }
  iframe{
    width: 320px;
    height: 181px;
  }
  button {
    background-color: white;
    border-radius: 30px;
    padding: 6px 50px;
    font-family: serif;
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    margin-top: 20px;
  }
}