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_apple {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 10px 40px;
    background:black;
    border: 1px solid black;
    color: white;
    font-size: 28px;
    font-family: -apple-system-short-headline, BlinkMacSystemFont, sans-serif;
    font-weight: normal;
    text-decoration: none;
    transition: all .3s;
}

a#btn_apple:hover {
    background-color: #fff;
    border: 1px solid black;
    color: black;
}

a#btn_lyft {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    font-size: 50pt;
    color: #FF00BF;
}

a#btn_lyft:hover{
    animation: rotate 0.3s linear;
}

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    50%{
        transform: rotate(180deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

a#btn_cocacola {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 100px;
    width: 100px;
    margin: 75px auto;
    border-radius: 100px;
    border: 1px solid black;
    transition: all .3s;
}

a#btn_cocacola img{
    width: 80%; 
    height: auto;
}

a#btn_cocacola:hover {
    filter: invert(15%) sepia(99%) saturate(3014%) hue-rotate(346deg) brightness(107%) contrast(94%);
}


a#btn_explode {
    display: block;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 100px auto 0 auto;
    padding: 5px 10px;
    border-radius: 10px;
    font-family: 'Bebas Neue', cursive;
    text-decoration: none;
    font-size: 24pt;
    background-color: #E7E4D6;
    color: black;
    transition: all .1s;
}

a#btn_explode:hover {
    color: #E7E4D6;
    background-color: #B23634;
    animation: shake 0.1s infinite;
}

@keyframes shake {
    0% {
        transform: translateX(0px) rotate(0deg);
    }

    33% {
        transform: translateX(-2px) rotate(-2deg);
    }

    66% {
        transform: translateX(2px) rotate(2deg);
    }

    100% {
        transform: translateX(0px) rotate(0deg);
    }
}

a#btn_tesla {
    display: block;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 60px auto 0 auto;
    transition: all .1s;
    scale: 0.5;
}

a#btn_tesla:hover {
    scale: 0.65;
}

a#btn_nbc {
    display: block;
    box-sizing: border-box;
    margin: auto;
    position: relative;
    top: 50px;
    filter: invert(14%) sepia(14%) saturate(7336%) hue-rotate(182deg) brightness(96%) contrast(102%);
    transition: all .3s;
}

a#btn_nbc img {
    height: 150px;
    width: 150px;
}

a#btn_nbc:hover {
    top: 40px;
    filter: none;
}


a#btn_ideo {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 100px;
    padding: 20px 40px 10px 40px;
    background:transparent;
    color: black;
    font-size: 28px;
    font-family: 'Fira Mono', monospace;
    font-weight: normal;
    text-decoration: none;
    transition: all .3s;
    box-shadow: inset 0 0 0 0 #FDF322;
    color: black;
}

a#btn_ideo img {
    width: 150px;
    height: auto;
}

a#btn_ideo:hover {
    box-shadow: inset 10em 0 0 0 #FDF322;
}


 a#btn_nike {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 100px;
    margin: auto;
    margin-top: 100px;
    padding: 5px 40px;
    background:black;
    border: 1px solid black;
    color: white;
    font-size: 30px;
    font-family: trade-gothic-next-condensed, sans-serif;
    font-weight: 800;
    font-style: italic;
    text-decoration: none;
    transition: all .3s;
 }


 a#btn_nike:hover {
    background: #C0FF00;
    color: black;
    animation: bounce 0.7s infinite;
 }


 @keyframes bounce { 
    0% {transform: translateY(0);}
    50% {transform: translateY(-5px);}
 }

 a#btn_moo {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 90px auto 0 auto;
    box-shadow: inset 0 0 0 0 rgba(0,136,86,0.2);
    transition: 0.2s;
    border-radius: 50px;
    border: 0px solid #008856;
    height: 60px;
 }

 a#btn_moo img{
    height: 75px;
    width: 100px;
 }

 a#btn_moo:hover {
    transition: 1s;
    box-shadow: inset 0 -10em 0 0 rgba(0,136,86,0.2);
    border: 2px solid #008856;
 }

 a#btn_fitbit {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 100px auto 0 auto;
    transition: all .7s;
    filter: grayscale(100%);
    transition: 0.2s;
    width: 120px;
    height: 45px;
 }

 a#btn_fitbit img{
     width: 100px;
     height: auto;
     padding: 5px 10px;
 }

 a#btn_fitbit:hover{
    filter: grayscale(0%);
    border-left: 5px solid #00B2BB;
 }

 a#btn_instagram {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    box-sizing: border-box;
    border-radius: 12px;
    margin: auto;
    margin-top: 90px;
    padding: 20px 20px;
    color: black;
    font-size: 40px;
    font-family: -apple-system-short-headline, BlinkMacSystemFont, sans-serif;
    font-weight: normal;
    text-decoration: none;
    transition: all 0.2s;
 }

 a#btn_instagram:hover{
    color: white;
    /* background gradient sourced from https://stackoverflow.com/questions/37751375/instagram-new-logo-css-background */
    background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
    border: none;
 }

 a#btn_facebook{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 10px 40px;
    background:#1877F2;
    color: white;
    font-size: 24px;
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    text-decoration: none;
    transition: all .3s;
 }

 a#btn_facebook:hover{
    background: rgba(24, 119, 242, 0.75);
 }

 a#btn_npr {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin: 100px auto 0 auto;
 }

 a#btn_npr img {
    width: 150px;
    height: auto;
    transition:ease-in-out .5s;
 }

 a#btn_npr img:hover{
    content:url(../images/npr-logo-hover.svg);
    width: 178px;
    height: auto;
 }

 a#btn_colorrun {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: auto;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 10px 40px;
    font-size: 24px;
    font-family: 'Oswald', sans-serif;
    font-weight: normal;
    text-decoration: none;
    transition: all .3s;
 }

 a#btn_colorrun h3 {
    display: inline;
 }

 h3#pink {
    color: #EC098C;
 }

 h3#yellow {
    color: #F9E01E;
 }

 h3#blue {
    color: #2CACE2;
 }

 a#btn_colorrun #text:hover {
     filter: blur(12px);
     transition: all ease-in-out .3s;
 }
  
 a#btn_colorrun:after {
    content: '';
    position: absolute;
    width: 80%;
    transform: scaleX(0);
    height: 5px;
    bottom: 25px;
    left: 10%;
    background: rgb(236,9,140);
    background: linear-gradient(90deg, rgba(236,9,140,1) 0%, rgba(249,224,30,1) 49%, rgba(44,172,226,1) 100%);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out;
  }
  
  a#btn_colorrun:hover:after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }

  @font-face {
    font-family: 'St. Jude Sans';
    src: url('../fonts/sjs-light.ttf');
  }

  a#btn_stjude {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 55px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 100px;
    border-radius: 10px;
    border: 2px solid #d11947;
    padding: 5px 20px;
    color: white;
    background-color: #d11947;
    font-family: 'St. Jude Sans', Helvetica, sans-serif;
    font-size: 16pt;
    text-decoration: none;
    transition: all .3s;
}

  a#btn_stjude:hover {
    background-color: white;
    color: #d11947;
    content:url('../images/stjudecloud-logo.svg');
}

  a#btn_army {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 55px;
    clip-path: polygon(10% 0, 90% 0, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0 80%, 0 20%);
    box-sizing: border-box;
    margin: auto;
    margin-top: 100px;
    padding: 10px 30px;
    color: #ECC745;
    background-color: black;
    overflow: hidden;
    position: relative;
    font-family: 'Stick No Bills', sans-serif;
    font-weight: 500;
    font-size: 24pt;
    text-decoration: none;
}

    
a#btn_army:after {
    content: "";
    background: #fff;
    height: 200px;
    top: -75px;
    left: -75px;
    opacity: .2;
    position: absolute;
    transform: rotate(55deg);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    width: 80px;
    z-index: -10;
}
  
  
a#btn_army:hover:after {
    left: 150%;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

@font-face {
    font-family: 'bluu';
    src: url('../fonts/bluunext-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

a#btn_pottermore {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 55px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 100px;
    border-radius: 10px;
    background-color: rgba(79, 76, 141, 0.15);
    padding: 5px 20px;
    color: #4F4C8D;
    font-family: 'bluu', serif;
    font-size: 16pt;
    text-decoration: none;
    transition: all .3s;
    animation: floating 3s ease-in-out infinite;   
}

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 10px); }
    100%   { transform: translate(0, 0px); }   
}

a#btn_pottermore:hover {
    color: white;
    background-color: #4F4C8D;
    text-shadow: 0 0 10px #ffffff, 0 0 8px #6965B0;
    animation-play-state: paused;
}

@font-face {
    font-family: 'NY Irvin';
    src: url('../fonts/NY\ Irvin.ttf');
}

a#btn_newyorker {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: fit-content;
    box-sizing: border-box;
    margin: auto;
    margin-top: 90px;
    background-color: white;
    padding: 10px 20px;
    color: black;
    border: 1px solid black;
    font-family: 'NY Irvin', serif;
    font-size: 20pt;
    text-decoration: none;
    transition: all .3s;
}

a#btn_newyorker {  
    box-shadow: 4px 4px 0 0 black, inset 0 0 0 0 black;
}

a#btn_newyorker:hover{
    color: white;
    box-shadow: 0 0 0 0 black, inset 6em 3.5em 0 0 black  ;
}

a#btn_craigslist {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    font-family: 'Times New Roman', Times, serif;
    color: #800080;
    width: 200px;
    height: 50px;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 24pt;
    transition: all 0.3s;

}

a#btn_craigslist:hover {
    filter: blur(3px);
}

@font-face {
    font-family: 'Samsung Sharp Sans Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Samsung Sharp Sans Medium'), url('../fonts/samsungsharpsans-medium.woff') format('woff');
    }

a#btn_samsung {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 100px;
    padding: 10px 30px;
    background:#12279e;
    border-radius: 25px;
    border: 1px solid #12279e;
    color: white;
    font-size: 28px;
    font-family: 'Samsung Sharp Sans Medium', sans-serif;
    font-weight: normal;
    text-decoration: none;
    transition: all .3s;
}

a#btn_samsung:hover{
    background-color: transparent;
    color: #12279e;
    box-shadow: 2px 2px 0 2px #12279e;
}