body
{
   margin: 0;
   padding: 0;

   background-color: #000;
   background-image: url(images/dce659269993ee5c55a0543ecd2f159e.gif);
   background-attachment: fixed;
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;

   font-family: Arial, sans-serif;

   display: flex;
   justify-content: center;

   overflow-x: hidden;
}

.main-wrapper
{
   width: 100%;
   max-width: 1200px;

   padding: 30px 20px 80px;
   box-sizing: border-box;
}

#wb_Image1
{
   display: flex;
   justify-content: center;

   margin-bottom: 30px;
}

#Image1
{
   width: 220px;
   max-width: 90%;
   height: auto;
}

#Html1
{
   display: flex;
   justify-content: center;
}

.content-box
{
   width: 100%;
   max-width: 950px;

   background: rgba(0,0,0,0.65);

   border-radius: 20px;

   padding: 50px;

   box-sizing: border-box;

   color: #fff;

   text-align: center;

   backdrop-filter: blur(4px);
}

h1
{
   font-size: 48px;
   margin-bottom: 40px;

   font-family: Impact, sans-serif;

   text-shadow: 2px 2px 6px rgba(0,0,0,0.7);
}

h2
{
   font-size: 34px;
   margin-top: 50px;
   margin-bottom: 20px;
}

p
{
   font-size: 24px;
   line-height: 1.9;
}

.intro
{
   font-size: 26px;
   margin-bottom: 50px;
}

.red
{
   color: #ff4d4d;
}

@media (max-width: 768px)
{
   .content-box
   {
      padding: 35px 25px;
   }

   h1
   {
      font-size: 38px;
   }

   h2
   {
      font-size: 28px;
   }

   p,
   .intro
   {
      font-size: 20px;
   }

   #Image1
   {
      width: 180px;
   }
}

@media (max-width: 480px)
{
   .main-wrapper
   {
      padding: 20px 10px 50px;
   }

   .content-box
   {
      padding: 25px 18px;
      border-radius: 14px;
   }

   h1
   {
      font-size: 30px;
   }

   h2
   {
      font-size: 24px;
   }

   p,
   .intro
   {
      font-size: 18px;
      line-height: 1.7;
   }

   #Image1
   {
      width: 140px;
   }
}