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_newyorker {
    display: inline-block;
    position: relative;
    margin:auto;
    margin-top: 100px;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    background-color: rgb(7, 0, 0);
    color: #ffffff;
    font-family: "adobe-caslon-pro", serif;
    font-size: 20px;
    font-weight: regular;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .2s;
}

a#btn_newyorker:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    z-index: -10;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: white;
    color: black;
    transition: all .5s;
    padding-top: 100px;
}

a#btn_newyorker:hover {
    /* text color  */
    color: black;
    /* text background  */
    background-color: white;
}

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

a#btn_newyorker span {
    position: relative;    
}

a#btn_cocacola {
    display: block;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border-radius: 50px;
    margin: auto;
    margin-top: 75px;
    padding-top: 8px;
    background-color: #000000;
    color: rgb(255, 255, 255);
    text-align: center;
    font-size: 60px;
    transition: all 1.3s;
}

a#btn_cocacola:hover {
    background-color: #ffffff;
}

.coke {
    width: 80px;
    display: inline-block;
    margin-top: 2px;
}

a#btn_tuckerallen {
    display: inline-block;
    height: 40px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 105px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 7px;
    background-color: #384967;
    color: #fff;
    letter-spacing: .6px;
    font-size: 20px;
    font-family: "merriweather", serif;
    text-decoration: none;
}


a#btn_tuckerallen:hover {
    background-color: #a2b262
}

a#btn_apple {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #ffffff;
    border: 2px solid #ffffff;
    color: rgb(0, 0, 0);
    font-size: 40px;
    font-family: "roboto", sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    text-decoration: none;
    transition: all .2s;
}

a#btn_apple:hover {
    background-color: #fff;
    border: 2px solid rgb(0, 0, 0);
    color: #000;
}

a#btn_colorrun {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    border-radius: 25px;
    margin: auto;
    margin-top: 100px;
	background-color: #fff645;
    border: 6px solid #ff6a00;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: -10px;
    color: rgb(255, 0, 187);
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .5s;
}

a#btn_colorrun:hover {
    color:  #fff645;
    background-color: rgb(0, 174, 255);
    border: 6px solid rgb(255, 0, 187);
}

a#btn_pasta {
    display: inline-block;
    height: 40px;
    box-sizing: border-box;
    border-radius: 4px;
    margin: auto;
    margin-top: 105px;
    background-color: #d84c00;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-size: 30px;
    font-family: "futura-pt", sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: normal;
    text-decoration: none;
}

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

}

a#btn_moo {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    border-radius: 100px;
    padding-left: 17px;
    padding-right: 15px;
    padding-top: 2px;
    margin: auto;
    margin-top: 100px;
    border: 3px solid #ffffff ;
    background-color: #387a5f;
    color: #fff;
    font-family: "houschka-rounded", sans-serif;
    font-weight: 400;
    font-size: 30px;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .5s;
    letter-spacing: 2px;
}

a#btn_moo:hover {
    box-shadow:inset .9rem .9rem .9rem #ffffff, 
    inset -.9rem -.9rem .9rem #FFFFFF;
    color: #387a5f ;
    border: 3px solid #387a5f ;
    background-color: rgb(177, 177, 177);
}

a#btn_fitbit {
    display: block;
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    border-radius: 400px;
    margin: auto;
    margin-top: 75px;
    padding-top: 8px;
    background-color: #0d2938;
    text-align: center;
    transition: all .4s;
}

a#btn_fitbit:hover {
    box-shadow: 5px 5px 0px 1px #9ca0a7;
}

.fit {
    margin-top: 7px;
}

a#btn_nike {
    display: block;
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 90px;
    margin-left: 50px;
    padding-top: 14px;
    padding-left: 20px;
    padding-right: 140px;
    background-color: #ff0000;
    text-align: center;
    transition: all .3s;
}
a#btn_nike:hover {
    background-color: #9ca0a7;
}

.nikeimg {
    width: 130px;
}

a#btn_potter {
    display: block;
    width: 80px;
    height: 80px;
    box-sizing: border-box;
    margin: auto;
    border-radius: 400px;
    margin-top: 90px;
    margin-left: 40px;
    padding-top: 18px;
    padding-left: 15px;
    padding-right: 180px;
    background-color: #000000;
    text-align: center;
    transition: all .3s;
}
a#btn_potter:hover {
    background-color: #681468;
    box-shadow: 0 0 20px #000000;
    
}

.potterimg {
    width: 170px;
}

a#btn_instagram {
    display: inline-block;
    height: 40px;
    box-sizing: border-box;
    border-radius: 4px;
    margin: auto;
    margin-top: 105px;
    background-image: url(https://media.istockphoto.com/id/1249702917/vector/smooth-blurred-gradient-insta-background-wallpaper-style-scalable-vector-mesh-bright.jpg?s=612x612&w=0&k=20&c=2tz9p1Fk1xEs51pSRUqtZTCT3otqitZ1xBOTYRwPO9Q=);
    background-size: cover;
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-size: 30px;
    font-family: "roboto", sans-serif;
    font-weight: normal;
    text-decoration: none;
}

a#btn_instagram:hover {
    background-image: url(https://static.vecteezy.com/system/resources/thumbnails/002/486/289/small/gradient-background-instagram-free-vector.jpg);
    background-size:cover;
    transition: all 1s;
}

a#btn_facebook {
    display: block;
    width: 100px;
    height: 80px;
    box-sizing: border-box;
    border-radius: 600px;
    margin: auto;
    margin-top: 75px;
    padding-right: 140px;
    padding-top: -70px;
    background-color: #aeabab;
    text-align: center;
    transition: all .4s;
}

a#btn_facebook:hover {
    box-shadow: 10px 10px 0px 1px #3975ea;
}

.facebookimg {
    width: 140px;
}

a#btn_kittens {
    display: inline-block;
    height: 40px;
    box-sizing: border-box;
    margin: auto;
    border-radius: 5px;
    margin-top: 110px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 4px;
    background-color: #ff8c00;
    color: rgb(0, 0, 0);
    letter-spacing: .6px;
    font-size: 25px;
    font-family: "futura-pt-condensed", sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .8s;
}


a#btn_kittens:hover {
    background-color: #000000;
    color:  #ff8c00;
}

a#btn_hulk {
    display: block;
    width: 100px;
    height: 120px;
    box-sizing: border-box;
    border-radius: 2px;
    margin: auto;
    margin-top: 75px;
    padding-top: 15px;
    padding-bottom: 20px;
    background-color: #000000;
    text-align: center;
    transition: all .4s;
}

a#btn_hulk:hover {
    box-shadow: 0 0 40px #fff700;
}

.hulkimg {
    width: 50px;
    display: inline-block;
    margin-top: 2px;
}

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

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

a#btn_tonightshow:hover {
    color: #fff;
    box-shadow: 0 0 40px #fbff00;
}

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

a#btn_tonightshow span {
    position: relative;
    z-index: 100;
}

a#btn_ibm {
    display: inline-block;
    height: 40px;
    box-sizing: border-box;
    margin: auto;
    margin-top: 110px;
    padding-left: 16px;
    padding-right: 15px;
    padding-top: 1px;
    color: rgb(0, 0, 0);
    letter-spacing: .6px;
    font-size: 25px;
    font-family: "ibm-plex-sans", sans-serif;
    font-weight: normal;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .3s;
}


a#btn_ibm:hover {
    background-color: #2c60f5;
    color:  #ffffff;
}

.dimeimg {
    width: 100%;
    object-fit: contain;
    position: relative;
}

a#btn_dime {
    display: block;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border-radius: 0px;
    margin: auto;
    margin-top: 75px;
    text-align: center;
    font-size: 60px;
    transition: all .1s;
}

a#btn_dime:hover {
    position: relative;
    top: -20px;
    filter: drop-shadow(-10px -10px 10px rgb(0, 0, 0)); 
}

.mollyrogerimg {
    width: 100%;
    display: inline-block;
    margin-top: 2px;
}

a#btn_mollyroger {
    display: block;
    width: 200px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 2px;
    margin: auto;
    margin-top: 110px;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 20px;
    background-color: #989175;
    text-align: center;
    transition: all .4s;
}

a#btn_mollyroger:hover {
    background-color: #d1d0cc;
}

a#btn_oldnavy {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    border-radius: 200px;
    margin: auto;
    margin-top: 100px;
	background-color: #143661;
    border: 6px solid #143661;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 2px;
    padding-bottom: -10px;
    color: rgb(255, 255, 255);
    font-size: 25px;
    font-weight: bolder;
    font-family: "roboto", sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .5s;
}

a#btn_oldnavy:hover {
    color:  #143661;
    background-color: rgb(255, 255, 255);
    border: 6px solid #143661;
}

a#btn_craigslist {
    display: inline-block;
    width: 150px;
    height: 50px;
    box-sizing: border-box;
    border-radius: 2px;
    margin: auto;
    margin-top: 100px;
	background-color: #e4e6e8;
    color: #1616e5;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    font-size: 20px;
    text-decoration: none;
    transition: all .3s;
}

a#btn_craigslist:hover {
    background-color: #e4e6e8;
    border-radius: 100px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
}