a#btn_electra {
    display: block;
    width: 60px;
    height: 75px;
    margin: auto;
    margin-top: 75px;
    background-color: #06acba;
    color: #ffffff;
    line-height: 100%;
    text-align: center;
    font-size: 70px;
    position: relative;
    text-decoration: none;
    transition: .2s}

a#btn_electra .fa-solid, .fa-wind {
    position: absolute;
    rotate: calc(180deg);
    scale: calc(0.55);
    left: 20px;
    right: 10px;    
    top: 4px;
    transition: 0s;
    color: rgba(0, 0, 0, 0);}

a#btn_electra:active .fa-solid, .fa-wind {
    position: absolute;
    right: 67px;
    top: 4px;
    transition: right .2s, color .5s;
    color: rgb(255, 255, 255);}

a#btn_electra:hover {
    font-family: "Mr Dafoe", cursive;
    transition: .2s;
    padding: 0px 20px 0px 0px;}

a#btn_electra:active {
    width: 100px;}

a#btn_electra:active span {
    font-family: "Mr Dafoe", cursive;
    transition: .3s;
    padding-left: 42px;}
    
a#btn_ideo {
    display: inline-block;
    position: relative;
    margin:auto;
    margin-top: 100px;
    padding: 8px 16px;
    background-color: #fff;
    color: #84cbc9;
    font-family: "Lexend Giga", sans-serif;
    font-size: 30px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: -2px;
    transition: all .2s;
    }

a#btn_ideo span:nth-of-type(1){
    position: absolute;
    transition: .2s;}

a#btn_ideo span:nth-of-type(2){
    position: relative;
    opacity: calc(0%);
    color: #e36625;
    transition: .2s;}

a#btn_ideo:hover span:nth-of-type(1){
    position: absolute;
    opacity: calc(0%);
    transition: .2s;
    overflow: hidden;}

a#btn_ideo:hover span:nth-of-type(2){
    position: relative;
    opacity: calc(100%);
    color: #e36625;
    transition-delay: .15s;
    animation: animate 2s linear forwards;}

a#btn_hasbro {
        display: inline-block;
        position: relative;
        margin:auto;
        margin-top: 100px;
        padding: 8px 16px;
        background-color: #fff;
        color: #ffffff;
        font-family: "Rancho", cursive;
        line-height: 40px;
        font-size: 40px;
        font-weight: 400;
        text-decoration: none;
        transition: all .2s;
    }

a#btn_hasbro span {
        display: inline-block;
        position: static;
        margin:auto;
        margin-left: -5px;
        z-index: 10;
        transition: all .5s;
        line-height: -40px;
    }

a#btn_hasbro {
        content: "";
        display: inline-block;
        width: 40%;
        height: 15%;
        z-index: 1;
        position: static;
        background-color: #007bc3; 
        transition: all .5s;
    }
a#btn_hasbro:hover {
        background-color: #f15c22;
        transform: translate(90%, 0%) scale(.3);
        transition: transform .3s;
    } 
a#btn_hasbro:hover:before span {
        color: #232f3e;
        position: static;
        transform: translate(400%, 0%) scale(1);
        z-index: 10;
        transition: all .5s;
        
    }

a#btn_hasbro:hover span {
        color: #232f3e;
        position: static;
        transform: translate(-450%, 0%) scale(3);
        z-index: 10;
        transition: transform 0.5s, scale 0.1s;
        
    }
    
a#btn_craigslist {
	display: inline-block;
	box-sizing: border-box;
	border-radius: 2px;
    border: 10px;
	margin: auto;
	margin-top: 29%;
	padding: 4% 7.5% 4% 7.5%;
	background-color: #f4f4f4;
	border-left: 2px solid #cccccc;
    border-right: 2px solid #cccccc;
	color: #521b8c;
	font-size: 70px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	text-decoration: none;
			}

a#btn_craigslist:hover {
    background: linear-gradient(to bottom, #cd4bfc 0%,#7311a9 100%);
    border: 0px;
}

a#btn_craigslist:hover .fa-solid, a#btn_craigslist:hover .fa-peace {
    color: #f4f4f4;
    border: 0px;
}
a#btn_moo {
	display: inline-block;
	box-sizing: border-box;
	border-radius: 2px;
	margin: auto;
	margin-top: 29%;
	padding: 4% 7.5% 4% 7.5%;
	color: #08ac74;
	font-size: 30px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	text-decoration: none;
    transition: .6s
			}
a#btn_moo:hover {
    transform: rotate(180deg);
    transition: .6s;
}
a#btn_moo:hover {
    transform: rotate(180deg);
    transition: .6s;
}
a#btn_cn  {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-top: 100px;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;

}
a#btn_cn .C {
    display: block;
    width: 60px;
    height: 60px;
    background-color: black;
    color: white;
    line-height: 84%;
    text-align: center;
    font-size: 70px;
    transition: .1s;
}
a#btn_cn .N{
    display: block;
    width: 60px;
    height: 60px;
    background-color: white;
    color: black;
    line-height: 84%;
    text-align: center;
    font-size: 70px; 
    transition: .1s;
}
a#btn_cn:hover .C {
    animation: C .5s;
    
}
a#btn_cn:hover .N {
    animation: N .5s;
}
@keyframes C {
    65% { transform: translate(0px, -60px); }
    95% { transform: translate(0px, 15px); }
    99% { transform: translate(0px, 1px); }
    100% { transform: translate(0px, 0px); }}

@keyframes N {
    65% { transform: translate(0px, 60px); }
    95% { transform: translate(0px, -15px); }
    99% { transform: translate(0px, -1px); }
    100% { transform: translate(0px, 0px); }}

a#btn_bissingers {
    display: inline-block;
    align-items: center;
    margin-top: 100px;
    padding: 10px;
    color: #a98c37;
    background-color: none;
    line-height: 100%;
    text-align: center;
    font-size: 30px;
    text-decoration: none;
    transition: .2s}

a#btn_bissingers:hover {
    background-color: #3e2823;
    transform: .2s;
    color: white;
}
a#btn_bissingers:hover .fa-cookie-bite {
    rotate: -80deg;
    transition: .15s;
}

a#btn_bissingers .fa-cookie-bite {
    transition: .15s;}

#btn_explodingkittens {
    display: inline-block;
    align-items: center;
    margin-top: 70px;
    padding: 10px;
    color: #a98c37;
    text-align: center;
    font-size: 60px;}

#btn_explodingkittens .fa-cat {
    display: relative;
    align-items: center;
    color: #000000;
    transition: .2s}

#btn_explodingkittens .fa-explosion {
    display: none;}

#btn_explodingkittens:hover .fa-explosion {
    display: none;}
    
#btn_explodingkittens:hover .fa-cat {
    color: #ab391c;
    transition: 1s;
    animation: shake 0.5s;
    animation-iteration-count: infinite;}

#btn_explodingkittens:active .fa-cat {
    display: none;
    transition: .2s
    }
#btn_explodingkittens:active .fa-explosion {
    display: block;
    color: #ff4d00;
    align-items: center;
    transition: .2s}
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }}
a#btn_stjude {
    display: inline-block;
    align-items: center;
    margin-top: 90px;
    padding: 10px;
    color: #ffffff;
    background-color: none;
    line-height: 100%;
    text-align: center;
    font-size: 30px;
    text-decoration: none;
    border-radius: 10px;
    background-color: #ed8c89;
    transition: .2s}

a#btn_stjude:hover {
    margin-top: 65px;}

a#btn_stjude .fa-heart-pulse {
    display: block;
    transition: .2s}

a#btn_stjude span {
    display: block;
    margin-bottom: 10px;}

a#btn_stjude:hover .fa-heart-pulse {
    font-size: 70px;
    color: #ffffff;
    transition: .2s}

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

a#btn_garden:hover {
    rotate: 360deg;
    color: #08ac74;
    background-color: #fff;;
    transition: .5s}