body, html{
margin: 4px;
padding: 0px;
box-sizing: border-box;
 /* background-image: url("Black Femicde 2.jpg");
  background-repeat: no-repeat;
  background-size:100% ; */
  background-color: black;

}

  
h2,h3,h4,h5{
  font-size: 30px;   
  color: white;
  text-align: center;
margin: 4px;

}



h1{
  font-size: 60px;   
  color: white;
  text-align: center;
margin: 4px;

}

p1,p2{
  text-align: center;
  font-size: 20px;
    color: white


}
p3,p4,p5,p6,p7{
  text-align: center;
   font-size: 20px;
    color: white
}

p1,p2,p3,p4,p5,p6,p7 {
  margin-bottom: 8em;
}

* {
  box-sizing: border-box;
}

div.flex-container {
  display: flex;
  flex-direction: row;
}

div.flex-container > div {
  margin: 10px;
}




.center {
  margin: center;
  width: 100%;
  /* border: 3px solid #73AD21; */
  padding: 150px;
}

.iframeWrapper {
   width: 100%; /* match your sketch width */
   height: 400px; /* match your sketch height */
   overflow: hidden; /* hide anything outside bounds */
   position: relative;
}

iframe {
   width: 100%;
   height: 442px; /* 42px taller than the container */
   border: none;
   position: absolute; /* this allows you to call 'top' on the next line */
   top: -42px; /* shift the iframe 42px up to hide the bar */
}

#btn{
  margin-top: 2rem;
  padding: 10px;
  background: black;
  display: inline-block;
  color: white;
  border-radius: 25%;
}

#btn:hover{
  color: red;
}



@media (max-width: 768px) {
body  {

  background-color: black;
  /* background-color: pink; */
}
}
  /* your tablet styles here! */


@media (max-width: 425px) {
    
    body{
background-color: black;
iframe {
  display: none;
}

    /* your mobile styles here! */
}

}