body {
    color: #333;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}

main {
    margin: 40px;
}

h1 {
     font-size: 30px;
     margin-bottom: 40px;
}

.button_container {
    border: 1px solid #ddd;
    margin: 0 10px 10px 0;
    padding: 20px;
    width: 300px;
    height: 300px;
    float: left;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
}



a#btn_spotify {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    background-color: #2ebd59;
    border: 2px solid #2ebd59;
    color: #fff;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_spotify:hover {
    background-color: #fff;
    border: 2px solid #000;
    color: #000;
}

a#btn_amazon {
    display: block;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border-radius: 50px;
    margin: auto;
    margin-top: 75px;
    padding-top: 8px;
    background-color: #232f3e;
    color: #fff;
    text-align: center;
    font-size: 60px;
    transition: all .2s;
}

a#btn_amazon:hover {
    background-color: #fc9a18;
}

a#btn_twitter {
    display: inline-block;
    height: 40px;
    box-sizing: border-box;
    border-radius: 4px;
    margin: auto;
    margin-top: 105px;
    padding: 10px 30px 0 30px;
    background-color: #56cdf1;
    color: #fff;
    font-size: 18px;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-decoration: none;
}

a#btn_twitter:hover {

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2ebfec+0,28a5cb+100 */
    background: rgb(46,191,236); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(46,191,236,1) 0%, rgba(40,165,203,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(46,191,236,1) 0%,rgba(40,165,203,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(46,191,236,1) 0%,rgba(40,165,203,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ebfec', endColorstr='#28a5cb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

a#btn_indiegogo {
    display: inline-block;
    position: relative;
    margin:auto;
    margin-top: 100px;
    padding: 8px 16px;
    background-color: #fff;
    color: #eb1478;
    font-family: 'Ubuntu', sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: -2px;
    transition: all .2s;
}

a#btn_indiegogo:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #eb1478;
    transition: all .5s;
}

a#btn_indiegogo:hover {
    color: #fff;
}

a#btn_indiegogo:hover:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

a#btn_indiegogo span {
    position: relative;
    z-index: 10;
}

a#btn_coca {
    font-family: 'Coca Cola ii', sans-serif;
    font-size: 40px;
    background-color:red;
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    margin-top: 50px;
    text-transform: none;
    text-decoration: none;
    font-weight: bold;
    width: 150px;
    height: 150px;
    background:red;
    border-radius: 50%;
    transition:all .2s;
}

a#btn_coca:before {
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    left: 50%;
}
a#btn_coca:hover {
    background-color:white;
    font-size: 60px;
    color: red;
    width: 200px;
    height: 200px;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

a#btn_apple{
    font-family: 'San Francisco', Helvetica, Arial, san-serif;
    font-size: 30px;
    display: flex;
    padding: 12px 28px;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    margin-top: 100px;
    text-transform: none;
    text-decoration: none;
    background-color: black;
    color:white;
    border: 2px solid white;
    border-radius: 40px;
    text-decoration: none;
    transition: all .4s;
}

a#btn_apple:hover{
    background-color: white;
    font-size:30px;
    color: black;
}

a#btn_ibm{
    font-family: 'IBM Plex Sans', sans-serif;
    color: blue;
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    margin-top: 100px;
    text-transform: none;
    text-decoration: none;

/* /https://css-tricks.com/css-link-hover-effects/ */
    box-shadow: inset 0 0 0 0 blue;
    color: blue;
     padding: 0 .25rem;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}

a#btn_ibm:hover{
    box-shadow: inset 400px 0 0 0 blue;
    color: white;
}

a#btn_nerf{
    font-family: 'Exo 2', sans-serif;
    font-size: 60px;
    background-color:rgb(255, 145, 0);
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    margin-top: 80px;
    text-transform: none;
    text-decoration: none;
    width: 220px;
    height: 110px;
    border-radius: 50%;
    transition:all .2s;
}

a#btn_nerf:hover{
    background-color:orangered;
    color:greenyellow;
    padding: 0 0 0 0;
    margin-top: 50px;
    /* width: 0;
    height: 0; */
      border-top: 40px solid;
      border-left: 90px solid red;
      border-bottom: 40px solid;
}

a#btn_harley{
    font-family: 'Anton', sans-serif;
    font-size: 60px;
    color: white;
    background-color: #DD4814;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    margin-top: 10px;
    text-transform: none;
    text-decoration: none;
    width: 240px;
    height: 240px;
    border: 4px solid black;
    -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  transition: all .2s;
}

a#btn_harley:hover{
    box-shadow: inset 0 -3.25em 0 0 var(--hover);
    background-color: white;
    color: #DD4814;
}

a#btn_mk{
    font-family: 'Raleway', sans-serif;
    font-size: 30px;
    color:rgb(6, 6, 100);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    text-transform: none;
    text-decoration: none;
    transition: all .25s;
    margin-top: 100px;
}

a#btn_mk:hover{
    letter-spacing: 15px;
}

a#btn_ideo{
    font-family: 'Share Tech Mono', monospace;
    color: #fff;
    border: 2.5px solid #8ffaf1;
    background-image: -webkit-linear-gradient(120deg, #8ffaf1 50%, transparent 50%);
    background-image: linear-gradient(120deg,#8ffaf1 50%, transparent 50%);
    background-size: 500px;
    background-repeat: no-repeat;
    background-position: 0%;
    -webkit-transition: background 400ms ease-in-out;
    transition: background 400ms ease-in-out;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    text-transform: none;
    text-decoration: none;
    font-size: 40px;
    margin-top: 100px;
}

a#btn_ideo:hover{
    background-position: 100%;
    color: black;
}

a#btn_sardella{
    font-family: 'Oswald', sans-serif;
    color: white;
    font-size: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    background-color:red;
    height:70px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    text-transform: none;
    text-decoration: none;
    transition: all .25s;
    margin-top: 90px;
}

a#btn_sardella:hover{
    color:black;
    background-position: 100% 0;
   transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;

    background-image: linear-gradient(to right, #3be125, #ffffff, #ff5f5f,  #3be125);
    box-shadow: 0 4px 15px 0 rgba(16, 102, 24, 0.75);
}

a#btn_craigslist{
    font-family: 'Merriweather', serif;
    color: purple;
    font-size: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    height:70px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    text-transform: none;
    text-decoration: none;
    transition: all .25s;
    margin-top: 90px;
}

a#btn_craigslist:hover{
    color:rgb(245, 158, 158);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

a#btn_lyft{
    font-family: 'Ubuntu', sans-serif;
    color:white;
    background-color:rgb(247, 0, 255);
    font-size: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    width:100px;
    height:100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    text-transform: none;
    text-decoration: none;
    margin-top: 70px;
    border: 0 solid;
    transition: all .2s;
}

a#btn_lyft:hover{
    background-color:white;
    color:rgb(247, 0, 255);
    border: 2px solid rgb(247, 0, 255);
    transform: translateY(-0.4em);
    box-shadow: 5px 10px rgb(247, 0, 255);
    margin-top:80px;
}

a#btn_samsung{
    font-family: 'Signika', sans-serif;
    color:white;
    background-color:navy;
    font-size: 50px;
    box-sizing: border-box;
    width: 260px;
    height: 110px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    text-transform: none;
    text-decoration: none;
    margin-top: 70px;
    transition: all .15s;
}

a#btn_samsung:hover{
    transform: scale(1.2);
}

a#btn_dime{
    font-family: 'Anton', sans-serif;
    color:white;
    background-color:rgb(129, 5, 5);
    font-size: 40px;
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    text-transform: none;
    text-decoration: none;
    margin-top: 30px;
    border: 4px solid black;
    transition: all .15s;
}

a#btn_dime:hover{
    transform:rotate(180deg);
}

a#btn_cartoon{
    font-family: 'Secular One', sans-serif;
    color: white;
    font-size: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    text-transform: none;
    text-decoration: none;
    margin-top: 60px;
    box-sizing: border-box;
    width: 120px;
    height: 120px;
    background-color:black;
    transition: all .1s;
}

a#btn_cartoon :hover{
    color:black;
    background-color:white;
    width: 120px;
    height: 120px;
    transform:scale(1.5);
    letter-spacing: 10px;
    margin-top:60px;
    border:1px solid black;
    transition: all .1s;
}

a#btn_bissingers{
    font-family: 'Fondamento', cursive;
    color: rgb(255, 182, 24);
    font-size: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    text-transform: none;
    text-decoration: none;
    margin-top: 90px;
    transition: all .1s;
}

a#btn_bissingers:hover{
    transform:skew(-30deg);
    box-sizing: border-box;
    width: 240px;
    height: 120px;
    border-radius: 50%;
    background-color:rgba(255, 182,24, 0.5);
    margin-top:70px;
    color:white;
}

a#btn_tonight{
    font-family: 'Jost', sans-serif;
    color:white;
    background-color: rgb(2, 2, 77);
    font-size: 25px;
    box-sizing: border-box;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    text-transform: none;
    text-decoration: none;
    line-height: 10px;;
    transition: all .1s;
}
a#btn_tonight #tn{
    font-size: 29px;
    font-weight:700;
}

a#btn_tonight:hover{
    transform:rotate(180deg);
    color:  rgb(2, 2, 77);
    background-position: 100% 0;
   transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    background-image: linear-gradient(to right, #2586e1, #ffffff, #1f3ec7,  #4563e7);
    box-shadow: 0 4px 15px 0 rgba(32, 47, 80, 0.75);
}

a#btn_nike{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: black;
    background-color:rgb(200, 255, 0);
    font-size: 40px;
    box-sizing: border-box;
    width: 150px;
    height: 90px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    margin-top:70px;
    text-transform: none;
    text-decoration: none;
    transition: all .1s;
}

a#btn_nike:hover{
    color:rgb(200, 255, 0);
    border: 1px solid black;
    background-color: white;
    font-size:50px;
}

a#btn_garden{
    font-family: 'Poppins', sans-serif;
    color: rgb(255, 255, 255);
    background-color:rgb(37, 136, 17);
    font-size: 20px;
    box-sizing: border-box;
    width: 250px;
    height: 90px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    margin-top:70px;
    text-transform: none;
    text-decoration: none;
    transition: all .1s;
}

a#btn_garden:hover{
    background-color: rgb(177, 228, 177);
    border-radius: 60px;
    color: rgb(5, 61, 30) !important;
}

a#btn_hulk{
    color: black;
    display: inline-block;
    font-size: 40px;
    position: relative;
    text-decoration: none;
    text-transform: none;
    font-weight: 800;
    margin-top: 80px;
    inset: 0px;
    transform: perspective(350px) rotateX(0deg);
    transition: all 0.25s ease 0s;
}

a#btn_hulk:hover{
    color: rgb(255, 251, 0);
    -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
    transition: all 0.25s ease 0s;
  transform: perspective(350px) rotateX(-180deg);
}

a#btn_tesla{
    color: rgb(255, 0, 0);
    font-size: 40px;
    letter-spacing: 10px;
    box-sizing: border-box;
    width: 250px;
    height: 90px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin:auto;
    margin-top:70px;
    text-transform: none;
    text-decoration: none;
    transition: all .1s;
}

a#btn_tesla:hover{
    background: rgb(240, 48, 72);
    color: white;
    animation: shake 0.9s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    perspective: 2000px;
}
    @keyframes shake {
         10%, 90% {
            transform: translate3d(-2px, 0, 0);
     }
         20%, 80% {
            transform: translate3d(3px, 0, 0);
    }
         30%, 50%, 70% {
            transform: translate3d(-5px, 0, 0);
    }
         40%, 60% {
            transform: translate3d(5px, 0, 0);
    }
  }

  a#btn_run{
    font-family:Arial, Helvetica, sans-serif;
    font-weight: 900;
    font-size: 50px;
    color: black;
    display: flex;
    text-transform: none;
    text-decoration: none;
    margin:auto;
    margin-top:90px;
    margin-left: 20px;
    transition: all .1s;
  }

  a#btn_run:hover{
    background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top:90px;
    margin-left: 20px;
  }

         @keyframes move {
         to {
            background-position: 3000vh;
    }
  }
  
        a#btn_run:hover {
         animation: move 25s linear infinite;
  }
  
        a#btn_run:hover:after {
         animation: move 24s linear infinite;
  }