.content-box {
  background: rgb(0, 0, 0, .70);
  padding: 40px;
  max-width: 900px;
  width: 100%;
  min-height: 100vh;      
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 20px;  
 }
html, body {
  margin: 0;
  padding: 0;
  background: url("spiral.gif") no-repeat center center fixed;
  background-size: cover;
}

body {
  padding: 50px;
}

.Heading{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: clamp(40px, 10vw, 80px);
  text-align: center;
  color:rgb(255, 255, 255)
 
 
}
.descriptionheading, .toolsheading, .Pheading, .Theading, .IHeading{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size:25px;
  font-weight: 300;
  color: rgb(255, 255, 255);
}


.tools, p, .participants, .time, .intructions{
   font-family: Arial, Helvetica, sans-serif;
  font-size:20px;
  color:rgb(255, 255, 255);
}



iframe{
  width: 100%;
  height: 300px
}

#btn h3{
  margin:0;
}

#btn{
  margin-top: 2rem;
  padding: 20px;
  background: rgb(0, 0, 0, .70);
  display: inline-block;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  color: white;
  border-radius: 25%;
}

#btn:hover{
  color: red;
}


@media (max-width: 425px) {
 .content-box {
  background: white;
  padding: 40px;
  max-width: 900px;
  width: 100%;
  min-height: 100vh;      
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 20px;  
 
 }
html,  body{
  background-color: rgb(255, 255, 255);
  margin:10px;
  padding:10px;

}


.Heading{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: clamp(40px, 10vw, 80px);
  text-align: center;
  color:rgb(0, 0, 0)
  
}
 iframe{
  display: none;
 }
.descriptionheading, .toolsheading, .Pheading, .Theading, .IHeading{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size:30px;
  font-weight: 300;
  color: rgb(0, 0, 0);
  text-align: center;
}
p{
 font-family:Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: rgb(255, 0, 0);
    text-align: center;
}

.tools{
   font-family: Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight: 300;
  color: rgb(0, 145, 255);
    text-align: center;
}

.participants {
 font-family:Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight: 300;
  color: rgb(41, 151, 70);
    text-align: center;
}


.time{
   font-family: Arial, Helvetica, sans-serif;
  font-size:18px;
  font-weight: 300;
  color: rgb(0, 145, 255);
    text-align: center;
}

.instructions{
 font-family:Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: rgb(255, 0, 0);
    text-align: center;


}
}