@import url('https://fonts.googleapis.com/css?family=K2D');

*{
    box-sizing: border-box; 
}



h1{color:white;}
 .yellowText{
    color: rgb(218, 151, 28);
}

.blueText{
    color:blue;
} 
.wrapper{

    display: :flex;
    justify-content:center;
}
body{    position: relative;
    background-color: white;
    height: 100vh;
    justify-content: center;
    align-items:center;  
    display: flex;

    font-family: 'K2D', sans-serif;
    background-image: url("BXe0.gif"); 
    background-size: cover;

}
a{color:gray;
font-size: 40px;
text-decoration: none}


 
    .cta{    
        width:200px;
        transition: 1s;     
        display: flex;
        background-color: rgb(83, 139, 204);
        text-align: center;
        text-decoration: none;
        font-family: 'K2D', sans-serif;
        font-weight: 300;
        font-size: 40px;
        /* transform: skewX(-10deg); */
        /* margin: 0px 00px; */
        text-shadow: 3px 3px rgb(138, 135, 135);
        box-shadow: 15px 5px rgb(77, 85, 100);
        border-radius: 10px;    
         
        border: 1px solid rgb(140, 140, 155);

    }


    .cta:focus{

        outline:none;
    }

    .cta:hover{

        
        background-color: rgb(74, 74, 85);
        border-color: rgb(26, 35, 43);
        border-radius: 200px;
        /* padding:20px; */
        color: white;
        transform:  rotate(360deg) scale(0.5) skewX(-10deg) ; 

        transition: border-radius 10s, transform 5s, background-color 3s, color 0.5s ;
       
    } 


.cta:hover .yellowText{

    animation: color_anim 0.5s infinite both

}    

.cta:hover .blueText{

    animation: color_anim 2s infinite both

}    

    
  

.website{position: relative;
        left:-400px;
        top:100px;
        background-color: rgb(218, 151, 28);
        border-radius: 30px;
        color:rgb(43, 24, 150);
        text-shadow: 2px 2px rgb(241, 238, 238);
        box-shadow: 2px 2px rgb(66, 57, 194);
        transform: skewX(-45deg);
        padding:10px 5px 5px 5px;
    }
.website:hover i{
    animation: shake 0.5s infinite both;
    
}

.fb{position: relative;
    text-align: left;
    padding: 10px 10px 10px 10px;
    background-color: rgb(21, 21, 145);
    color: white;
    left -100px;
    top:-200px;
    border-radius: 10px;
    box-shadow:9px 7px white;
    /* transform: translateX(0%); */
 
}

.fb:hover{

    background-color: white;
    box-shadow: 9px 7px rgb(21, 21, 145);
    color:rgb(21, 21, 145);
    text-decoration: underline;
    transition: 3s;
    animation: fb-tf 1s both infinite, color_anim 1s both infinite ;
    /* animation: movefb 2s both infinte linear ; */
}

.twitter{
    position: relative;
    left:0px;
    top:100px;
    font-size: 100px;
color:rgb(30, 105, 218);
/* background-color: white; */
/* padding:10px; */
border-radius: 5px;
/* border: 3px solid rgb(155, 140, 141); */
}

.twitter:hover i{
 background-color: rgb(131, 128, 128);
 border-radius: 50px;
    animation: scaleA 2s infinite both,  shadowChange 1s infinite both linear;
    
}

.instagram{
     position: absolute;
        left:700px; 
        top:700px;
    padding:30px 50px;
    font-size: 60px;
    background-color: white;
    text-align: center;
    border-radius: 10px;
    background-color: gray;
    color:white;
    border: 3px solid white 
    }

   .instagram:hover{
    color:gray; 
     animation: rainbow 4s infinite both, scaleB 5s infinite both; 


   } 

   .instagram:focus{
       background-color:black;
   }


@keyframes color_anim {

            0%{color:white;}
            50%{color: rgb(21, 21, 145);}
            100%{color:white;}
            
            }

@keyframes fb-tf {

            /* 0%{transform: translateX(0%)}
            50%{transform: translateX(-10%)}
            100%{transform: translateX(0%)} */
             0%{padding: 10px }
            50%{padding: 20px}
            100%{padding: 10px}
        }

@keyframes shake{
    0%{transform: translateX(0%)}
    50%{transform: translateX(-10%)}
    100%{transform: translateX(0%)}

}

@keyframes scaleA{
    0%{transform: scale(1)}
    50%{transform: scale(2)}
    100%{transform: scale(0.5)}

}

@keyframes shadowChange {
    0%{box-shadow: 15px 15px white}
    25%{box-shadow: -15px 15px rgb(202, 190, 190)}
    50%{box-shadow: -15px -15px rgb(131, 128, 128)}
    100%{box-shadow: 15px -15px rgb(58, 57, 57)}

}

@keyframes rainbow {
    0%{background-color: red}
    14%{background-color:  orange}
    28%{background-color: yellow}
    42%{background-color: green}
    56%{background-color: limegreen}
    70%{background-color: blue}
    85%{background-color: violet}

}

@keyframes scaleB{
    0%{transform: scale(1)}
    50%{transform: scale(0.8)}
    75%{transform: scale(1.5)}
    100%{transform: scale(1.0)}}

    @keyframes AnimationName { 
        0%{background-position:15% 0%}
        50%{background-position:86% 100%}
        100%{background-position:15% 0%}
    }