* {
    margin: 0;
    padding: 0;
    line-height: 1.5;
  }
  
  body {
    background-image: url(https://kartinkin.net/uploads/posts/2021-07/1626820064_1-kartinkin-com-p-fon-s-perelivami-krasivo-1.jpg);
    background-position: center;
    background-size: cover;
    font-family: sans-serif;
    color: #ffffff;
    min-height: 100vh;
  }
  
  body > h1 {
  background: rgb(255,255,255);
  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(0,17,38,1) 25%, rgba(0,54,65,1) 75%, rgba(255,255,255,1) 100%);
    text-align: center;
    height: 20vh;
    line-height: 20vh;
    border-radius: 15px;
    margin: 20px;
    text-shadow: 4px 4px 2px #000;
  }
  
  main {
    background-color: rgb(0, 0, 0, 0.8);
    text-align: center;
    min-height: 45vh;
    border-radius: 15px;
    margin: 20px;
    padding: 20px;
  }
  
  footer {
    background-color: rgb(0, 0, 0, 0.8);
    text-align: left;
    min-height: 10vh;
    border-radius: 15px;
    margin: 20px;
    padding: 20px 0 20px 10%;
  }
  
  footer > h2 {
    font-size: 1.5rem;
    text-decoration: underline;
  }
  
  footer > address::before {
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath width='100' fill='%23fff' d='M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-352 96c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H86.4C74 384 64 375.4 64 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2zM512 312c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16zm0-64c0 4.4-3.6 8-8 8H360c-4.4 0-8-3.6-8-8v-16c0-4.4 3.6-8 8-8h144c4.4 0 8 3.6 8 8v16z'%3E%3C/path%3E%3C/svg%3E");
    display:inline-block;
    font-size:inherit;
    overflow:visible;
    vertical-align:-.125em;
    width:1.5em;
    margin-right:.75rem;
  }
  
  img {
    max-width: 45%;
    border-radius: 15px;
    display: block;
    margin: 10px auto;
    animation: float 6s ease-in-out infinite;
  }
  
  @keyframes float {
      0% {
          transform: translateY(0px);
      }
      50% {
          transform: translateY(-20px);
      }
      100% {
          transform: translateY(0px);
      }
  }
  .btn {
      margin: 0 auto;
      position: relative;
      width: 155px;
      height: 50px;
      margin: 20px auto;
      box-sizing: border-box;
  }
   .btn a {
      box-sizing: inherit;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(255, 255, 255, 0.05);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 30px;
      color: #fff;
      z-index: 1;
      font-weight: 400;
      letter-spacing: 1px;
      text-decoration: none;
      overflow: hidden;
      transition: 0.5s;
      backdrop-filter: blur(15px);
  }
  .btn:hover a, .btn:focus a  {
      letter-spacing: 3px;
  }
  .btn a::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
      transform: skew(45deg) translate(0);
  }
   .btn::before {
      content: '';
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      bottom: -5px;
      width: 30px;
      height: 10px;
      background-color: #f00;
      border-radius: 10px;
      transition: 0.5s;
      transition-delay: 0s;
  }
  .btn:hover::before {
      bottom: 0;
      height: 50%;
      width: 80%;
      border-radius: 30px;
      transition-delay: 0.5s;
  }
  .btn::after {
      content: '';
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      top: -5px;
      width: 30px;
      height: 10px;
      background-color: #f00;
      border-radius: 10px;
      transition: 0.5s;
      transition-delay: 0s;
  }
  .btn:hover::after {
      top: 0;
      height: 50%;
      width: 80%;
      border-radius: 30px;
      transition-delay: 0.5s;
  }
  
  .btn-red::before,
  .btn-red::after {
      background-color: #ff1f71;
      box-shadow: 0 0 5px #ff1f71,
          0 0 15px #ff1f71,
          0 0 30px #ff1f71,
          0 0 60px #ff1f71;
  }
  .btn-blue::before,
  .btn-blue::after {
      background-color: #2bd2ff;
      box-shadow: 0 0 5px #2bd2ff,
          0 0 15px #2bd2ff,
          0 0 30px #2bd2ff,
          0 0 60px #2bd2ff;
  }
  .btn-green::before,
  .btn-green::after {
      background-color: #1eff45;
      box-shadow: 0 0 5px #1eff45,
          0 0 15px #1eff45,
          0 0 30px #1eff45,
          0 0 60px #1eff45;
  }
  
  @media only all and (max-width: 550px) {
    body > h1 {
      font-size: 1rem;
    }
  }