html {
    margin: 1% 2%;
}

body {
    color: #333;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}

h1 {
    margin: 2% 0;
    letter-spacing: .2rem;
}

div {
    display: block;
}

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

#hsn-button {
    display: block;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    border-radius: 50px;
    margin: auto;
    margin-top: 75px;
    padding-top: 25px;
    background-color: rgb(26, 119, 188);
    border: 3px solid rgb(26, 119, 188);
    color: #fff;
    text-align: center;
    font-size: 40px;
    font-family: 'Arimo', sans-serif;
    text-decoration: none;
    transition: all .4s;
}

#hsn-button:hover {
    color: rgb(198, 0, 126);
    background-color: #fff;
}

#mj-button {
    display: inline-block;
    position: relative;
    margin: auto;
    margin-top: 100px;
    color: rgb(59, 68, 27);
    text-decoration: none;
    font-family: 'Sacramento', cursive;
    font-size: 50px;
    width: 100%;
    word-wrap: break-word;
    transition: all .4s;
}

#mj-button:hover {
    margin-top: 80px;
}

#mj-button:hover + #mj-button-sub {
    visibility: visible;
}

#mj-button-sub {
    visibility: hidden;
    text-decoration: none;
    font-family: 'Patrick Hand SC', cursive;
    font-size: 20px;
    color: rgb(59, 68, 27);
}

#pasta-button{
    display: inline-block;
    position: relative;
    margin: auto;
    margin-top: 100px;
    color: rgb(240, 73, 36);
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    width: 100%;
    word-wrap: break-word;
    transition: all .4s;
}

#pasta-button:hover {
    background-color: rgb(7, 64, 71);
}

#pasta-button:hover:after {
    width: 100%;
    content: "PASTARIA DELI WINE";
    font-size: 25px;
    color: rgb(240, 73, 36);
    transition: all .4s;
}

#electra-button {
    display: inline-block;
    position: relative;
    margin-top: 100px;
    width: 80%;
    font-size: 3rem;
    font-family: 'Mr Dafoe', cursive;
    text-decoration: none;
    color: rgb(148, 220, 229);
    transition: all .5s;
}

#electra-button:hover {
    background-color: rgb(148, 220, 229);
    color: #fff;
}

#ig-button {
    display: inline-block;
    text-align: center;
    position: relative;
    margin-top: 60px;
    width: 150px;
    height: 150px;
    transition: all .5s;
}

#ig-button img {
    width: 80%
}

#ig-button img:hover {
    transition: all 1.5s;
    width: 100%;
    transform: rotate(360deg);
}

#exkit-button {
    display: inline-block;
    position: relative;
    margin-top: 75px;
    font-size: 3.5rem;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 2.5rem;
    height: 100px;
    color: black;
    transition: all .5s;
}

#exkit-button span {
    font-size: 2.5rem;
}

/* https://fossheim.io/writing/posts/css-text-gradient/ */
#exkit-button:hover {
    background: linear-gradient( rgb(224, 187, 67), orange, red);
    -webkit-background-clip: text;
    color: transparent;
}

#nerf-button {
    display: inline-block;
    margin-top: 75px;
    font-size: 3.5rem;
    width: 80%;
    height: 100px;
    text-decoration: none;
    transition: all .5s;
    overflow: hidden;
}

#nerf-img {
    width: 100%;
    transition: .5s;
}

#nerf-button:hover #nerf-img {
    transition: .5s;
    transform: translateX(200%) translateY(-100%) rotate(-5deg);
}

#wiz-button {
    display: inline-block;
    margin-top: 100px;
    width: 100%;
    height: 200px;
    transition: all 3s;
    text-decoration: none;
    text-align: center;
}

#wiz-button img {
    position: relative;
    width: 50%;
}

#wiz-button i {
    position: relative;
    color: gold;
    left: 30px;
}

#wiz-button:hover i {
    transition: 3s;
    transform: translate(40px, -100px);
    rotate: 35deg;
}

#ny-button {
    display: inline-block;
    margin-top: 100px;
    width: 100%;
    height: 200px;
    transition: all .7s;
    text-decoration: none;
    text-align: center;
    padding: 10px 5px 0px 5px;
    font-family: 'Italiana', serif;
    font-size: 2rem;
    color: black;
    height: 50px;
}

#ny-button:hover {
    background-color: black;
    color: white;
}

#craig-button {
    display: inline-block;
    margin-top: 25px;
    width: 100%;
    height: 200px;
    transition: all 2s;
    text-decoration: none;
    text-align: center;
    word-wrap: break-word;
}

#craig-button img {
    width: 60%;
}

#craig-button p {
    position: relative;
    margin: 0px;
    font-family: serif;
    font-size: 3rem;
    color: rgb(107, 63, 160);
    bottom: 25px;
    visibility: hidden;
}

#craig-button:hover p {
    transition: all 2s;
    visibility: visible;
}

#apple-button {
    display: inline-block;
    margin-top: 60px;
    width: 100%;
    height: 200px;
    transition: all 2s;
    text-decoration: none;
    text-align: center;
}

#apple-button i{
    font-size: 8rem;
    color: black;
}

#apple-button:hover i {
    transition: all 1s;
    color: rgb(98, 98, 98);
    text-shadow: 2px 2px 2px black;
}

#old-button {
    display: block;
    margin-top: 75px;
    height: 50px;
    background-color: rgb(1, 55, 100);
    text-decoration: none;
    color: white;
    font-family: sans-serif;
    letter-spacing: -.02rem;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 2.5rem;
    padding: 10% 0;
    border-radius: 100%;
    border: 2px solid rgb(1, 55, 100);
}

#old-button:hover {
    transition: all .5s;
    background-color: rgb(246, 246, 246);
    color: rgb(1, 55, 100);
    box-shadow: 2px 2px 7px rgba(1, 55, 100, 0.551);
}

#vel-button {
    display: block;
    margin-top: 100px;
    height: 50px;
    text-decoration: none;
    font-size: 2.5rem;
    color: white;
    padding: 5% 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-style: italic;
    font-weight: bold;
    color: rgb(65, 65, 65);
    transition: all 1s;
}

#vel-button span {
    transition: all 1s;
    vertical-align: middle;
}

#span-expand {
    transition: all 1s;
    display: none;
}

#vel-button:hover #span-init {
    transition: all 1s;
    display: none;
}

#vel-button:hover #span-expand {
    transition: all 1s;
    display: inline-block;
    vertical-align: middle;
    color: rgb(194, 0, 0);
}

#army-button {
    display: block;
    margin-top: 100px;
    height: 100px;
    width: 100%;
    text-decoration: none;
    transition: all .5s;
    font-family: 'Black Ops One', cursive;
    color: black;
}

#army-img {
    display: block;
    width: 25%;
    float: left;
    transform: translateX(150%);
    transition: all .5s;
}

#army-text{
    visibility: hidden;
    font-size: 2rem;
    padding-top: 10px;
}

#army-button:hover #army-img {
    transition: all .5s;
    transform: translateX(0%);
    margin: 0px 0px;
    
}

#army-button:hover #army-text {
    transition: all 1.5s;
    display: block;
    visibility: visible;
    padding-top: 10px;
}

#fb-button {
    display: block;
    margin-top: 50px;
    width: 100%;
    transition: all .2s;
}

#fb-button i {
    font-size: 8rem;
    color: rgb(73, 103, 170);
}

#fb-button:hover {
    transition: all .2s;
    transform: translateX(20px) translateY(-20px) rotate(20deg);
}

#mbg-button {
    display: block;
    margin-top: 75px;
    font-size: 2rem;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: rgb(65, 84, 65);
    font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: .2rem;
    line-height: 3rem;
}

#mbg-button:hover {
    transition: all .5s;
    background-image: url("https://cdn.vox-cdn.com/thumbor/ZPHzmqBnsb3mdnLbDr8WZSoStv4=/0x0:3366x2848/1200x900/filters:focal(1414x1155:1952x1693)/cdn.vox-cdn.com/uploads/chorus_image/image/63388417/BBG_CherryEsplanade_AntonioMRosario.0.jpg");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

#cn-button {
    display: block;
    margin-top: 100px;
    text-align: center;
    height: 120px;
    width: 100%;
    transition: all .5s;
    text-decoration: none;
}

#cn-n, #cn-c {
    transition: all .5s;
    width: 25%;
}

#cn-button:hover #cn-c {
    transition: all .5s;
    width: 30%;
    transform: translateX(-50px) translateY(50px) rotate(-10deg);
}

#cn-button:hover #cn-n {
    transition: all .5s;
    width: 30%;
    transform: translateX(50px) translateY(-40px) rotate(22deg);
}

#tesla-button {
    display: block;
    margin-top: 50px;
    height: 175px;
    width: 100%;
    transition: all .6s;
}

#tesla-img {
    height: 100%;
    transition: all .6s;
}

#tesla-button:hover #tesla-img {
    transition: all .6s;
    filter: grayscale(100) contrast(200%);
}

#tts-button {
    display: block;
    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;
    height: 175px;
    width: 70%;
    transition: all .6s;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 1.5rem;
    text-align: left;
    color: #2d1e91;
    letter-spacing: -.07rem;
    font-weight: bold;
    word-spacing: -.5rem;
    border: #2d1e91 solid 5px;
    border-radius: 100%;
}

#text1 {
    padding: 20px 0px 0px 20px;
}



#text1, #text2 {
    margin: 0px;
    width: 100%;
    vertical-align: text-top;
}
#text2 span {
    display: inline-block;
    font-size: .9rem;
    vertical-align: text-top;
}

#text2 {
    width: 80%;
    text-align: right;
    padding-left: 10px;
}

#tts-button:hover {
    color: white;
    background-color: black;
    border-color: white;
    box-shadow: 4px 4px 0 black,
                -4px -4px 0 black,
                -4px 4px 0 black,
                4px -4px 0 black;
}

#hh-button {
    display: block;
    margin-top: 100px;
    width: 100%;
    height: 81px;
    text-decoration: none;
    transition: all .5s;
}

#hh-img {
    position: relative;
    width: 100%;
    z-index: 100;
    transition: all .5s;
}

#hh-gif {
    visibility: hidden;
    position: relative;
    z-index: -100;
    width: 35%;
    transform: translateY(-160%);
    transition: all .5s;
}

#hh-button:hover #hh-gif{
   visibility: visible;
   transition: all .5s;
}