@import url('https://fonts.googleapis.com/css?family=Anton|Fahkwang');
@import url('https://fonts.googleapis.com/css?family=Acme');

html{


box-sizing: border-box;
}

html body {
    background-color: rgba(0,0,0,1.00);
    padding-top: 60px;

}
h1{
    padding: 20px 20px;
    margin-left: 35%;
    margin-right: 35%;
text-align: center;

font-family: 'Anton', sans-serif;
font-size: 75px;
color: #010201;
text-decoration: underline;
text-shadow: 9px 5px rgb(243, 239, 239);

}
h1:hover{
   
    background-color: rgb(63, 62, 62);
    border: 1px solid rgb(66, 61, 61);
    border-radius: 5px;
    color: black;
    text-shadow: 9px 5px rgb(140, 245, 2);
    transform: skewX(-25deg);
    /* box-shadow: 40px 10px limegreen; */

    box-shadow: 20px 20px 20px rgb(140, 245, 2);
    transition: background 2s, transform 3s 0.2s ease-in ;
    cursor: alias;
    


    }
.main{

    margin-left: 10%;
    margin-right:10%;
}


h2{
    font-family: 'Acme', sans-serif;
    color: #fafcf5;
    border: 2px solid #fafcf5;  
    text-align: center;
    

    border-radius: 10px;

   
}
/* 
.contactMe{
    padding: 0px 50%;
    display: flex; 
    align-content: left;
        flex-wrap: wrap;
}
.contactMe p{
    font-size: 1px;
color: black;

}
*/
.contactMe:hover p{

    animation: rainbow 3s infinite both;

} 
.contactMe:hover a{

    animation: rainbow 3s infinite both;

} 


h2:hover{
    animation: rainbow 5s infinite both;

}

a{
    font-family: 'Fahkwang', sans-serif;
    color: rgb(253, 255, 245);
    text-decoration: none;
    text-transform: uppercase;
    
}

.list {
   
    display: flex; 
    align-content: stretch;
        flex-wrap: wrap;

}
.list p{width: 33.33333%;
}

a:hover{
color: rgb(112, 144, 211);
}

img{
    margin-top: 20px;
    padding: 2px;
    width: 60%;
    background-color: white;
    border: 2px solid #fafcf5;
    border-radius: 10px;
}


img:hover{
    border-radius: 200px;
    border: 2px solid rgb(112, 144, 211);
    transform: rotate(360deg)  scale(0.8) ;

    transition: border-radius 2s, transform 2s ease-out ;


}
p{
    font-family: ACME;
color: #fafcf5;
    text-align: center;
}


@keyframes color_anim {

    0%{color:rgb(8, 5, 5);}
    50%{color: rgb(122, 128, 122);}
    100%{color:rgb(10, 4, 4);}
    
    }


    @keyframes rainbow {
        0%{color: rgb(155, 4, 4)}
        14%{color:  rgb(168, 110, 2)}
        28%{color: rgb(175, 175, 6)}
        42%{color: rgb(1, 136, 1)}
        56%{color: rgb(9, 128, 9)}
        70%{color: rgb(8, 8, 128)}
        85%{color: rgb(112, 4, 112)}
    
    }