@font-face {
font-family: HelveticaNeueMedium;
src: url("./font/HelveticaNeueMedium.otf");

}


  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100vm;
      font-family: HelveticaNeueMedium, Helvetica, Arial, sans-serif;
      cursor: url("./cursor.png")15 15, auto;
      background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
      background-size: 400% 400%;
      animation: gradient 15s ease infinite;
  }

  @keyframes gradient {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }
}

.share-button {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: rgb(240, 240, 240);
}


.header {
  	width:95%;
    max-width: 788px;
    display: flex;
    justify-content: flex-end;
    padding: 12px;
    margin-top:15px;
}

.container {
    width: 91%;
    max-width: 680px;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000000;
}

.image-container {
    padding: 40px 50px;
    height: 96px;
    width: 96px;
    border-radius: 48px;
    overflow: hidden;
}

.image-container img {
    height: 100%;
}

.logo {
    padding: 40px 50px;
    width: auto;
    height: 100px;
    margin: 0;
    align-items: center;
}

h1 {
    font-size: 25px;
    margin-top: 10px;
    margin-bottom: 20px;
    /*color: #FFFFFF;*/
}

a {
    text-decoration: none;
    color: #FFFFFF;

}
/* ICON CLASS:
.icon {
  margin: 4px 8px;
  width: 44px;
  height: 44px;
}
 */

.tile {
    padding: 12px 0px;
    width: 80%;
    margin: 8px;
    text-align: center;
    text-decoration: none;
    background-color: #000000;

    border-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    display: flex;
    justify-content: space-between;

}




/* Happy Rainbow Hover */
.tile:hover {
        background:     linear-gradient(
           to right,
           #E7484F,
           #F68B1D,
           #FCED00,
           #009E4F,
           #00AAC3,
           #732982
         );

       animation:slidebg 1s linear infinite;
       color: #000000;
       font-weight: bold;
       border-color: rgb(0, 0, 0);
       border-width: 2px;
     }

    @keyframes slidebg {
        to {
          background-position:20vw;
        }
    }



  .footer {
          text-decoration: none;
          padding: 10px;
          margin: 0;
          text-align: center;
        }
