* {
      padding: 0;
      margin: 0;
      border: 0;
}
:focus,
::after {
      outline: none;
}
a:focus,
a::after {
      outline: none;
}
nav,
footer,
header,
aside {
      display: block;
}
html,
body {
      height: 100%;
      width: 100%;
      font-size: 100%;
      line-height: 1;
      -ms-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
}
input,
button,
textarea {
      font-family: inherit;
}
input::-ms-clear {
      display: none;
}
button {
      cursor: pointer;
}
button::-moz-focus-inner {
      padding: 0;
      border: 0;
}
a,
a:visited {
      text-decoration: none;
}
a:hover {
      text-decoration: none;
}
ul li {
      list-style: none;
}
img {
      vertical-align: top;
}
h1, h2, h3, h4, h5, h6 {
      font-size: inherit;
      font-weight: inherit;
}

body {
      background-color: rgba(21, 1, 1, 0.94);
      font-family: 'Courier New', Courier, monospace;
}
.continer {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 8.75rem;
}
.title {
      display: block;
      max-width: 50rem;
      margin-top: 10rem;
      padding: .3125rem .9375rem;
      text-align: center;
      position: relative;
      overflow: hidden;
}
.title::after {
      content: "";
      position: absolute;
      left: 1rem;
      bottom: 0;
      width: 91%;
      height: 1px;
      background-color: #ffffff;
      opacity: 0;
      transform: scaleX(0);
      transition: all 0.4s;
}
/* линия с середины
   с лево  width: 0;
   с права width: 0;
           right: 0;
   c лево на право
           width: 0;
           right: 0;      
*/
.title:hover:after {
      transform: scaleX(1);
      opacity: 1;
}
/* с сереины 
   c лево, право
           width: 100%;
   c лево на право
           width: 100%;
           left: 0;
*/

.title h1 {
      text-transform: uppercase;
      letter-spacing: clamp(.3125rem, 1.3vw, 1.0938rem);
      line-height: 1.3;
      font-weight: 700;
      font-size: 2rem;
      color: #ffffff;
}

.text {
      display: block;
      text-align: center;
      width: 100%;
      line-height: 1.3;
      margin-bottom: 10rem;
      padding-inline: .9375rem;
      font-size: clamp(1.25rem, 1.8vw, 1.5rem);
      color: #ffffff;
}

.button {
      display: block;
      text-align: center;
      margin: 0 auto 6.25rem auto;
      color:  rgba(21, 1, 1, 0.94);
      background-color: #ffffff;
      font-size: 1.3125rem;
      max-width: 15.625rem;
      padding: .625rem .9375rem;
      border-radius: 1.875rem;
      font-weight: 600;
      opacity: 0;
      transition: opacity 10s;
}
.visible {
      opacity: 1;
}
@media (max-width: 1200px) {
      .title {
            margin-top: 6.25rem;
      }
}
@media (max-width: 991.98px) {
      .title {
            margin-top: 6.25rem;
      }
      .continer {
            gap: 6.25rem;
      }
      .text {
            margin-bottom: 8.125rem;
      }
      .button {
            margin: 0 auto 4.375rem auto;
      }
}