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: 19px;
    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#coke{
    display: block;
    width: 130px;
    height: 130px;
    box-sizing: border-box;
    border-radius: 50%;
    margin: auto;
    margin-top: 60px;
    padding-top: 30px;
    background-color: red;
    color: white;
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 30px;
    text-decoration: none;
    transition: all .2s;
}

a#coke:hover {
    background-color: transparent;
    color: red;
}

a#apple{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border-radius: 50px;
    margin: auto;
    margin-top: 75px;
    padding-top: 19px;
    color: grey;
    text-decoration: none;
    text-align: center;
    font-size: 60px;
    transition: all .2s;
}

a#apple i{
    transform: translateY(0px);
    transition: all 0.3s;
}

a#apple:hover i {
    transform: translateY(15px);
}

a#apple span {
    opacity: 0;
    transition: all 0.5s;
}

a#apple:hover span {
    opacity: 1;
}

a#ibm{
    display: block;
    width: 151px;
    height: 60px;
    margin: auto;
    margin-top: 88px;
    padding-top: 30px;
    color: blue;
    font-family: noto-sans,sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 30px;
    text-decoration: none;
    transition: all .2s;
}

a#ibm:hover {
    background-color: blue;
    color: white;
    box-shadow: rgba(46, 188, 240, 0.4) 5px 5px, rgba(46, 188, 240, 0.4) 10px 10px, rgba(46, 188, 240, 0.4) 15px 15px, rgba(46, 188, 240, 0.4) 20px 20px, rgba(46, 188, 240, 0.4) 25px 25px;
}

a#nerf {
    display: inline-block;
    position: relative;
    width: 151px;
    height: 74px;
    margin: auto;
    margin-top: 104px;
    padding-top: 9px;
    color: rgb(255, 213, 0);
    color: rgb(255, 213, 0);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    font-family: source-sans-pro,sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 50px;
    text-decoration: none;
    transition: all 0.09s;
}

a#nerf span{
    position: relative;
    z-index: 2
}

a#nerf::before{
    content: "";
    display: block;
    z-index: 1;
    position: absolute;
    transform: scaleX(0);
    transform-origin: 0 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    border-radius: 40px;
    background-color: red;
    transition: all 0.2s;
}
  
a#nerf:hover:before {
    width: 100%;
    height: 100%;
    transform: scaleX(1);
}

#harley{
    display: block;
    width: 235px;
    height: 75px;
    margin: auto;
    margin-top: 88px;
    padding-top: 20px;
    color: white;
    background-color: black;
    border: 5px solid black;
    box-shadow: inset 0px 0px 0px 5px orange;
    box-sizing: border-box;
    font-family: gill-sans-nova,sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 20px;
    text-decoration: none;
    transition: all .2s;
}

#harley:hover{
    color: orange;
    border: none;
    background-color: transparent; 
}

#mk{
    display: inline-block;
    position: relative;
    width: 95px;
    height: 81px;
    border: 12px solid black;
    border-radius: 50%;
    margin: auto;
    margin-top: 75px;
    padding-top: 9px;
    color: black;
    font-family: 'Figtree', sans-serif;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    font-size: 60px;
    transition: all .2s;
}

a#mk span{
    position: relative;
    z-index: 2
}

a#mk::before{
    content: "";
    display: block;
    z-index: 1;
    position: absolute;
    transform: scaleY(0);
    transform-origin: 0 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    border-radius: 40px;
    background-color: black;
    transition: all 0.2s;
}
  
a#mk:hover:before {
    width: 100%;
    height: 100%;
    transform: scaleY(1);
}

a#mk:hover{
    color: white;
}

#ideo{
    display: block;
    width: 235px;
    height: 75px;
    margin: auto;
    margin-top: 70px;
    padding-top: 20px;
    color: black;
    font-family: ff-typestar-ocr-web-pro,sans-serif;
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    font-size: 60px;
    text-decoration: none;
    transition: all .2s;
}

#ideo:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

#lyft{
    display: block;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border-radius: 50px;
    margin: auto;
    margin-top: 75px;
    padding-top: 19px;
    color: rgb(255, 0, 191);
    font-family: "Ubuntu", sans-serif;
    font-weight: 800;
    text-decoration: none;
    text-align: center;
    font-size: 60px;
    transition: all .2s;
}

#lyft:hover{
    background-color: rgb(255, 0, 191);
    color: white;
}

#samsung{
    display: inline-block;
    position: relative;
    margin: auto;
    margin-top: 105px;
    color: blue;
    font-family: itc-avant-garde-gothic-pro,sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 30px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s;
    width: 200px;
    padding: 10px 0px;
}

#samsung:hover{
    color: white;
    background-color: blue;
    border-radius: 50px;
}

#samsung:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    transition: all 0.3s;
}
  
#samsung:hover:before {
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
}
  
 #samsung span {
    position: relative;
    z-index: 2;
}

#cartoon{
    display: block;
    width: 234px;
    height: 117px;
    box-sizing: border-box;
    border-radius: 50px;
    margin: auto;
    margin-top: 75px;
    padding-top: 19px;
    background-color: black;
    color: white;
    font-family: open-sans,sans-serif;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    font-size: 30px;
    transition: transform .5s ease-in-out;
}

#cartoon:hover{
    transform: rotateY(180deg);
}

#nbc{
    display: block;
    width: 182px;
    height: 84px;
    box-sizing: border-box;
    border-radius: 50px;
    margin: auto;
    margin-top: 92px;
    padding-top: 25px;
    color: black;
    font-family: futura-pt,sans-serif;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    font-size: 30px;
    transition: all .2s;
}

#nbc:hover{
    box-shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px;
}

#nike{
    display: block;
    margin: auto;
    margin-top: 80px;
    padding-top: 25px;
    color: black;
    font-family: futura-pt-condensed,sans-serif;
    font-weight: 700;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    font-size: 50px;
    transition: all .2s;
}

#nike span{
    display: block;
    transition: all 0.3s;
}

a#nike:hover span {
    display: none;
}

a#nike img {
    width: 100px;
    display: none;
    transition: all 0.5s;
}

a#nike:hover img {
    display: inline;
}

#garden{
    display: block;
    width: 182px;
    height: 160px;
    box-sizing: border-box;
    border-radius: 50px;
    margin: auto;
    margin-top: 52px;
    padding-top: 30;
    color: green;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    font-size: 30px;
    transition: all .2s;
}

#garden:hover{
    background-color: green;
    color: white;
}

#velocity {
    display: inline-block;
    position: relative;
    margin: auto;
    margin-top: 100px;
    padding: 10px 10px;
    color: #ffffff;
    background-color: red;
    font-family: rubik,sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 50px;
    text-decoration: none;
    transition: all 0.3s;
}
  
#velocity:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    z-index: 1;
    position: absolute;
    top: 0;
    right: 100%;
    background-color: black;
    transition: all 0.2s;
}
  
#velocity:hover {
    color: red;
}
  
#velocity:hover:before {
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
}
  
#velocity span {
    position: relative;
    z-index: 2;
}

#moo{
    display: inline-block;
    position: relative;
    width: 182px;
    height: 98px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 83px;
    padding-top: 30;
    color: green;
    border: 2px solid green;
    background-color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    font-size: 30px;
    transition: all .2s;
}
  
#moo:before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    z-index: 1;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: green;
    transition: all 0.2s;
}
  
#moo:hover {
    color: #ffffff;
}
  
#moo:hover:before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
  
#moo span {
    position: relative;
    z-index: 2;
}

#insta{
    display: block;
    margin: auto;
    margin-top: 52px;
    background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    transition: all .2s;
}


#insta:hover{
    text-shadow: -4px 4px #ef3550,
               -8px 8px #f48fb1,
               -12px 12px #7e57c2,
               -16px 16px #2196f3,
               -20px 20px #26c6da,
               -24px 24px #43a047,
               -28px 28px #eeff41,
               -32px 32px #f9a825,
               -36px 36px #ff5722;
    color: white;
    background: none;
}