/* Styling for James's Buttons */
body {
    color: #333;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}

main {
    margin: 40px;
}

h1 {
     font-size: 30px;
     margin-bottom: 40px;
     padding-top: 75px;
}

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

/* Styling for Soomin's buttons */


/* IBM STYLING + ANIMATION */

a#btn_ibm p{
    display: inline-block;
    margin-top: 95px;
    color: black;
    font-size: 50px;
    font-family: 'Bevan', serif;
    font-weight: bold;
    text-decoration: none;
    align-content: space-between;
}

.bee{
    display: none;
    width: 80px;
    height: 80px;
    margin-top: 95px;
    margin-left: 85px;
    align-content: center;
}


a#btn_ibm:hover p{
    display: none;
}

a#btn_ibm:hover, a#btn_ibm:hover .bee{
    display: block;
    color: #2ebd59;
}


/* OLD NAVY STYLING + ANIMATION */
a#btn_oldnavy {
    display: inline-block;
    height: 40px;
    box-sizing: border-box;
    border-radius: 50%;
    margin: auto;
    margin-top: 105px;
    padding: 10px 30px 0 30px;
    background-color: navy;
    color: #fff;
    font-size: 18px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
    text-decoration: none;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

a#btn_oldnavy:hover{
    display: block;
    transform: scale(1.1);
}


/* NIKE STYLING + ANIMATION */

.swoosh{
    width: 100px;
    height: 100px;
    margin-top: 30px;
    padding-top: 50px;
    padding-left: 80px;
    display: inline-block;
}

@keyframes run {
    from { transform: translate(-10%, 0);} 
    to { transform: translate(40%, 0); }
  }

a#btn_nike:hover, .swoosh{
    display: block;
    transform-origin: center bottom;
    animation-name: run;
    animation-duration: 0.7s;
    animation-direction:normal;
   }


/* CARTOON NETWORK STYLING + ANIMATION */

a#btn_cartoon {
    display: inline-block;
    height: 40px;
    box-sizing: border-box;
    border-radius: 4px;
    margin: auto;
    margin-top: 90px;
    padding: 40px 30px 0 30px;
    color: black;
    font-size: 50px;
    font-family: 'Bowlby One', sans-serif;
    font-weight: bold;
    text-decoration: none;
    align-content: center;
}

a#btn_cartoon:hover{
    transform: translateY(-10%) scale(2);
}

@keyframes grow {
    from { transform: scale(1); }
    33% { transform: rotate(1.25); }
    66% { transform: rotate(1.75); }
    to { transform: rotate(2); }
  }

  a#btn_cartoon:hover{
    display: block;
    transform-origin: center bottom;
    animation-name: grow;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-direction:normal;
}

/* IDEO STYLING + ANIMATION */

a#btn_ideo{
    display: inline-block;
    margin: auto;
    margin-top: 80px;
    padding: 10px 30px 0 30px;
    text-decoration: none;
}

a#btn_ideo p{
    padding-top: 0;
    margin: 0;
    font-size: 30px;
    color: black;
    font-family: 'Sometype Mono', monospace;
    font-weight: bold;
    text-decoration: none;
}

a#btn_ideo:hover p{
    display: none;
}

a#btn_ideo:hover{
    display: block;
}

a#btn_ideo:active + .ideo{
    display: block;
}

/* COCA COLA STYLING + ANIMATION */

a#btn_cola {
    display: inline-block;
    margin: auto;
    color: #1E1E1E;
    font-size: 30px;
    font-family: 'Bodoni Moda', serif;
    font-weight: bold;
    text-decoration: none;
}

a#btn_cola .cokecap{
    margin-top: 70px;
    width: 165px;
    height: 100px;
    animation: lift-cap 1s infinite alternate;
    padding-top: 20px;
}

@keyframes lift-cap {
    0% {
        transform: rotateX(0) translateY(0);
    }
    100% {
        transform: rotateX(90deg) translateY(-100px);
    }
}

a#btn_cola p{
    display: none;
}

a#btn_cola:hover .cokecap{
    animation-name: seesaw;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    filter: brown(100%) saturate(500%);
}

a#btn_cola:active .cokecap{
    display: none;
}

a#btn_cola:active p{
    display: block;
    margin-top: 105px;
}



/* APPLE STYLING + ANIMATION */

a#btn_apple {
    position: relative;
    font-size: 100px;
    display: inline-block;
    box-sizing: border-box;
    border-radius: 4px;
    margin: auto;
    margin-top: 38px;
    padding: 10px 30px 0 30px;
    display: inline-block;
    background-repeat: no-repeat;
    animation: linear infinite, color-change 5s ease-in-out infinite alternate;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes color-change {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* FACEBOOK STYLING + ANIMATION */

a#btn_facebook {
    display: inline-block;
    height: 50px;
    box-sizing: border-box;
    border-radius: 4px;
    margin: auto;
    margin-top: 90px;
    padding: 10px 30px 0 30px;
    background-color: #1877f2;
    color: #fff;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
}

a#btn_facebook:hover{
    transform: scale(1.5);
}

/* LYFT STYLING + ANIMATION */


a#btn_lyft {
    display: inline-block;
    box-sizing: border-box;
    border-radius: 4px;
    margin: auto;
    margin-top: 90px;
    color: rgb(255, 0, 191) ;
    font-size: 60px;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-decoration: none;
}

.car{
    margin-top: 90px;
    color: rgb(255, 0, 191) ;
    font-size: 60px;
    padding-left: 1px;
}

@keyframes drive {
    from { transform: translate(0, 0) translate(-10, 0);} 
    to { transform: translate(100%, 0); }
}

a#btn_lyft:hover{
    display: block;
    transform-origin: center;
    animation-name: drive;
    animation-duration: 0.8s;
    animation-direction:normal;
    filter: hue-rotate(60deg);
    }

a#btn_lyft::after {
    content: "";
    position: absolute;
    bottom: 20px; /* Position at the bottom of the logo */
    left: 50%; /* Start from the center of the logo */
    width: 10px;
    height: 10px;
    background-color: rgba(113, 110, 110, 0.8); /* Semi-transparent white */
    border-radius: 50%;
    animation: smoke 4s infinite linear;   
    }
    
    @keyframes smoke {
        0% {
            transform: translate(-50%, 0) scale(0);
            opacity: 1;
        }
        50% {
            transform: translate(-50%, -50px) scale(1);
            opacity: 0.5;
        }
        100% {
            transform: translate(-50%, -100px) scale(0);
            opacity: 0;
        }
    }



/* FOREFLIGHT STYLING + ANIMATION */

a#btn_foreflight {
    display: inline-block;
    margin: auto;
    padding: 10px 30px 0 30px;
    color: #565758;
    font-size: 25px;
    font-family: "gesta",clean,sans-serif;
    font-weight: bold;
    text-decoration: none;
}

a#btn_foreflight i{
    margin-top: 85px;
}

a#btn_foreflight p{
    margin-top: 0;
}

@keyframes up {
    from {transform: translate(0, 0);}
    to {transform: translate(0, -70px);}
}

a#btn_foreflight:hover i{
    animation-name: up;
    animation-duration: 0.5s;
}

@keyframes down {
    from {transform: translate(0, 0);}
    to {transform: translate(0, 20%);}
}

a#btn_foreflight:hover p{
    animation-name: down;
    animation-duration: 0.5s;
}