@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');


body{
    background: #ecf0f1;
}
header{

    align-items: center;
    display: flex;  
    justify-content: center;
    background: #ecf0f1;
}
.logo1{

    font-family: Montserrat;
    font-size: 50px;
    color:DodgerBlue;
    text-align: center;
    transition: color 0.8s;
    transition: transform 0.8s;
    border-bottom: 3px solid DodgerBlue;
    padding-bottom: .25em;
    text-decoration: none;    

}
.logo1:hover{
    
    color: DodgerBlue;
    transform: scale(1.5);
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='DodgerBlue' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");    
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: 10%;
    border-bottom: 0;
    padding-bottom: .3em;
    text-decoration: none;      
        
}
.game {
    display: flex;
    align-items: center;
    justify-content: center;    

    
}
.frame{
    transition: transform 0.8s

}
.frame:hover{
    transform: scale(1.1);
}