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;
}




/* my buttonsssssssssssssssssssss */






/* 2. Best Buy  */
a#btn_bestbuy {
    display: inline-block;
    height: 60px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 100px;
    padding: 20px 40px 0 40px;
    background-color: #1a039a;
    border: 2px solid #ffffff;
    color: #fff;
    font-size: 20px;
    font-family: Roboto;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_bestbuy:hover {
    background-color: rgb(252, 255, 80);
    border: 5px solid #000;
    color: #000;
    box-shadow: 4px 4px 0px rgba(150, 167, 233, 1);
}
/* 3. Poshmark  */
a#btn_posh {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    background-color: #ffffff;
   
    color: rgb(0, 0, 0);
    font-size: 50px;
    font-family: Roboto;
    font-weight: lighter;
    text-decoration: none;
    transition: all .5s;
}

a#btn_posh:hover {
    background-color: rgb(255, 255, 255);

    color: #000;
    text-shadow: 4px 4px 0px rgb(195, 37, 164);
}
/* 4. Instagram  */
a#btn_insta {
    display: inline-block;
    height: 70px;
    box-sizing: border-box;
    border-radius: 10px;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    background-color: #b40072;
    color: #fff;
    font-size: 40px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_insta:hover {
    background-color: rgb(153, 80, 255);
    color: #000;
    height: 90px;
    padding: 20px 40px 0 40px; 
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#258dc8+0,891a2e+100 */
background: #258dc8; /* Old browsers */
background: -moz-linear-gradient(top,  #258dc8 0%, #891a2e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #258dc8 0%,#891a2e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #258dc8 0%,#891a2e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#891a2e',GradientType=0 ); /* IE6-9 */

}
/* 5. Facebook  */
a#btn_facebook {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    background-color: #03639a;
    color: #fff;
    font-size: 30px;
    font-family: Roboto;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_facebook:hover {
    color: rgb(0, 0, 139);
    font-weight: bold;
    font-size: 50px; 
    background-color: white; 
}
/* 6. Wash U  */ 
a#btn_washu {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    background-color: #ffffff;
    border: 2px solid #ffffff;
    color: rgb(123, 0, 0);
    font-size: 50px;
    font-family: PT Serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_washu:hover {
    color: #000;
    font-size: 20px;
}
/* 7. Shein */  
a#btn_shein {
    display: inline-block;
    height: 60px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    color: rgb(0, 0, 0);
    font-size: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_shein:hover {
    color:rgba(46, 0, 46, 0.196);
}
/* 8. Fenty */  
a#btn_fenty {
    display: inline-block;
    height: 70px;
    box-sizing: border-box;
  
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    background-color: #6f039a;
    
    color: #fff;
    font-size: 50px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_fenty:hover {
    background-color: rgb(0, 0, 0);
    color: white;
    font-size: 20px;
}
/* 9. Wacom */  
a#btn_wacom {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    color: rgb(0, 0, 0);
    font-size: 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_wacom:hover {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ad2023+0,db29db+100 */
background: #ad2023; /* Old browsers */
background: -moz-linear-gradient(top,  #ad2023 0%, #db29db 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ad2023 0%,#db29db 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ad2023 0%,#db29db 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad2023', endColorstr='#db29db',GradientType=0 ); /* IE6-9 */

    color: rgb(255, 255, 255);
    
}
/* 10. Apple  */  
a#btn_apple {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    color: rgb(0, 0, 0);
    font-size: 20px;
    font-family: roboto;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_apple:hover {
    text-shadow: 18px 14px 2px rgba(206, 192, 180, 1);
    color: rgb(255, 255, 255);
}
/* 11. Samsung */  
a#btn_samsung {
    display: inline-block;
    height: 80px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 100px;
    padding: 20px 40px 0 40px;
    color: rgb(14, 0, 58);
    font-size: 50px;
    font-family: roboto;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_samsung:hover {
    
    color: rgb(143, 143, 143);
}
/* 12. Microsoft */  
a#btn_micro {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    background-color: #340024;
    color: #fff;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_micro:hover {

    border: 5px solid #000;
    color: rgb(168, 190, 255);
    height: 80px; 
    box-shadow: 18px 14px 0px rgba(206, 192, 242, 1);
}
/* 13. Alienware */  
a#btn_alien {
    display: inline-block;
    height: 40px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 5px 40px 0 40px;
    background-color: #000000;
    color: rgb(70, 255, 70);
    font-size: 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_alien:hover {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,db29db+100 */
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top,  #000000 0%, #db29db 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #000000 0%,#db29db 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #000000 0%,#db29db 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#db29db',GradientType=0 ); /* IE6-9 */

    border: 5px solid #000;
    color: #000;
    height:fit-content;
}
/* 14. League of Legends */ 
a#btn_league {
    display: inline-block;
    height: 90px;
    box-sizing: border-box;
   
    margin: auto;
    margin-top: 80px;
    padding: 10px 40px 0 40px;
    background-color: #000000;
  
    color: rgb(233, 187, 0);
    font-size: 30px;
    font-family: PT Serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_league:hover {
    background-color:rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    font-size: 80px; 
}
/* 15. Minecraft */  
a#btn_mine {
    display: inline-block;
    height: 60px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    background-color: #001d25;
   
    color: rgb(129, 129, 129);
    font-size: 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_mine:hover {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#471b1b+0,2b88d9+50,207cca+51,7db9e8+100 */
background: #471b1b; /* Old browsers */
background: -moz-linear-gradient(top,  #471b1b 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #471b1b 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #471b1b 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#471b1b', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

 
    color: rgb(0, 204, 37);
    font-size: 40px;
}
/* 16. Fortnite  */  
a#btn_fort {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    background-color: black;
    color: #fff;
    font-size: 30px;
    font-family: Roboto;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_fort:hover {
    text-shadow: -44px -34px 0px rgba(206, 178, 233, 1);
    color: #000;
}
/* 17. Nordstrom */  
a#btn_nord {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    color: black;
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_nord:hover {
    color: #000;
    text-shadow: -55px 6px 0px rgba(206, 178, 121, 1);
}
/* 18. CheeseCake Factory  */  
a#btn_chcake {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 30px;
    padding: 10px 40px 0 40px;
    color: rgb(55, 0, 50);
    font-size: 40px;
    font-family: PT Serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_chcake:hover {
   
    color: rgb(206, 147, 0);
}
/* 19. Red Lobster  */  
a#btn_redlobster {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 30px;
    padding: 10px 40px 0 40px;
  
    color: rgb(123, 0, 0);
    font-size: 50px;
    font-family: PT Serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_redlobster:hover {
    text-shadow: 18px 14px 0px rgba(206, 192, 196, 1);
    color: #000;
}
/* 20. Seoul Taco */  
a#btn_seoultaco {
    display: inline-block;
    height: 60px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    background-color: #ab5800;
    color: #fff;
    font-size: 30px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_seoultaco:hover {
    background-color: white;
    border: white;
    color: #000;
    font-size:40px; 
}

/* 20. Undertale */  
a#btn_undertale {
    display: inline-block;
    height: 60px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
    padding: 10px 40px 0 40px;
    background-color: black;
    color: #fff;
    font-size: 20px;
    font-family: Roboto;
    font-weight: bold;
    text-decoration: none;
    transition: all .5s;
}

a#btn_undertale:hover {
    background-color: rgb(0, 0, 0);
    color: rgb(243, 255, 13);
    font-size: 30px;
}